The i, b, em, & strong elements

Oli Studholme — Tue, 09 Mar 2010 15:40:01 +0000

While many HTML4 elements have been brought into HTML5 essentially unchanged, several historically presentational ones have been given semantic meanings.

Let’s look at and and compare them to the semantic stalwarts and . In summary:

— was italic, now for text in an “alternate voice”, such as transliterated foreign words, technical terms, and typographically italicized text (W3C:Markup, WHATWG)

— was bold, now for “stylistically offset” text, such as keywords and typographically emboldened text (W3C:Markup, WHATWG)

— was emphasis, now for stress emphasis, i.e., something you’d pronounce differently (W3C:Markup, WHATWG)

— was for stronger emphasis, now for strong importance, basically the same thing (stronger emphasis or importance is now indicated by nesting) (W3C:Markup, WHATWG)

Giving presentational elements new semantic meanings

and were HTML4 font style elements and are still used presentationally where appropriate to follow typographic conventions. They now have semantic meaning, however, and their style can be changed via CSS, meaning they’re not only presentational — , for example, doesn’t have to be bold. Because of this, it’s recommended to use classes to indicate meaning to make it easy to change the style later.

The element

The i element represents 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, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.

HTML — Living Standard, WHATWG

Other things that are typically italicised include transliterated foreign words (using the attribute lang=""), inline stage directions in a script, some musical notation, and when representing hand-written text inline:

Deckard: Move! Get out of the way!

Deckard fires. Kills Zhora in dramatic slow motion scene.

Deckard: The report would be routine retirement of a replicant which didn’t make me feel any better about shooting a woman in the back. There it was again. Feeling, in myself. For her, for Rachael.

Deckard: Deckard. B-263-54.

Using to indicate a voiceover (alternate mood)

We ate unagi, aburi-zake, and tako sushi last night, but the toro sushi was all fished out.

Using to indicate a transliterated word from a foreign language (with lang="ja-latn" indicating transliterated Japanese). To check character sets for lang="" values you can use the IANA’s official list of character sets (ouch), or the excellent Language Subtag Lookup tool by Richard Ishida, W3C.

Nanotyrannus (“dwarf tyrant”) is a genus of tyrannosaurid dinosaur, and is possibly a juvenile specimen of Tyrannosaurus. It is based on CMN 7541, a skull collected in 1942 and described by Charles W. Gilmore described in 1946, who gave it the new species Gorgosaurus lancensis.

Using for taxonomic names

Only use when nothing more suitable is available — e.g., for text with stress emphasis, for text with semantic importance, for titles in a citation or bibliography, for the defining instance of a word, and for mathematical variables. Use CSS instead for italicizing blocks of text, such as asides, verse, and (as used here for W3C specification quote) block quotations. Remember to use the class attribute to identify why the element is being used, making it easy to restyle a particular use. You can target lang in CSS using the attribute selector (eg [lang="ja-latn"]). Full sentences of foreign prose should generally be set in quotes in their own paragraph (or blockquote), and should not use (add the lang attribute to the containing element).

The element

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.

HTML — Living Standard, WHATWG

For text that should merely look different, there is no requirement to use font-style: bold; — other styling could include a round-cornered background, larger font size, different color, or formatting such as small caps. For instance, in the script example above, is used to indicate who’s speaking or narrating.

Text that is bold by typographic convention (and not because it’s more important) could include names in a Hollywood gossip column or the initial text on a complex or traditionally designed page:

Connecting the versal (drop cap) with the text using . The pseudo-element selector :first-letter is used to create the versal. In this case, the opening phrase is bold only for stylistic reasons, but if it was semantically important, or some other element would be more appropriate. ~~Note that :first-letter only applies to block-level elements, so the versal “I” is not inside .~~

While we can use to apply a traditional typographic style like small-caps to the first word, phrase or sentence, the CSS pseudo-element selector :first-line is more appropriate in this case. For the first paragraph of HTML5Doctor.com articles we use the nifty :first-of-type CSS3 pseudo-class selector.

Only use when there are no other more suitable elements — e.g., for text with semantic importance, for emphasized text (text with “stress emphasis”),
–
for titles, and for highlighted or marked text. Use classes on list items for a tag cloud. To recreate traditional typographic effects, use CSS pseudo-element selectors like :first-line and :first-letter where appropriate. Again, remember to use the class attribute to identify why the element is being used, making it easy to restyle a particular use.

…and for comparison, the and elements

While and have remained pretty much the same, there has been a slight realignment in their meanings. In HTML4 they meant ‘emphasis’ and ‘strong emphasis’. Now their meanings have been differentiated into representing stress emphasis (i.e., something you’d pronounce differently), and representing importance.

The element

The em element represents stress emphasis of its contents.

HTML — Living Standard, WHATWG

The ‘stress’ being referred to is linguistic. If spoken, this stress would be emphasised pronunciation on a word that can change the nuance of a sentence. For example, “Call a doctor now!” emphasises the importance of calling a doctor, perhaps in reply to someone asking “Should I get a nurse?” In contrast, “Call a doctor now!” emphasises the importance of calling immediately.

Use instead to indicate importance and when you want italics without implying emphasis. The level of nesting represents the level of emphasis.

The element

The strong element represents strong importance for its contents.

HTML — Living Standard, WHATWG

Not much more to say really — it’s the we all know so well. Indicate relative importance by nesting elements, and use for text with stress emphasis, or for text that is “stylistically offset” or bold without being more important.

In summation…

A final thing to note: these elements (and almost all HTML5 elements) have also been made explicitly media-independent, meaning their semantics are not tied to how they look in a visual browser.

So there you have it — two stray dogs of presentational HTML4 have been transformed into meaningful HTML5 elements, ready to be adopted into your coding once again. Can you resist their semantically shiny puppy-dog eyes? Let us know!

Changes #

2012-01-31 I’ve updated mentions of using for foreign words to be specifically transliterated foreign words (what I was meaning), based on feedback in the comments. I’ve also updated spec quotes.

Related Posts:
The small & hr elements
The return of the u element
The ruby element and her hawt friends, rt and rp
Draw attention with mark
Quoting and citing with
, , , and the cite attribute
The i, b, em, & strong elements originally appeared on HTML5 Doctor on March 9, 2010.

HTML5 Doctor » strong

The i, b, em, & strong elements

Giving presentational elements new semantic meanings

The element

The element

…and for comparison, the and elements

The element

The element

In summation…

Changes #

Related Posts: