Besides the structural elements we've looked at, HTML5 also revises a few tags that used to be referred to as inline elements. The HTML5 specification now refers to these tags as text-level semantics (http://dev.w3.org/html5/spec/Overview.html#text-level-semantics). Let's take a look at a few common examples.
Although we may have often used the <b> element merely as a styling hook, it actually meant "make this bold". However, you can now officially use it merely as a styling hook in CSS as the HTML5 specification now declares that <b> is:
…a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.
OK, hands up, I've often used <em> merely as a styling hook, too. I need to mend my ways as in HTML5 it's meant to be used to:
…stress emphasis of its contents.
Therefore, unless you actually want the enclosed contents to be emphasized, consider using a <b> tag or, where relevant, an <i> tag instead.
The HTML5 specification describes the <i> as:
…a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text.
Suffice it to say, it's not to be used to merely italicize something.
Let's take a look at our current markup for the main content area of our home page and see if we can enhance the meaning to user agents. This is what we have currently:
<!-- the content -->
<div id="content">
<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />
<h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>
<p>that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>
<p>We're here to put things right. </p>
<a href="#">these should have won »</a>
</div>We can definitely improve things here. To begin with, the <span> tag within our headline <h1> tag is semantically meaningless in that context so as we're attempting to add emphasis with our style, let's also do it with our code:
<h1>Every year <em>when I watch the Oscars I'm annoyed…</em></h1>
Let's look at our initial composite again:
We also need to style the film names differently, but they don't need to suggest a different mood or voice. Seems like the <b> tag is the perfect candidate here:
<p>that films like <b>King Kong</b>, <b>Moulin Rouge</b> and <b>Munich</b> get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>
Tip
Default styling of text-level semantic elements
Because of the historical use of <b>, most browsers will still render that as bold so depending upon your situation you may need to restyle the default style in the associated CSS.
Finally, I mean it when I say 'we're here to put things right' – I'm not messing around and I want user agents to know it! So, finally, let's wrap that in a <i> tag. You could argue that I should also use the <em> tag here instead. That would also be fine in this case but I'm going with <i>. So there! This would look like the following:
<p><i>We're here to put things right.</i></p>
Like <b>, browsers will default to italicize the <i> tag so where needed, restyle as necessary.
So, we've now added some text-level semantics to our content to give greater meaning to our markup. There are plenty of other text-level semantic tags in HTML5; for the full run down, take a look at the relevant section of the specification at the following URL:
http://dev.w3.org/html5/spec/Overview.html#text-level-semantics
However, with a little extra effort we can take things one step further still by providing additional meaning for users of assistive technology.