Question

What is the difference between the following code examples? I’d appreciate a few examples of where and how to use them. I know there must be some difference…

<b> and <strong>
<i> and <em>
<center> + <b>/<strong> and <h1>–<h6>

I am also wondering if there is an “alternative” for <u>…

Answer 1

The use of <b>, <i> and <center> is discouraged, because they do not add any meaning to the document’s structure. Their presentational effect can be recreated with CSS.

<strong> and <em> are clearly more semantic, since their names imply the notion of an emphasis. Note that browsers will render <strong> as bold and <em> as italics by default, but this can be changed with CSS also, so they’re not synonyms of <b> and <i>.

As for <h1> – <h6>, they represent six different levels of headings, and are used to give the content some hierarchy. Therefore, they are also semantically important.

And here is how to replace <u> with CSS (for example, on all elements with a class underline):

.underline { text-decoration: underline; }