SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 この連載では、今日のウェブ業界の流行語となっている「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に残された要素について解説していきます。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
セマンティクスが与えられたインライン要素

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ここが違う!サンプルで見るHTML5連載記事一覧

もっと読む

この記事の著者

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

有限会社futomi 代表取締役1971年岐阜県生まれ。ホスティングサーバー(共用サーバー)でも利用できるウェブ・アプリケーションの独自開発・販売を手がける。主にPerlによるCGI制作が中心。オーダーメードのウェブ・アプリケーション制作/ウェブ・サーバー管理業務も手がける。2007年にHTML5.JPを開設し、Canvasを使ったJavaScriptライブラリの開発、HTML5の最新情報の発信、HTML5関連仕様の日本語訳を手がける。主な著書に『徹底解説HTML...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5614 2011/01/05 16:46

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング