HTML5では一貫性とシンプルさを保つために、HTML4から多くの変更が行われています。中でも、フォントや配置といった見た目を変えてしまう要素は、徹底的に排除されました。しかしながら、HTML4において見た目を変更するために使われていた要素のうちのいくつかは、HTML5でも依然残っています。これはどういうことなのでしょうか？

実は、それらの要素は、HTML5では意味が大きく変わってしまっているのです。HTML5でも同様に使えると勘違いして、かつてのような意味で使ってしまうと、いつか痛い目を見るかもしれません。そこで、この記事ではそれらのうちの一部の変更点を解説します。

<b> : 太字 → キーワード

<b>は有名な要素です。あなたの友だちもこれを知っているかもしれません。HTML4での意味は太字（bold体）です。文字を太く見せるのが、この要素の役割でした。ではHTML5においては？

HTML5において、<b>はキーワードを表します。強調や重要性を意味することはなく、単にキーワードとして存在することを表します。例えば以下のように使用します。

先日、Appleは新しい<b>iPhone</b>を発表した。

<b>要素に、もはや太字の意味合いはありません。ただし、一般的なブラウザでは太字で表示されることが多いようです。<b>要素の太字表示は規定された動作ではないため、太字にするために使用することは、予想外のトラブルを発生させる可能性があります。見た目を変更する場合はCSSで指定してください。

<i> : 斜体 → 引用など

HTML4では、<i>は文字を斜体(Italic体)にするのに使われていました。HTML5では引用文など、つまり英文ではイタリック体で書かれるような部分を表す要素となりました。以下のように使用します。

<i>吾輩は猫である。名前はまだない。</i>

<b>要素と同じく、斜体表示を強制する意味合いは持ちあわせていません。

HTML5には充実した要素が存在するので、意味が曖昧な<i>要素を使用することはあまり推奨されていません。例えば上の例においても、引用（quotation）を表す<q>要素のほうがより適切であると考えられます。

また、イタリック体というのはもともと日本語には存在しない強調法です。よって、普段は無理に使わず、英語の文章を記述しているとき、あるいは他に適切な要素が存在しなかった場合にのみ使うことになると思います。

<small> : 小さくする → 注釈

<small>要素はその名の通り、文字を小さくするのが役目でした。HTML5では注釈などを意味します。以下のように使用します。

MicrosoftのKinect（*1）によって、一般的な家庭でも簡易的なモーションキャプチャができるようになった。

<small>（*1）カメラに各種センサがついた機械。</small>

一般的なブラウザでは<small>要素は小さく表示されますが、小さく表示することを強制する意味はありません。

<em> : 強調 → 強勢

これはもともと使っていた人は少ないですが、強調（emphasize）を表す要素でした。HTML5では強勢を表す要素になりました。……強調と強勢、どう違うんでしょう？

強勢は、そこにアクセントを置くことにより、文全体の意味合いが変わってしまうようなもののことです。例えば以下のように使用します。

<em>彼</em>が毒リンゴを食べた。

彼が<em>毒リンゴ</em>を食べた。

前者では「彼」が毒リンゴを食べてしまったことを表す文章なのに対し、後者では彼が食べたのは「毒リンゴ」だ、という意味の文章になります。

一般的には太字で表示されますが、太字を強制する意味合いはありません。

<strong> : 強い強調 → 重要・深刻・緊急など

HTML4では「<em>より強い」程度の意味でした。HTML5では重要性を表す要素になります。以下のように使用します。

Appleは新たな革新的製品を発表した。それが<strong>Apple Watch</strong>だ。

<b>と同じような要素に見えますが、こちらはより具体的な意味を持ちます。<b>が単なるキーワードを表すことに対して、<strong>は筆者が重要だと主張していることを表します。また、文章に対して使用することも出来ます。

Googleは自動運転車の路上実験を行っている。<strong>これが成功すれば歴史的な快挙となる。</strong>

この要素も一般的には太字で表示されますが、太字の表示を強制するものではありません。

<hr>  : 水平線 → セクション内でのテーマの区切り

HTML4では水平線を表示する要素でしたが、HTML5では全く意味が異なる、セクション内での明示的なテーマの区切りへと変更されました。以下のように使用します。

スマートデバイスの登場により、PCの立場は危うくなりました。近年のスマートフォンやタブレットでは、高度な画像編集からプログラミングまでこなせてしまうので、もうPCに頼る必要はないように思えます。

<hr>

でも、本当にそうなのでしょうか？例えば数百枚のレイヤーを使ったイラストがタブレットで描けるでしょうか？Battlefield4のような先進的なグラフィックのゲームがスマートフォンで動くでしょうか？PCにしかできないことは、まだまだたくさんあります。

なお、セクションというのはHTML5で追加された新たな概念です。詳しくは各自で調べてください。