HTML text-level semantics

Before HTML5, text-level semantic elements were referred to in the specifications as inline elements. Therefore, if you are familiar with that description, be aware that we are talking about the same thing here.

Let’s take a look at the most common and useful text-level elements.

 

The <span> element

The span element is the text-level equivalent of a div. It is unopinionated and is the perfect element to reach for when you merely want to wrap text in an element for styling purposes.

 

The <b> element

Historically, visuals were defined in the markup and the <b> element meant “make this bold”. The b element represents 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.

Although no specific meaning is now attached to it, as it’s text level, it’s not intended to be used to surround large groups of markup. Use a div for that.

You should also be aware that because it was historically used to bold text, you’ll typically have to reset the font-weight in CSS if you want content within a <b> tag to not appear bold.

For example:

b {

font-weight: normal;

}

The <strong> element

If you do want to emphasize something for strength, urgency, or importance, <strong> is the element for you. Here is how the specification defines these use cases:

Importance: The strong element can be used in a heading, caption, or paragraph to distinguish the part that really matters from other parts that might be more detailed, more jovial, or merely boilerplate.

Seriousness: The strong element can be used to mark up a warning or caution notice.

Urgency: The strong element can be used to denote contents that the user needs to see sooner than other parts of the document.”

 

The <em> element

I’ll admit, in the past, I’ve often used <em> merely as a styling hook to provide italic text when I wanted it. I need to mend my ways as the HTML specification tells us:

The em element represents 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> or span tag instead.

The <i> element

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. For example, we could use it to mark up the odd name in this line of text:

<p>However, discussion on the hgroup element is now frustraneous as it’s now gone the way of the <i>Raphus cucullatus</i>.</p>

 

Or, perhaps if you were marking up a button in a food ordering web application, you might do this:

<button type="button">

French Fries <i>No Salt Added</i>

</button>

 

 

Putting HTML elements to use

It’s time to practice using some of the elements we have just looked at. If we compare the following markup to the original markup you can see where the new elements we’ve looked at have been employed:

<article>

<header class="Header">

<a href="/" class="LogoWrapper"

><img src="img/SOC-Logo.png" alt="Scone O'Clock logo"

/></a>

<h1 class="Strap">Scones: the most resplendent of snacks</h1>

</header>

<section class="IntroWrapper">

<p class="IntroText">

Occasionally maligned and misunderstood; the scone is a quintessentially British classic.

</p>

<figure class="MoneyShot">

<img class="MoneyShotImg" src="img/scones.jpg" alt="Incredible scones" />

<figcaption class="ImageCaption">

Incredible scones, picture from Wikipedia

</figcaption>

</figure>

</section>

<p>Recipe and serving suggestions follow.</p>

<section class="Ingredients">

<h3 class="SubHeader">Ingredients</h3>

</section>

<section class="HowToMake">

<h3 class="SubHeader">Method</h3>

</section>

<footer>

Made for the book,

<a href="http://rwd.education"

>'Responsive web design with HTML5 and CSS'</a

>

by

<address><a href="http://benfrain">Ben Frain</a></address>

</footer>

</article>

At this point I’d also like to offer some pragmatic advice; it isn’t the end of the world if you don’t always pick the correct element for every single given situation.

For example, whether or not I used a <section> or <div> in the earlier example is of little real consequence. If we use an <em> when we should actually be using an <i>, I certainly don’t feel it’s a crime against humanity; the folks at the W3C won’t hunt you down and tar and feather you for making the wrong choice. Just apply a little common sense. That said, if you can use elements like the <header> and <footer> when relevant, there are inherent accessibility benefits in doing so. I certainly think you’re better than using nothing but div elements in your markup!