To the Strong and the Bold

With the introduction of HTML5, there has been a fair bit of confusion regarding the tags <strong> and <em>. Many developers have regarded these tags as replacements for <b> and <i> respectively. Even HTML Editors such as CKEditor and Adobe Dreamweaver have introduced these as defaults. Click on the  button in either of these applications and you're likely to get a <strong> instead of a <b>. Likewise, click on the button and you'll get <em> instead of <i>.

What people don't realize is that, unlike certain tags like <font> and <center>, <b> and <i> have not been deprecated. That's right, they are part of the HTML5 specification.

HTML5 Specs for the STRONG tag: http://www.w3.org/TR/html5/text-level-semantics.html#the-strong-element
HTML5 Specs for the EM tag http://www.w3.org/TR/html5/text-level-semantics.html#the-em-element

What exactly are these tags for?

We'll start with the difference between <strong> and <b>. Once you understand this, <em> and <li> should follow quite easily.

On the surface, to the human eye, there is no difference. <strong> and <b> both turn text bold, as shown below.

This text is <b>bold</b>
<br />
This text is <strong>strong</strong>.

This text is bold.
This text is strong.

The difference is that <b> is purely cosmetic, while <strong> has semantic significance. You use <strong> when you want to put some extra weight on a word, to increase its importance. You use <b> when you only want to make text bold.

With semantic significance, you can change the entire meaning of a sentence.

He didn't say he stole her jewels.
He didn't say he stole her jewels.
He didn't say he stole her jewels.
He didn't say he stole her jewels.
He didn't say he stole her jewels.
He didn't say he stole her jewels.
He didn't say he stole her jewels.

Contrast this to the code below. The headers are rendered with the <b> tag, not because they have any special significance, but because it would look nicer to have them in bold.

<table>
   <tr>
                <td><b>Header A</b></td>
                <td><b>Header B</b></td>
                <td><b>Header C</b></td>
                <td><b>Header D</b></td>
   </tr>
   <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
   </tr>
   <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
   </tr>
</table>

Result:

Header A	Header B	Header C	Header D
Data	Data	Data	Data
Data	Data	Data	Data

Of course, one could argue that we could just solve this thing with CSS (and you'd be quite right), but CSS is not the subject matter here. Just to be pedantic, the CSS descriptor font-weight:bold is also purely cosmetic.

Yes, to the human eye, this still makes no difference. <strong> and <b> will still appear as bolded text. It will, however, make a great deal of difference to a machine. The builders of the HTML5 specification probably intended for semantic markup to play a part in SEO (Search Engine Optimization). Thus, the separate tags even though they both look the same to you. Because if everything in bold was important, that would lead to a lot of cranky search results!

New fun stuff!

Apparently, you can also nest <strong> tags.

<strong>He never said he stole <strong>her</strong> jewels.</strong>

To the human eye, this does nothing more than bold the entire block of text. When a machine reads this, however, it's supposed to place importance on the sentence, and even greater importance on the word "her" within that sentence.

What about <em> and <i>?

So now, apply everything I just said about <strong> and <b>, and apply it to <em> and <i>.

What does this mean for future development?

Well, at this point in time, until everyone gets used to the idea and starts applying this standard, you could probably get away with using the tags interchangeably. But looking to the future, you're advised to adapt. Heaven knows when HTML5 syntax will finally stop fluctuating though, so take your time.

Until then, fortune favours the <b>, so go get <em>!
T___T