Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

HTML5で再定義された要素と属性
ここが違う!サンプルで見るHTML5(3)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/12/09 14:00

 連載第3回目では、HTML5で用途が変更され、再定義された要素について解説します。旧来からある要素も含めて、改めて理解することの重要性を感じていただければと思います。

目次

はじめに

 この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。

過去の連載も読む

要素はスタイルを表さない

 HTML5は、新たに追加された要素に注目されがちですが、旧来から使われてきた要素についても再定義しています。

 HTML4やXHTML1.0で規定された要素には、スタイリングを指示する要素がありました。HTML5では、スタイリングはCSSに任せ、要素はセマンティクスのみを表すことに重点が置かれています。そのため、HTML5のすべての要素から、スタイリングを指示する意味合いが完全に排除されています。

 実際に、スタイリングを指示するだけの要素は、HTML5で廃止となりました。代表的な要素として、big要素、center要素、font要素などが挙げられます。

要素のグループ

 旧来のHTMLでは、インライン要素やブロック要素というカテゴリーで要素が分類されていました。これはある意味、スタイルをベースにした分類方法といえるでしょう。これは、スタイリングを扱うCSSにおいては重要なことですが、セマンティクスを扱うHTMLにおいては重要なことではありません。

 近年は、CSSによってブロック要素をインライン要素かのようにスタイルすることもしばしばです。例えば、CSSのdisplayプロパティを使えば、ブロック要素であるdiv要素をインラインのスタイルに変更することができます。そのため、インラインとブロックという分類方法は、あまり意味を持たなくなりました。結局のところ、インラインとブロックという分類は、これらの名前から想像する役割とは異なり、どの要素にどんな要素を入れることができるのかを決める基準の1つとして使われています。

 HTML5では、インラインとブロックによる分類は廃止され、新たなカテゴリーによって分類されることになりました。この新しいカテゴリーによって、要素の包含関係を詳しく規定しています。

 HTML5で新たに導入されたカテゴリーは、メタデータ・コンテンツフロー・コンテンツセクショニング・コンテンツヘッディング・コンテンツフレージング・コンテンツエンベッディッド・コンテンツインタラクティブ・コンテンツです。

HTML5の要素の分類
HTML5の要素の分類

 HTML5での要素の分類では、1つの要素が1つのカテゴリーに属するのではなく、複数のカテゴリーに属する場合があります。例えば、img要素は、フロー・コンテンツ、フレージング・コンテンツ、エンベッディッド・コンテンツのいずれにも属します。さらに、usemap属性が指定されていれば、インタラクティブ・コンテンツにも属します。

 ここでは、要素の分類を細かく覚えていただく必要はありません。このように、HTML5では要素の見た目を基準とした分類ではなく、その要素の意味や用途を基準とした分類に変更された点を理解していただければ十分です。

 もし要素が属するカテゴリーを知りたいなら、HTML5仕様の個々の要素の説明から情報を得ることができます。次は、HTML5仕様のsmall要素の部分をキャプチャーしたものです。

small要素の仕様
small要素の仕様

 該当の要素が属するグループは、「Categories」欄に掲載されています。ここから、small要素はフロー・コンテンツとフレージング・コンテンツに属していることが分かります。

 「Contexts in which this element can be used」欄には、この要素を使うことができる場所が掲載されています。ここではフレージング・コンテンツが期待される場所と書かれています。

 「Content model」欄には、この要素の中に入れることができる要素のカテゴリーが記載されています。ここから、small要素の中には、フレージング・コンテンツに属する要素を入れることができるということが分かります。

装飾目的だった要素が残されたワケ

 見た目しか表さない要素はHTML5で廃止になったとはいえ、いくつかの要素は残されました。例えば、i要素、b要素、small要素などです。HTML5ではセマンティクスが重視されているにもかかわらず、なぜこのような要素が残されたのでしょうか。それは、新たにセマンティクスが吹き込まれたからです。今回は、こういったHTML5に残された要素について解説していきます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 羽田野 太巳(ハタノ フトミ)

    有限会社futomi 代表取締役 1971年岐阜県生まれ。 ホスティングサーバー(共用サーバー)でも利用できるウェブ・アプリケーションの独自開発・販売を手がける。主にPerlによるCGI制作が中心。 オーダーメードのウェブ・アプリケーション制作/ウェブ・サーバー管理業務も手がける。 20...

バックナンバー

連載:ここが違う!サンプルで見るHTML5

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5