HTML5 changed the semantic meaning of some elements and there has been little talk about it. I stumbled upon the difference while reading the HTML5 specification for the PHP HTML5 parser and serializer. What has changed is that there is now a difference between strong and bold along with a difference between emphasized and italics.

These elements have had quite a history.

Bold and Italics Before HTML5

Bold was a visual styling and that should be in CSS rather than tags, right? So, we have the strong tag. The same type of thing happened for the italics tag. In the HTML4.01 spec and XHTML specs there were no longer bold or italics tags.

But, they didn't go away. Not in use.

Strong and Bold

In HTML5 <strong> and <b> both exist and have a different meaning.

The <b> tag is for "offset text conventionally styled in bold". If you read deeper into the details you'll see it adds, "without conveying any extra emphasis or importance".

<strong> is different. It "represents a span of text with strong importance." There is semantic meaning of importance here. In fact, a <strong> tag within another <strong> tag has even more importance. There is nested importance. The html5 spec is enlightening on this.

Emphasized and Italics

Just like <strong> and <b> we have changes to <em> and <i>. The <i> tag is for "text conventionally styled in italic". There is no semantic meaning. <em> "represents a span of text with emphatic stress". Like <strong>, <em> is a tag with semantic meaning and that matters when nested.

Does The Spec Represent The Practice?

I'm not really sure. We'd need to go to those who read the markup while caring about semantic meaning to find out. I know that many tools don't take this into account. For example, CK Editor has buttons for italics and bold but uses the <em> and <strong> tags. This may be a part of HTML5 that just isn't widely understood or used.

Continue Reading »