HTML5 で新たに導入された構造タグ

コンテンツ・ブロックを明確に定義する

HTML5 には新しいタグが数多く導入されており、そのうちのいくつかは文書の構造を適切に記述するために特化されたものです。この記事では HTML5 で新たに導入された構造タグについて説明します。さらに、これらの構造タグを使用して 1 つの文書を複数のコンテンツ・ブロックに分割する方法を詳しく説明します。新しい構造タグの概念を理解しやすくするために、サンプル・コードも示すことにします。

Jeremy J. Wischusen, Web Application Architect, Binary Neuron L.L.C.

Jeremy Wischusen photoJeremy Wischusen は 13 年以上にわたって Purple Communications、myYearbook.com、HBO などの顧客向けに Web サイトやアプリケーションを設計してきており、Flash、Flex、jQuery、PHP、MySQL、MSSQL、PostgreSQL を使用したフロントエンド・システムとバックエンド・システムの両方を構築してきました。彼は Wyeth Pharmaceuticals、The Vanguard Group、Bucks County Community College、The University of the Arts などの顧客に対し、Web デザイン、Flash、ActionScript を教えた経験があります。



2011年 7月 01日

HTML5 とは何か

HTML (HyperText Markup Language) の最新バージョンである HTML5 では、これまで HTML に加えられた変更のなかでも最大となる大幅な変更が加えられています。HTML5 では、さまざまな領域に多くの新機能が導入されています。特に注目に値する追加事項には以下のようなものがあります。

  • 音声や動画のための組み込みのマルチメディア・タグ
  • ブラウザーにコンテンツを描画するための canvas タグ
  • 必須属性を使用することで妥当性検証などを行えるインテリジェントなフォーム

HTML5 では、一連の新しい構造タグにより、HTML 文書の構成方法が変更されています。これらの新しい構造タグは、1 つの HTML 文書を論理的な複数の部分に分割することに重点を置いています。これらのタグの名前は、そのタグに含まれるコンテンツのタイプを表しています。この記事では、これらの新しいタグついて詳細に説明します。

HTML5 に至るまでの背景

Tim Berners-Lee 氏はインターネット上の情報にアクセスするための従来の方法の欠点に対処するために、最初の HTML を 1989年に作成しました。インターネットが登場した時から、インターネット上のどこに何があるかを見つけるのは困難な作業でした。インターネット上のコンテンツは個々の文書として扱われ、それらの文書の間をナビゲートする簡単な方法はありませんでした。基本的に、検索を行う人は検索対象のアドレスを知っている必要があり、そのアドレスを手で入力する必要がありました。この問題に対処するために、Berners-Lee 氏は HTTP (Hypertext Transfer Protocol) と HTML という 2 つの技術を作り出しました。

HTTP は Web サーバーがコンテンツを提供するために使用するサービス・プロトコルです。皆さんの Web ブラウザーの URL の最初の部分は (そのブラウザーが完全な URL を表示するとすれば)、まず確実に http:// で始まるはずです。この URL の先頭部分は、Web サーバーにリクエストを送信する際に使用するプロトコルのタイプをブラウザーに指示します。ある文書に対するリクエストをサーバーが受信する場合、その文書はおそらく HTML で作成されているか、あるいは HTML に変換されています。リクエストを送信したブラウザーに返送されるのは HTML 文書です。

HTML はコンテンツの表示方法を Web ブラウザーに指示するためのスクリプト言語です。そのコンテンツの中に他の文書へのリンクを含め、インターネット上の文書間をナビゲートするための使いやすい手段を提供することができます。

この HTTP と HTML の組み合わせによって、テキスト・リンクをクリックするだけでさまざまな文書間をナビゲートできるようになり、インターネット上のコンテンツを素早く容易にナビゲートすることが可能になります。この 2 つの技術を作成した後、Berners-Lee 氏はさらに、World Wide Web Consortium (W3C) を設立しました。W3C は HTML の最初の 4 つのバージョンを推進する中心となりました。

インターネットの当初の目的は単純なテキスト文書を提供することでした。最も初期のブラウザーはすべてテキスト・ベースでした (意匠を凝らしたウィンドウはなく、テキストが画面に表示されるだけでした)。画像を追加することさえ、その当時は大変なことでした。しかし今や人々は E メール・メッセージの送信から TV の視聴まで、すべてをインターネット上で行えるようになりました。インターネットは、「単純なテキスト文書を転送するための仕組み」をはるかに超えるものになっています。新しい機能や使い方が登場すると共に、HTML 言語の設計では決して対処するようにはなっていない新しい課題や問題が発生しました。

W3C は今日のインターネットの問題に対し、XHTML (Extensible Hypertext Markup Language) 2.0 標準で対応しようとしました。しかしこの標準は不評であり、ほとんど置き去りにされています。2004年、W3C が XHTML 2.0 標準の策定に取り組んでいる間に、WHATWG (Web Hypertext Application Technology Working Group) というグループが HTML 5 標準に関する作業を開始し、この標準は XHTML 2.0 標準よりも好意的に受け入れられました。結局 W3C は XHTML 2.0 標準を断念し、現在は WHATWG と協力して HTML5 の開発を行っています。

HTML5 をサポートしているブラウザー

この記事の執筆時点では、HTML5 は正式にはリリースされていません。Web 上のコンテンツの大半はまだ HTML4 仕様で作成されています。ただし、いくつかのブラウザーには HTML5 仕様のサポートが組み込まれています。それぞれのブラウザーは HTML5 の特定機能のみをサポートしている場合があるため、想定どおりの動作にならない場合があります。HTML5 ベースの Web サイトを作成する前に、対象となる各ブラウザーをよく調べ、皆さんのサイトに使用する機能をそのブラウザーがサポートしているかどうかを確認する必要があります。


新しい DOCTYPE

対象となるブラウザーがどのような機能を持っているかにかかわらず、コンテンツの描画に HTML5 仕様を使用するということをブラウザーに伝える必要があります。そのためには DOCTYPE 宣言を使用します。

DOCTYPE 宣言では、DTD (Document Type Definition) を参照することによって、どのバージョンのマークアップ言語でページが作成されているかをブラウザーに伝えます。DTD にはマークアップ言語が使用する規則が規定されているため、ブラウザーによって適切にコンテンツが描画されます。

DOCTYPE は混乱しやすい概念です。現在の HTML 仕様には多くの DOCTYPE があり、それらの間の違いは完全に明確ではありません。表 1 に現在使用可能な DOCTYPE とその機能を示します。

表 1. DOCTYPE と機能
DOCTYPE機能
HTML 4.01 Strictfont タグなどの表示用タグと frameset を使用することはできませんが、それ以外の HTML のすべての要素と属性を使用することができます。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitionalfont タグなどの非推奨とされていた要素を使用することができますが、それ以外は HTML Strict と同じです。frameset を使用することはできません。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Framesetframeset を使用することができる以外は、HTML Transitional と同じです。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strictすべてのコンテンツを整形式の XML として作成する必要がありますが、それ以外は HTML Strict と同じです。例えば、すべての開始タグに対応した終了タグが必要です。frameset を使用することはできません。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitionalすべてのコンテンツを整形式の XML として作成する必要がありますが、それ以外は HTML Transitional と同じです。frameset を使用することはできません。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Framesetframeset を使用することができる以外は、XHTML Transitional と同じです。<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1モジュール (Ruby での東アジア言語のサポートなど) 用の機能を提供していること以外は、XHTML Strict と同じです。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

幸いなことに、HTML5 では DOCTYPE 宣言が大幅に単純化されています。実際、DOCTYPE 宣言は 1 つしかありません。ブラウザーが描画する場合に HTML 5 仕様を使用するようにするためには、リスト 1 に示す DOCTYPE を追加します。

リスト 1. HTML5 の DOCTYPE
<!DOCTYPE html>

DOCTYPE は <html> タグよりも前に、HTML 文書の先頭で宣言する必要があります。


新しい構造要素

新しい構造タグが作成されたのは、タグに含まれるコンテンツのタイプを表すタグを使って、Web ページを複数の論理的な部分に分割できるようにするためです。新しい構造タグの考え方は、Web ページを文書とみなし、文書に含まれているヘッダー、フッター、チャプターといった、文書を論理的な部分に分割するさまざまな規則に Web ページを対応させようとするものです。

このセクションでは一般的なサンプル・コードを使用しながら、HTML 文書を分割するために現在使われている方法を説明します。この記事のこれから先では、元のコードを HTML5 の新しい構造タグを使用して変更し、文書を論理的な部分に変換する方法をステップごとに見ていきます。

HTML 4 の方法

HTML 文書を作成したことがある人ならば、それが最も単純な HTML 文書であったとしても、div タグはおなじみのはずです。div タグは、HTML5 が登場するよりも前の時代では、HTML 文書内にコンテンツ・ブロックを作成するための主要なメカニズムでした。例えばリスト 2 は、ヘッダー、コンテンツ領域、フッターからなる単純なページを div タグを使用して作成する方法を示しています。

リスト 2. div タグを使用した単純な HTML ページ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>
      A Simple HTML Page Using Divs
    </title>
  </head>
  <body>
    <div id='header'>Header</div>
    <div id='content'>Content</div>
    <div id='footer'>Footer</div>
  </body>
</html>

この HTML ページは問題なく動作します。div タグは汎用的で便利なタグです。しかし各 div タグの id 属性を見ない限り、この文書のどのセクションを各 div タグが表現しているのか判断することは困難です。id 属性に適切な名前を指定すれば、それで十分であると言う人もいるかもしれませんが、id 属性は使う人の裁量に任されています。このため、id には同様に有効な id であると見なすことができるさまざまなバリエーションがあります。div タグそのものは、そのタグによって表現されるコンテンツのタイプを示すわけではありません。

HTML5 の方法

HTML5 はこの問題に対処するために、HTML 文書を構成する主なコンテンツ・ブロックを明確に定義する一連のタグを提供しています。Web ページによって表示される最終的なコンテンツがどのようなものであるかによらず、大半の Web ページは一般的なページ・セクションと要素のさまざまな組み合わせによって構成されています。

リスト 2 のコードにより、ヘッダー、コンテンツ領域、フッターからなる単純なページが作成されます。これらのセクションやページ要素、そしてその他のセクションやページ要素は、非常に一般的なものです。そのため HTML5 には文書を一般的なセクションに分割するためのタグがあり、各セクションに含まれるコンテンツが示されるようになっています。そうした新しいタグを以下に挙げます。

この記事のこれから先では、各タグの概要を説明します。また、これらのタグの本来の使い方を学ぶために、リスト 2 に示した div ベースのコード・サンプルを変更し、HTML5 の新しい構造タグを使用するようにします。


名前からもわかるように、header タグは HTML ページの 1 つのセクションをヘッダーとしてマークアップするためのものです。リスト 3 はリスト 2 のコード・サンプルを変更して header タグを使用するようにしたコードの例です。

リスト 3. header タグを追加する
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
<header>Header</header>
    <div id='content'>Content</div>
    <div id='footer'>Footer</div>
  </body>
</html>

リスト 3 では DOCTYPE も変更され、ブラウザーがページを表示する際に HTML5 を使用する必要があることを示しています。これ以降に示すすべての例では、適切な DOCTYPE を使用しているものとします。


section タグ

section タグはページのコンテンツのなかで意味的なまとまりを識別するためのものです。このタグの使い方は 1 冊の本を複数の章に分ける場合といくらか似ています。先ほどのコード・サンプルに section タグを追加した結果をリスト 4 に示します。

リスト 4. section タグを追加する
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
<section>
        <p>
          This is an important section of the page.
        </p>
      </section>
    <div id='footer'>Footer</div>
  </body>
</html>

article タグ

article タグは、Web ページ内のコンテンツの主なセクションを識別することができます。ブログについて考えてみると、ブログではコンテンツの大部分が個々のブログ記事によって構成されています。先ほどのコード・サンプルに article タグを追加した結果をリスト 5 に示します。

リスト 5. article タグを追加する
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
<article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <div id='footer'>Footer</div>
  </body>
</html>

aside タグ

aside タグは、このタグに含まれるコンテンツがページのメイン・コンテンツと関連してはいるものの、そのメイン・コンテンツの一部ではないことを示します。aside タグの使い方は (例えばこのように) 括弧を使ってテキスト本体にコメントを追加する場合といくらか似ています。括弧の中のコンテンツは、その括弧を取り囲む要素に関する追加情報を提供します。先ほどのコード・サンプルに aside タグを追加した結果のコードをリスト 6 に示します。

リスト 6. aside タグを追加する
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
<aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <div id='footer'>Footer</div>
  </body>
</html>

footer タグは、この要素に含まれるコンテンツをその文書のフッターとしてマークアップすることができます。先ほどのコード・サンプルに footer タグを追加した結果のコードをリスト 7 に示します。

リスト 7. footer タグを追加する
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
<footer>Footer</footer>
  </body>
</html>

この段階で、元の div タグはすべて HTML5 の構造タグで置き換えられました。


nav タグに含まれるコンテンツは、ナビゲーションのためのものです。先ほどのコード・サンプルに nav タグを追加した結果のコードをリスト 8 に示します。

リスト 8. nav タグを追加する
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header
<nav>
        <a href='#'>Some Nav Link</a>
        <a href='#'>Some Other Nav Link</a>
        <a href='#'>A Third Nav Link</a>
      </nav>
    </header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <footer>Footer</footer>
  </body>
</html>

最終的なコード・サンプル

リスト 9 は元の div タグを HTML5 の新しい構造タグで置き換えた結果を示しています。

リスト 9. 最終的なコード・サンプル
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header
      <nav>
        <a href='#'>Some Nav Link</a>
        <a href='#'>Some Other Nav Link</a>
        <a href='#'>A Third Nav Link</a>
      </nav>
    </header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <footer>Footer</footer>
  </body>
</html>

このコード・サンプルは、説明用としては単純ですが、リスト 2 に示した div ベースの最初の例とリスト 9 の結果とを比較すると、新しい構造タグの目的は明確に理解できるはずです。


まとめ

HTML5 の新しいタグは、そのタグに含まれるコンテンツのタイプを表しており、文書を論理的なセクションに分割する上で役立ちます。本の著者と同じように、これらの新しいタグをいつ、どこで文書の中に使用するかの判断は、やはり皆さん次第です。2 人の著者が同じ本を執筆する場合、その 2 人はその本を別々の方法で章に分割するかもしれませんが、章を使用するという行為により、一貫した方法で本をセクションに分割することができます。同様に、指定の Web ページを 2 人で作成する場合、2 人は異なる構造を選択するかもしれません。しかし HTML5 の新しい構造タグにより、これまでの div タグでは実現できなかった、Web ページ開発のための新しい規則を提供することができます。

参考文献

学ぶために

  • HTML 5 の新要素」(developerWorks、2007年8月) を読み、HTML5 の構造について学んでください。
  • WHATWG のサイトを訪れ、HTML5 仕様を開発する組織、WHATWG コミュニティーについて調べてみてください。
  • 最初の HTML 仕様を作成し、現在は WHATWG と共に HTML5 仕様を作成している W3C コミュニティーについて調べてみてください。
  • ウィキペディアで HTML5 について学んでください。
  • W3Cのワーキング・ドラフト、「HTML5 における HTML4 からの変更点」を読み、HTML 4 と HTML5 の違いを理解してください。
  • HTML5 First Look」(lynda.com) を読み、HTML5 とは何か (そして HTML5 ではできないこと) について調べてみてください。
  • developerWorks の Web development ゾーンには Web ベースのさまざまなソリューションを網羅した記事が豊富に用意されています。

製品や技術を入手するために

  • 皆さんの目的に最適な方法で IBM 製品を評価してください。製品の試用版をダウンロードする方法、オンラインで製品を試す方法、クラウド環境で製品を使う方法、あるいは SOA Sandbox で数時間を費やし、サービス指向アーキテクチャーの効率的な実装方法を学ぶ方法などがあります。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。プロフィールで選択した情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Open source
ArticleID=682414
ArticleTitle=HTML5 で新たに導入された構造タグ
publish-date=07012011