HTML5 Semantic elements sample

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.

1. Deckard: Move! Get out of the way!
2. Deckard fires. Kills Zhora in dramatic slow motion scene.
3. 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.
4. 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 (ouch), or the excellent Language Subtag Lookup tool by Richard Ishida, W3C.