If you were to use
<em> tags in HTML5 the same way that you’re accustomed to, it would be fine. As many have stated, HTML5 is backwards-compatible with old-style trends in SEO, accessibility, and markup, so your pages won’t break or be considered obsolete or deprecated.
But that doesn’t mean that some of these elements aren’t evolving. One good example is the use of tags to make what we normally know as “bold” and “italic” text.
Here I describe some things to take note of when adding HTML elements that are usually associated “bold” or “italic” text.
(“strong” photo credit: Brian Lary)
The <b> and <strong> Elements
When coding sites with HTML4/XHTML markup, we have been encouraged to use
<strong> instead of
<b> element has been kind of left in the lurch since we could style text with CSS, and add importance using
Using CSS to give text a visually bold appearance and using
<strong> to give text more emphasis (for SEO or overall content strategy) was the correct way. In HTML5 things are similar but slightly different. Now, according to the spec, the
<b> element is used to make text “stylistically offset from the normal prose without conveying any extra importance.” So it no longer means “make this bold”. Technically, the letter “b” used in the element has nothing to do with “bold” anymore. You can use
<b> for key words, the lead sentence in an article (the spec uses this BBC article as an example), or other text that should stand out from the rest, but that you don’t want to have extra importance.
<strong> element, according to the spec, gives text “strong importance for its contents”. So the
<strong> tag puts content into the context of a hierarchy (which is pretty much the same as what it was in HTML4). So if you have something wrapped in double
<strong> tags, it will have more importance than something with only a single
If this is too confusing, here’s a simple summary:
<b> when you want the text to have a different style without contextual importance, but use
<strong> when you want the text to have extra importance from a content or SEO perspective.
The <i> and <em> Elements
In a similar way, the
<i> element should now be viewed a bit differently. It’s not exclusively for “italicized” text (although it can be italic, that’s up to you). It now represents text that’s “in an alternate voice or mood, or otherwise offset from the normal prose” (which is really what italicized text is). Similar to
<b>, it has no contextual importance in comparison to surrounding content. According to the spec, you can use
<i> for taxonomic designations, a foreign-language idiom (for example, the phrase argumentum ad verecundiam), or even a dream sequence.
And if I’m not mistaken, as is common, publication titles should be offset using (UPDATE: After further research on this matter, I realized that publication titles are now offset in HTML5 using
<i> (although the spec doesn’t really give that as an example).
<cite> tags, as explained here, so you wouldn’t use
<i> for that purpose.)
<em> element (similar to
<strong>) is used to place emphasis on a portion of text. While
<strong> is used for creating a contextual hierarchy,
<em> is just a simple way of emphasizing something, the same way words or phrases would be emphasized colloquially. For example, in the phrase “The HTML5 spec really is hard to understand” you might emphasize the word “is”, so it reads “The HTML5 spec really is hard to understand”.
And again, if that’s somewhat unclear, here’s a simple explanation:
<i> to offset the mood of text, but use
<em> to make text emphatic.
Why the Changes?
I hope I’m not using the argumentum ad verecundiam fallacy here, but in HTML5 for Web Designers, Jeremy Keith explains why we should embrace the evolution of these elements:
These changes … help increase the device-independence of HTML5. If you think about the words “bold” and “italic”, they only make sense for a visual medium such as a screen or a page. By removing the visual bias from the definitions of these elements, the specification remains relevant for non-visual user agents such as screen readers.
What do you think? Will this change the way you markup content? Or is this pretty much how you’ve been using these elements prior to HTML5?