Category: HTML

As a comment to  em and his buddy strong, Tony Fahnestock sent a tweet mentioning the way the elements <i> and <b> are being treated in the working draft of HTML5 in a section called “text-level semantics.”

Here’s how the <b>, or bold, element is defined there.

The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.

The following example shows a use of the b element to highlight key words without marking them up as important:

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

In the following example, objects in a text adventure are highlighted as being special by use of the b element.

<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

Another case where the b element is appropriate is in marking up the lede (or lead) sentence or paragraph. The following example shows how a BBC article about kittens adopting a rabbit as their own could be marked up:

<article>
 <h2>Kittens 'adopted' by pet rabbit</h2>
 <p><b>Six abandoned kittens have found an unexpected new
 mother figure — a pet rabbit.</b></p>
 <p>Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.</p>
[...]

The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.

I want to emphasize this sentence: The b element should be used as a last resort when no other element is more appropriate. When semantic meanings are considered, almost any other element is probably more appropriate.

Let’s stray off topic a moment to talk about <mark>. The <b> is defined as a stylistic element that conveys no extra meaning. A new element, <mark> is suggested for highlighting text. Here’s what the working draft says about <mark>:

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader’s attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity.

Semantically speaking, it seems to me that <mark> conveys meaning for highlighting text to a greater degree than <b>, which is used for stylistic reasons in HTML5, as it has been in HTML4 and XHTML.

Back to the <i>, or italics, element. From the working draft:

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.

Terms in languages different from the main text should be annotated with lang attributes (or, in XML, lang attributes in the XML namespace).

The examples below show uses of the i element:

<p>The <i>Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

In the following example, a dream sequence is marked up using i elements.
<p>Raymond tried to sleep.</p>
<p><i>The ship sailed away on Thursday</i>, he dreamt. <i>The ship had many people aboard, including a beautiful princess called Carey. He watched her, day-in, day-out, hoping she would notice him, but she never did.</i></p>
<p><i>Finally one night he picked up the courage to speak with her—</i></p>
<p>Raymond woke with a start as the fire alarm rang out.</p>

Authors are encouraged to use the class attribute on the i element to identify why the element is being used, so that if the style of a particular use (e.g. dream sequences as opposed to taxonomic terms) is to be changed at a later date, the author doesn’t have to go through the entire document (or series of related documents) annotating each use. Similarly, authors are encouraged to consider whether other elements might be more applicable than the i element, for instance the em element for marking up stress emphasis, or the dfn element to mark up the defining instance of a term.

This definition of <i> offers more proper uses for the <i> element in ways that do provide limited semantic underpinnings. Use <i> to offset text from the normal prose in ways that indicate “taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name” but not as a way to highlight text (use <mark> for that) or a way to emphasize text (use <em> for that) or a way to indicate the defining instance of a word (use <dfn> for that).

With the addition of a class attribute or a lang attribute, the <i> element can be made even more semantically self-explanatory.  HTML4 and XHTML both already encourage the lang attribute when italics are used to indicate another language, so this is not new to HTML5.