セマンティクスが与えられたインライン要素
i要素、b要素、small要素、s要素などは、旧来のHTMLではスタイリングを指示する要素でした。しかし、HTML5では、これらの要素は廃止されませんでした。これらの要素は、スタイリングを指示する役割の代わりに、文書上の意味、つまりセマンティクスが与えられることになりました。
i要素、b要素は、もともとはイタリック体、太字でレンダリングすることを指示する要素でした。しかし、HTML5では、他の文章から何かしらの理由で区別されたテキストの範囲を表すことになりました。とはいえ、ただ単に目立たせたいためだけに、これらの要素を使うのではありません。i要素とb要素には、利用シーンが想定されています。
印刷慣例に基づいたi要素とb要素
HTML5では、i要素は、印刷慣例でイタリック体で表現される単語やフレーズに使うことと規定されました。とはいえ、これではスタイリングを目的とした要素に違いがないと感じることでしょう。
英語圏では、本や雑誌などで、特定の単語をイタリック体で表現する慣例があります。船の名前、分類用語、技術用語などです。また、小説などでは、登場人物が心で思ったことがイタリック体で表されることもあります。このように、印刷慣例でイタリック体で表現される単語やフレーズには、ある一定の規則があります。著者が好き勝手にイタリック体にしているわけではありません。
印刷慣例に基づいたイタリック体の単語やフレーズは、ひとつの文書の中で、明確に他の文章と区別されることになります。このイタリック体が特定の用途に使われることによって、読者はいちいち説明を受けることなく、その意味を正確に理解できるのです。
英語圏の印刷慣例は、英語版のウィキペディアにも詳しく書かれています。
ここに掲載された用途のいくつかをご紹介しましょう。
The <i>Queen Mary</i> sailed last night.
An <i>even</i> number is one that is a multiple of 2.
<i>This can't be happening</i>, thought Mary.
英語版のウィキペディアには、他にもイタリック体の用途が列挙されているのですが、すべてにi要素が適しているのではありませんので注意してください。例えば、強調やタイトルも印刷慣例ではイタリック体で表されます。しかし、強調の中でも重要性を表すのであればstrong要素、アクセントを強くしたいのであればem要素、タイトルであればh1～h6要素が適しているのは言うまでもありません。
一方、日本においてはイタリック体の印刷慣例はあまり見かけません。日本語に使われるひらがなや漢字はイタリック体で表現すると読みにくいという事情もあるのでしょう。もちろん日本語のページでも、英語圏の印刷慣例に合わせてi要素を使っても構いません。その場合は、無理にイタリック体で表現するのではなく、CSSを使って読みやすい字体にするのが良いでしょう。
<p><i class="thought">こんな事あり得ないわ</i>、とメアリーは思いました。</p>
i.thought {
font-style: normal;
}
i.thought:before {
content: '「';
}
i.thought:after {
content: '」';
}
この例では、小説の登場人物が心で思ったフレーズをi要素でマークアップしています。このi要素にはclass属性がセットされている点に注目してください。i要素は必ずしも同じ用途で使われるわけではありません。そのため、用途を表すクラス名をclass属性にセットし、スタイルシートでは、そのクラス名をフックにしてスタイルを定義するのが良いでしょう。
b要素も、i要素と同様に、印刷慣例に基づいています。英語圏の文献では、その本題となるキーワードを太字にする印刷慣例がありますが、それに該当するのがb要素です。とはいえ、b要素は重要性を表すわけではありません。重要性を表したいのであれば、strong要素を使うべきです。
このb要素の用例は、ウィキペディアの各ページで頻繁に見ることができます。
これは、HyperText Markup Languageについて解説したページですが、そのキーワードとなる「HTML」がb要素でマークアップされています。とはいえ、このページに記載されているすべての「HTML」という単語がb要素でマークアップされるわけではありません。通常は、冒頭で使います。印刷慣例から逸脱してb要素を乱用するのは避けるべきです。
その他の変更された要素
i要素やb要素の他にも、いくつか用途が変更された要素があるので、ここでまとめて紹介します。
| 要素 | 説明 |
s要素 |
もう正確ではない、もう関連性がなくなった、という意味を与えます。 <p>アイスティーとレモネードがお買い得！</p> <p><s>希望小売価格: 1本 $3.99</s></p> <p><strong>今なら1本たったの $2.99 でご奉仕！</strong></p> この要素に削除訂正という意味はありません。削除訂正なら del要素を使うべきです。 |
small要素 |
免責条項、著作権表記などの細目を表します。 <footer> <p><small>Copyright © 2010 Example.JP All Rights Reserved.</small></p> </footer> |
em要素 |
アクセントを強くしたいテキストの範囲に使います。 <p><em>私</em>はネコが好きなのです。</p> <p>私は<em>ネコ</em>が好きなのです。</p> アクセントの位置が違うと、その文章のニュアンスが違う点に注目してください。 |
strong要素 |
重要性を表します。読者に強く訴えて必ず理解してもらいたいテキストの範囲に使います。 <p><strong>パスワードを変更してください。</strong></p> |
hr要素 |
段落レベルのテーマの変わり目を表します。章や節の中で使います。章や節といったセクションの変わり目に使うのではありませんので注意してください。 |
cite要素 |
書籍、映画、テレビ番組、芸術などの作品のタイトルを表します。人の名前に使ってはいけませんので注意してください。 <p>私はiPadで<cite>Alice's Adventures in Wonderland</cite>を読みました。</p> |
s要素とdel要素は良く混同されるので、その違いを理解してください。いずれの要素も、ブラウザーのデフォルトのスタイルでは、取り消し線が引かれます。しかし、HTML5のセマンティクスは異なります。del要素は訂正を表します。つまり、del要素でマークアップされたテキストは間違いだったというニュアンスを含みます。それに対して、s要素でマークアップされたテキストは、間違いだったのではなく、変更されたというニュアンスを含みます。前述のs要素の用例のような定価と割引価格を掲載するシーンで、その定価にdel要素を使ってしまうと、以前は誤った価格を掲載していたことになってしまうため、注意してください。
hr要素の使い方にも注意が必要です。旧来のHTMLでは、hr要素は罫線を表す要素でしたが、文書構造上の意味を含んでいませんでした。しかし、HTML5では段落レベルの区切りというセマンティクスが与えられました。section要素やarticle要素でマークアップされた章や節を区切るためにhr要素を使うことはできません。HTML5のhr要素は、section要素やarticle要素でマークアップされた章や節を、その中でさらに分離するために使うのです。
