はじめに
この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。
過去の連載も読む
要素はスタイルを表さない
HTML5は、新たに追加された要素に注目されがちですが、旧来から使われてきた要素についても再定義しています。
HTML4やXHTML1.0で規定された要素には、スタイリングを指示する要素がありました。HTML5では、スタイリングはCSSに任せ、要素はセマンティクスのみを表すことに重点が置かれています。そのため、HTML5のすべての要素から、スタイリングを指示する意味合いが完全に排除されています。
実際に、スタイリングを指示するだけの要素は、HTML5で廃止となりました。代表的な要素として、big要素、center要素、font要素などが挙げられます。
要素のグループ
旧来のHTMLでは、インライン要素やブロック要素というカテゴリーで要素が分類されていました。これはある意味、スタイルをベースにした分類方法といえるでしょう。これは、スタイリングを扱うCSSにおいては重要なことですが、セマンティクスを扱うHTMLにおいては重要なことではありません。
近年は、CSSによってブロック要素をインライン要素かのようにスタイルすることもしばしばです。例えば、CSSのdisplayプロパティを使えば、ブロック要素であるdiv要素をインラインのスタイルに変更することができます。そのため、インラインとブロックという分類方法は、あまり意味を持たなくなりました。結局のところ、インラインとブロックという分類は、これらの名前から想像する役割とは異なり、どの要素にどんな要素を入れることができるのかを決める基準の1つとして使われています。
HTML5では、インラインとブロックによる分類は廃止され、新たなカテゴリーによって分類されることになりました。この新しいカテゴリーによって、要素の包含関係を詳しく規定しています。
HTML5で新たに導入されたカテゴリーは、メタデータ・コンテンツ、フロー・コンテンツ、セクショニング・コンテンツ、ヘッディング・コンテンツ、フレージング・コンテンツ、エンベッディッド・コンテンツ、インタラクティブ・コンテンツです。
HTML5での要素の分類では、1つの要素が1つのカテゴリーに属するのではなく、複数のカテゴリーに属する場合があります。例えば、img要素は、フロー・コンテンツ、フレージング・コンテンツ、エンベッディッド・コンテンツのいずれにも属します。さらに、usemap属性が指定されていれば、インタラクティブ・コンテンツにも属します。
ここでは、要素の分類を細かく覚えていただく必要はありません。このように、HTML5では要素の見た目を基準とした分類ではなく、その要素の意味や用途を基準とした分類に変更された点を理解していただければ十分です。
もし要素が属するカテゴリーを知りたいなら、HTML5仕様の個々の要素の説明から情報を得ることができます。次は、HTML5仕様のsmall要素の部分をキャプチャーしたものです。
該当の要素が属するグループは、「Categories」欄に掲載されています。ここから、small要素はフロー・コンテンツとフレージング・コンテンツに属していることが分かります。
「Contexts in which this element can be used」欄には、この要素を使うことができる場所が掲載されています。ここではフレージング・コンテンツが期待される場所と書かれています。
「Content model」欄には、この要素の中に入れることができる要素のカテゴリーが記載されています。ここから、small要素の中には、フレージング・コンテンツに属する要素を入れることができるということが分かります。
装飾目的だった要素が残されたワケ
見た目しか表さない要素はHTML5で廃止になったとはいえ、いくつかの要素は残されました。例えば、i要素、b要素、small要素などです。HTML5ではセマンティクスが重視されているにもかかわらず、なぜこのような要素が残されたのでしょうか。それは、新たにセマンティクスが吹き込まれたからです。今回は、こういったHTML5に残された要素について解説していきます。
