多くの HTML4 の要素が変更されることなくそのまま HTML5 にもたらされたが、いくつかの装飾的な要素にはセマンティックな意味が与えられた。
<i> と <b> を、意味的にはっきりとしている <em> と <strong>と見比べてみよう。要約すると：
<i>— イタリックだったが、今は“代替の声”を表すテキストになった。外国の単語、技術用語、印刷慣例でイタリック体で表されるテキストなどだ。(W3C:Markup, WHATWG)<b>— ボールドだったが、今は“意味的に区別したい”テキストになった。キーワード、印刷慣例で太字で表されるテキストなどだ。 (W3C:Markup, WHATWG)<em>— 単なる強調だったが、今は強勢になった。つまり、トーンを変えて言いたいようなものに使うのだ。(W3C:Markup, WHATWG)<strong>— さらに強い強調を表していたが、今は強い重要性を表す。基本的には同じだ。（ネストすることで、さらに強い強調や重要性を示すことができるようになった。）(W3C:Markup, WHATWG)
装飾的な要素に新たなセマンティックな意味を与える
<i> と <b> は HTML4 フォント・スタイル要素だった。そして、今もなお、印刷慣例に従った適切なところで装飾的に使われている。それらはセマンティックな意味を持つことになったが、そのスタイルは CSS を通して変更できる。つまり、これらは装飾的というだけではないのだ。— 例えば、<b> はボールドである必要はない。なぜなら、意味を示すために class を使うことが推奨されているからだ。こうすることで、後にスタイルを簡単に変更できるようになるのだ。
<i> 要素
i 要素は声やムードを表すテキストの範囲や、通常の文から区別したい範囲を表します（一般的に印刷表現でイタリックとなるコンテンツ）。
通常イタリックとなるものとは、外国語（属性 lang="" を使う）、分類用語、技術用語、船の名前、台本のト書き、楽譜等が含まれる。インラインで考えや手書きのテキストなどを表すときも該当する：
- デッカード: どいてくれ！ここから離れろ！
- デッカードが発砲する。劇的なスロー・モーションのシーンでゾラが射殺される。
- デッカード: いつも通りのレプリカントの引退として報告されるだろうが、背後から女性に発砲するなんて、まったくいい気分ではない。今回も同じだ。これが俺の気持ちだ。彼女にとっても、レイチェルにとっても。
- デッカード: デッカードだ。B-263-54だ。
<i class="voiceover"> を使って、ナレーションを表す（代替のムード）We ate unagi, aburi-zake, and tako sushi last night, but the toro sushi was all fished out.
※ 日本語訳：私たちは寿司でウナギとあぶり鮭とタコを食べた。でもトロは全部釣られちゃったよ。
<i lang="ja-latn"> を使って、“他の言語の慣用句”（日本語）を表す。IANA’s official list of character sets (痛っ！)を見れば、lang=""にどんな値を使えるのか確認できる。Language Subtag Lookup tool by Richard Ishida, W3C もすばらしい。
ナノティラヌス (“小さな暴君”) はティラノサウルス類の恐竜で、ティラノサウルスの幼体だという説もある。これは CMN 7541 に基づいいる。1942 年に頭蓋骨が発掘され、1946 年に Charles W. Gilmore によって紹介された。彼は、それに新種 ゴルゴサウルス類 と名付けた人物だ。
<i class="taxonomy"> を使う。より適した要素が他にないときにだけ <i> を使うのだ。 — 例えば、強勢テキストには <em>、意味的に重要なテキストには <strong>、引用や参考文献一覧のタイトルには <cite>、用語の定義には <dfn>、数学的な変数には <var> だ。テキストのブロックをいたりっくにしたいのなら、代わりに CSS を使う。例えば、挿話、詩、（ここでも W3C 仕様の引用に使っているが）ブロック引用だ。その要素がなぜ使われたのかを区別できるよう、class 属性を使うことを忘れないようにしよう。特定の用途のスタイルを変えるときに、やりやすくなる。属性セレクタ（例 [lang="ja-latn"]）を使って、CSS で lang を特定することができる。
<b> 要素
<b>要素は、前後のコンテンツから区別したいテキストの範囲を表します。ただし、特に重要性を伝えるものではありません。例えば、ドキュメントの概要にあるキーワードや、レビューにある商品名や、良く太字で印刷されるようなテキストの範囲に使います。
単に見た目を区別したいだけの <b> テキストであれば、font-style: bold; を使う必要がまったくないのだ。 — 角を丸くした背景、大きめのフォント・サイズ、違う色、 スモール・キャピタルといった整形なども入れることができるだろう。例えば、上記の台本の例では、誰のセリフなのか、誰のナレーションなのかを示すために <b class="character"> が使われている。
ハリウッドのゴシップ・コラムに出てくる名前や、手の込んだページや伝統的なデザインのページの最初のテキストなどが、印刷慣例で太字になるテキスト（重要という理由からではない）といえるだろう：
<b class="opening-phrase"> を使ったテキストをつなげている。疑似要素セレクター :first-letter を使って、冒頭装飾文字を生成している。この場合、最初のフレーズはスタイリング目的だけでボールドにしている。しかし、それが意味的に重要だったのであれば、<strong> など他の要素のほうが適切だろう。:first-letter はブロック・レベルの要素にしか適用できないので、冒頭修飾文字の “I” は<b> の中に入れていない点に注意してほしい。
<b> を使うことができるが、この場合は、CSS の疑似要素セレクタ :first-line の方が適切だ。HTML5Doctor.com の記事の最初の段落には、粋な :first-of-type CSS3 疑似クラス・セレクタを使っている。他に適切な要素がないときにだけ <b> を使うのだ。 — 例えば、意味的に重要性を持つテキストであれば <strong>、強調テキスト（“強勢” を伴ったテキスト）であれば <em>、タイトルなら <h1>–<h6>、そして、テキストをハイライトしたりマーキングしたいのであれば <mark> だ。タグ・クラウド では、リスト項目で class を使うのだ。伝統的な印刷効果を再現したいなら、適切な場所で :first-line や :first-letter のような CSS 疑似要素セレクタを使うのだ。繰り返すが、なぜその要素が使われているのかを区別できるようにするために class 属性を使うことを忘れないでほしい。こうすれば、特定の用途をスタイルしなおすのも簡単になるのだ。
<em> と <strong> 要素の違いは...
<em> と <strong> はこれまでほとんど同じままだったが、それらの意味においては、ちょっとした調整が入った。HTML4 では、これらは ‘強調’ と ‘強い強調’ を意味していた。今、これらの意味は区別され、<em> は強勢（つまり、トーンを変えて言いたいようなもの）を、<strong> は重要性を表すことになった。
<em> 要素
em 要素は強調強勢を伴ったテキストの範囲を表す。
参照される ‘強勢’ とは言語上のものだ。話すときであれば、この強勢は、センテンスのニュアンスを変えるような単語で強く発音されるだろう。例えば、“すぐに医者を呼べ！”であれば、医者を呼ぶという点に重点が置かれているが、これはたぶん、“看護婦を呼んだほうがいい？”と誰かが尋ねたときに答えたものかもしれない。対照的に、“すぐに医者を呼べ！”であれば、すぐに呼ぶという点に重点が置かれる。
重要性を訴えるには <strong>を使い、強調を含めずにイタリックにしたいなら <i> を使うのだ。ネストの深さで、強調の度合いを表すことができる。
<strong> 要素
strong 要素は強い重要性を伴ったテキストの範囲を表す。
本当にこれ以上言うことはない。 — 私たちがよく知っている <strong> そのものだ。<strong> をネストすることで、相対的な重要性を示し、強勢を伴ったテキストには <em> を使い、“スタイル上で区別” したいテキストや、重要性を持たないようなボールドのテキストには <b> を使うのだ。
まとめると…
最後にひとこと：これらの要素（HTML5 要素のほとんどすべてがそうだが）は、明確にメディア非依存になった。つまり、これらのセマンティクスは、ビジュアル・ブラウザーでどう見えるかとは関係が無くなったということなのだ。
以上で次のことがお分かり頂けただろう — プレゼンテーショナルな HTML4 の 2 匹の野良犬たちが、意味を持った HTML5 要素に変身したのだ。再度、自分のコードに入れても良いだろう。あなたは、この意味的にキラキラした子犬の目に抗うことはできるかな？教えてほしい！