<b>, <i> and their family

b and i were all but banned in XHTML and HTML4, replaced semantically with strong and em. u was never directly replaced, but fell into partial disuse alongside its siblings.

In HTML5 they’re back.

A principle of HTML5 is that the specification and the implementations should match, even if that means changing the spec. I guess there are simply too many sites still using b and i to declare them obsolete. At the same time there’s no rowing back form strong and em.

The simple version – you can keep using b, i and u, strong and em and be done with it.

Of course there’s more to it than that.

Semantic meanings and fine distinctions

HTML5 takes a fascinating approach – it examines the typographic uses of b, i and u, and derives semantic meanings for them. It leads to some fine shades of meaning between the elements:

<b> 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 ledeThe b element should be used as a last resort when no other element is more appropriate.
<strong> strong importance
<i> 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, such as a taxonomic designation, a technical term, an idiomatic phrase or short span of transliterated prose from another language, a thought, or a ship name in Western textsAuthors are encouraged to consider whether other elements might be more applicable than the i element.
<em> stress emphasis
<u> span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspeltIn most cases, another element is likely to be more appropriate

Some observations:

  • b, i and u are now abstract tags with semantic meanings – formally they no longer stand for bold, italic and underline.
  • The spec obviously has a far easier time defining semantic meanings for strong and em than it does for b, i and u.
  • Some of these differences in meaning are particularly…subtle. I find it hard to be clear about the difference between b and strong.
  • The specification for u is scarcely semantic at all.
  • Though somewhat rehabilitated, b, i and u are still strongly discouraged.

Although b, i and u no longer formally stand for bold, italic and underline, this is almost certainly how browsers will continue to render them.

The W3 Spec has substantial examples illustrating correct usage:

And a table summarising the differences between these and various alternatives.

Nesting

The specification specifically allows nesting for strong and for em, but doesn’t mention it for b, i and u:

  • The level of stress that a particular piece of content has is given by its number of ancestor em elements.
  • The relative level of importance of a piece of content is given by its number of ancestor strong elements; each strong element increases the importance of its contents.

It goes on to give examples. However how you would use it practically and how you would render it are not obvious.

Interestingly, the W3C validator considers nested b, i and u elements valid also. Looking at the content model, this is correct – they all contain phrasing content, and are phrasing content themselves. The spec does not choose to emphasise or discuss it – and how you would usefully nest i is even less obvious than strong and em.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s