HTML 5のレイアウト要素 - インターネットコム

はじめに

　HTML 5は興味深い仕様です。この仕様は計画的に生まれたものではありません。W3CはHTML 4.1をHTMLの決定版として表明していました。そのため、HTML 5に対する要望の多くは、主にWeb Hypertext Application Technology Working Group（WHATWG）などのHTMLユーザーコミュニティから出てきました。WHATWGからの圧力が強かったため、数年前にHTML 5のワーキンググループが編成されることになりました。それ以来、HTML 5ワーキンググループは少々ごまかしのある仕様を採用して、それをW3C的な表現で書き直すというプロセスを（そのプロセスに付随する駆け引きとともに）ゆっくり進めてきました。

　2009年4月23日、HTML 5ワーキンググループはこの仕様の最新ドラフトをリリースしました。全体的に見て、このリリースは前回のリリースからかなり単純化されています。とりわけ、初期に提案された仕様変更点の多くが元に戻されていることが目につきます。それらの変更点の役割はほかの場所で定義されています。

　HTML 5は広範な仕様なので、HTML 4との明らかな違いは何十箇所にもおよび、すべてを1回の記事で十分に説明することはできません。この記事ではHTML 5のレイアウト要素に的を絞って説明します。以降の記事では、フォーム関連の変更点（かなり変更あり）、新しいメディア要素、およびDOM関連の変更点について説明する予定です。

全般的な変更点

　HTML 5での最も重要な変更の1つとして、HTMLとXHTMLの両方の形式が仕様の正式な表現として認められているという点があります。これは大きな変更であり、暗に、XHTMLバージョンの構文を完全に認識することがブラウザに求められるということを意味しています（例えば、Internet Explorerは現在そうなっていません）。また、HTMLドキュメントをエンコードするための正式なmimeタイプとしてapplication/xhtml+xmlやapplication/xmlを認識することがすべてのブラウザに求められるという意味でもあります。HTMLドキュメントのDocTypeにもいくつかの改訂がなされています。HTML 4の長いdoctypeは、次のようにはるかに短い<!doctype html>に置き換えられています。

<!doctype html>
<html>
    <head>
          <title>Example Document</title>
    </head>
    <body>
          <h1>Example Document</h1>
          <p>This is an example document
    </body>
</htm>

　これは長年にわたって進められてきたHTMLの「脱SGML化（de-SGMLification）」の現れです。この短縮されたdoctype構造はまだ正式なSGMLですが、かつての重たいSGML装飾は徐々に姿を消し、簡素化されたXMLインターフェースが使われるようになっています。

　HTML 5では、HTMLドキュメント内でもSVGやMathMLが有効な形式として認められています。このようなインスタンスは、HTMLでは名前空間を組み込むために必ずしも必要ではありませんが、XHTMLでは当然必要です。

レイアウト要素の変更点

　HTML 5には、Firefox 3.5に搭載予定のメディア要素のほかに、ページ上に構造または区画を設けるための新しい要素が数多く取り入れられています。

<article>と<section>

　<article>タグは、Webページ上のメインストーリーなどの記事コンテンツを扱うためのコンテナの役割を果たします。同様に、<section>タグは記事をセクションに細分して、そのコンテンツを識別しやすくします。これらの中で使われる見出しタグ（<h1>、<h2>など）は、ヘッダータイトルをはっきり区別して、各セクションの重要度を示す働きをします。

　オリジナルのHTML仕様に見られる2つの大きな失策は、セクションについての正式な格納モデルがないこと（コンテンツを単なる直線的な話の流れと見なし、時々見出しを入れるだけで、セクション内のセクションとしては扱わないこと）と、<title>要素が<head>要素の中でページ自体のタイトルとして早々と予約されてしまうことです。

　このうちの2番目の失策による結果、ジェネリックな<title>要素をセクション、画像、テーブルなどの構造ラベルとして使用することはできなくなりました。それと同時に、ドキュメントのタイトルとそのドキュメントの本文（記事）のタイトルとの間に直接的な1対1関係が成立しなくなりました。現在のところ、これを変更する実質的な方法はありません。<title>がWebのフレームワークにあまりにも緊密に組み込まれているので、その定義を変更することができないのです。

　しかし、<article>および<section>グループを使用すると、HTMLドキュメントはDocBookによく似た形を取るようになります。しかも、こうした格納構造は次のような利点をもたらします。

意味のある目次の自動生成がはるかに容易になる
意味のあるやり方でコンテンツをレイアウトしやすくなる
Webページに後で下位のコンテンツを挿入する作業が効率的になる（ページ全体ではなく記事のみを入れるだけでよい）

<hgroup>

　HTML 5には<hgroup>要素があり、ここに<h1>や<h2>といった下位の要素を含めることができます。これにより、レイアウトに関する厄介な問題が少なくとも1つは好転します。すなわち、意味論的に一貫性のある方法で、ドキュメントの中のいろいろなレベルにサブタイトルを作成できるようになるのです。例えば、次の例を見てください。

<article>
    <hgroup>
         <h1>An Overview of HTML 5</h1>
         <h2>Looking at Spec Changes</h2>
    </hgroup>
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
    <section>
          <hgroup>
               <h1>Tags</h1>
               <h2>Laying out the markup</h2>
         </hgroup>
         <p>This is the subsection P1</p>
         ...
    </section>
</article>

　このマークアップ中のh1タグは、ドキュメントレベルの1タグではなく、そのコンテナ（例えば記事やセクション）の範囲に関連付けられた何物かを表しています。<hgroup>を使用すると、目次の作成も楽になります。HTMLは単なるブラウザ表示以外の目的にも広く使われるようになっているため、このような変更のおかげで、印刷やその他のメディア組織にとっても扱いやすさが向上すると思われます。

<aside>

　<aside>要素はインラインのサイドバーや関連コンテンツを設定するためのものです。雑誌では、短い記事が大きな記事のコンテキストに含まれることがよくあります。例えば、HTML 5のレビューでは、関連タグの概略説明がメイン記事の上や下に浮動ブロックとして表示されることがあります。これをWeb上で実現することは可能ですが、簡単な技術ではないので、CSSの専門家に頼んで、組織の大きなスタイルシートの一部として実装してもらうのが一般的でした。<aside>要素は同じ機能を果たしますが、ブラウザでデフォルトのスタイル設定を設けることが可能になるので、CSSでのサポートの詳細を知らなくても意味的に考えて使用できます。

<nav>

　<nav>要素は<aside>と同じような目的で使われます。大抵のページでは、ナビゲーション要素と主コンテンツとの間に明確な線を引きます。ページ内に1つ以上の<nav>要素を記述することで、ナビゲーション要素とコンテンツとの区別がはっきりします。<aside>と同様、<nav>の役割は外観よりも意味的な部分にあり、<nav>内のコンテンツの目的を明確にします。これにより、CSSがなくても、ブラウザがこのコンテンツをまとまりのあるやり方でレイアウトすることが可能になります。

<header>と<footer>

　<header>要素と<footer>要素はページレベルの補助的な構成要素として使われます。ヘッダーコンテンツはページの最上部に表示され、フッターコンテンツはページの最下部に表示されます。HTMLドキュメントの印刷時には、どちらもページごとに繰り返されることになります。

　通常、ヘッダーコンテンツにはWebサイトのバナーと関連するコンテンツが含まれ、menu要素やnav要素も含まれることがあります。それに対し、<footer>要素は通常はページの最下部に配置され（ただし、記事やセクションの最下部に配置されることもあります）、ここには法的な決まり文句、ページや電子メールへのリンク、関連する連絡コンテンツなどが含まれます。

<menu>

　HTML 5には非常に多くのナビゲーション構造がありますが、その中で<menu>要素は最も重要なものの1つでしょう。抽象的に捉えれば、メニューとはコマンドの連なりです。実際的には、メニューは次の3種類のいずれかに分類される視覚的な構造として実現されます。

コンテキストメニュー－そのページのコンテキストメニューを置き換える形で表示されるメニュー項目です。コンテキストメニュー内のコマンドを使用できるのは、ユーザーがコンテキストメニューシーケンスを開始したとき（一般にはページ上で右クリックまたはoptionキーを押しながらクリックしたとき）だけです。
ツールバー－ツールバーメニューがインスタンス化されると、ツールバーがまだ存在しなければ新たに作成され、そのツールバー上にメニューが構築されます。メニューの順番は定義された順序に従います。
リスト－リスト項目は、単純に<li>タグを使ったリストとして列挙されるか、他の要素を使ってインラインで記述されます。CSSを使ってカスタムメニュー形式を作成するときによく使われます。

　これらのメニューでは、<li>要素を使って個々のエントリを定義し、<command>、<a>、<button>などの関連するコマンド対応要素で実際のアクションを設定します。例えば、ブログの編集を処理するためのコンテキストメニューを作成するのであれば、次のようなものを記述することになるでしょう。

<menu type="context>
     <li><command label="Clear Record" action="this.clear()"/></li>
     <li><command label="Submit Record" action="this.submit('submission-agent')"/></li>
     <hr/> <!-- this creates a break --></hr>
     <li><command label="Search Records" action="this.search('submission-agent')"/></li>
</menu>

　大体想像がつくと思いますが、メニューは非常に複雑になりがちです。しかも、メニューの仕様は他の大部分のナビゲーション要素に比べて十分に確立されているとは言えません。

<dialog>

　HTML 5では、既存のコンテンツをもっと現代的な用途に転用している例がいくつかあります。例えば、今ではほとんど使われていない一群のタグとして、<dl>、<dt>、<dd>があります。これらはもともとディクショナリエントリに使われていたものです（dictionary listing、dictionary term、dictionary definition）。HTML 5では、引き続き<dl>をサポートしていますが、新たに<dialog>タグを導入し、<dt>と<dd>をそれぞれ発言者と発言内容として使用しています。以下、<dialog>の使用例として、アボット＆コステロの古典的な漫才「Who's on First」の一節を示します。

<dialog>
    <dt> Costello</dt>
    <dd> Look, you gotta first baseman?</dd>
    <dt> Abbott</dt> 
    <dd> Certainly.</dd>  
    <dt> Costello</dt>  
    <dd> Who's playing first?</dd>  
    <dt> Abbott</dt>
    <dd> That's right.</dd>
    <dt> Costello</dt>  
    <dd> When you pay off the first baseman every month, who gets the money?</dt>
    <dt> Abbott</dt>  
    <dd> Every dollar of it.</dt>
</dialog>

　結果は次のようになります。

Costello 
    Look, you gotta first baseman? 
Abbott 
    Certainly. 
Costello 
    Who's playing first? 
Abbott 
    That's right. 
Costello 
    When you pay off the first baseman every month, who gets the money? 
Abbott 
    Every dollar of it.

　この書き方の優れた点は、かなり古いブラウザでもおおむね適切に描画されることです。ディクショナリリストと会話の発言は基本構造が非常に似かよっているため、古いブラウザでもほぼ適切に描画されます。

<mark>

　HTML 5では新たなインラインタグもいくつか追加されています。<mark>タグは、引用部分のテキストコンテンツに対して、オリジナルの書き手ではなく、現在の引用者が強調のマーキングを追加する（例えば、段落内の特定の文言を強調する）ために使うものです。例えば、次のような段落を記述した場合、

<p>The economic conditions continue to deteriorate, <mark>even as the 
media focus on "green shoots" showing apparent growth in various sectors</mark> 
(emphasis mine).</p>

　結果は次のようになります。

The economic conditions continue to deteriorate, 
　even as the media focus on "green shoots" showing apparent growth in various sectors (emphasis mine).

　引用部分を強調するだけでなく、取得したWebページやそれに類するコンテンツの中で検索語句をマークするためにmarkを使うこともできます。

<time>

　<time>要素は、特定の日付や時刻や期間を意味的なラベルでラップすることにより、ドキュメントを構文解析して時刻表を作成するようなアプリケーションを構築しやすくします。以下にWeb 2.0 Conferenceの例を示します。

<div class="event">
 <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
  <span class="summary">Web 2.0 Conference</span>:
  <time class="dtstart" datetime="2007-10-05">October 5</time> -
  <time class="dtend" datetime="2007-10-20">19</time>,
  at the <span class="location">Argent Hotel, San Francisco, CA</span>
 </div>

<details>

　<details>要素は<time>よりも役に立つかもしれません。実のところ、この要素はHTMLでよくぶつかるある難問－リンクがアクティブ化されたときにだけ現れるインラインの詳細コンテンツをページに挿入すること－を解決してくれます。ツールチップもこの問題を解決する1つの方法でしたが、大部分のツールチップメカニズム（@alt属性や@title属性）はインラインマークアップに対応していなかったので、使用できるコンテンツはマークアップされないテキストに限定されていました。<details>要素では、この部分が変更されています。<details>要素内に記述した<legend>要素はリンクコンテンツを定義し、そのリンクがクリックまたはロールオーバーによってアクティブ化されると、<details>要素内のマークアップされたテキストがポップアップします。

<p>The conference was most notable for it's coverage of <details>
<legend>HTML 5</legend> The successor to HTML 4 that's intended  
to work with new web technologies such as <i>AJAX</i> and inline 
graphics.</details> as well as other new standards.</p>

　上記のマークアップが描画されると、テキスト内の「HTML 5」の部分が何らかの方法でリンクとして強調表示されます。また、このリンクにユーザーがポインタを合わせると、ポップアップやそれに類するインライン表示が現れ、その中に詳細テキストが表示されます。

<figure>

　<figure>要素はまた別のDocBookライクな機能を提供します。画像はもともとの定義からして、一般的にはHTMLの中で独立したエンティティと見られていました。しかし多くの場合は、画像のラッパーを用意して、キャプションやサブリーダーも表示できるようにした方が好都合です（特にブログではそうです）。この役割を果たすのが<figure>要素です。<figure>要素はコンテナとして機能するだけでなく、図の一覧表を作成することも可能にします（これは<section>要素が目次をサポートするのとよく似ています）。また、<figure>要素にイラストを入れる必要はなくなります（もっとも、これが主な使用事例になるとは思いますが）。<figure>要素はサイドバー（通常は完全に独立した内容を含む）とセクションの中間にあたるものとして使用できます。<legend>要素は図のキャプションを識別するのに役立ちます。

<progress>と<meter>

　<progress>要素と<meter>要素は、どちらもフォームコンポーネントですが、両者の役割には大きな違いがあります。<progress>要素は操作の進行状態（ダウンロード操作が何パーセント完了したかなど）を表すのに使われます。そのため、大抵はプログレスバーとして実装されます。それに対し、<meter>要素はゲージやその他のインジケータなど、ある数値範囲の中の特定の数値を示すのに使われます。

　これらが入力コントロールかどうかを仕様から判断するのは少々難しいのですが、そうでないとすれば奇妙な感じがします。従って、ランキングとして評点を示そうとする場合は、例えば次のように記述します。

<div class="score">Your score was 
    <meter value="88" min="0" max="100" low="64" high="96" optimum="100">B+</meter>
</div>

　ただし、これがどのように表現されるのかは未確定です。<meter>と<progress>のようなものから真価を引き出そうとすると、JavaScriptと組み合わせて使うことが必要になりますが、筆者としてはあまり気乗りがしません。JavaScript中心の要素に移行するのは、純粋に宣言的な意味でのHTML 5の使用という点ではあまり望ましい傾向とは言えませんし、宣言的なアーキテクチャへの親和性が高いXFormsに関するHTML付帯事項の側でも引き続き抵抗があるでしょう。

非推奨の要素

　HTML 5には「非推奨の（deprecated）」要素はあまり多くありませんが、少しは存在します。以下はWebの初期に作られたものであり、一般には、より特殊なコンテンツでもっとうまく処理できます。

<applet>－このタグは、Javaが次の主要なクライアント言語になるだろうという見方が広まったころに現れました。現在では、他のさまざまな技術の発展により時代遅れと見なされています。このタグはHTML 5で非推奨になっており、一般には代わりに<object>または<embed>を使って同じ機能を達成すべきです。
<marquee>－このタグは、初期のブラウザにアニメーション的なアイキャッチをもたらす目的で導入されたもので、div要素内でコンテンツをスクロールするために使われます。このタグの機能は、今ではCSSとJavaScriptを適宜使用することではるかにうまく実現できます。このタグはブラウザ内でアニメーション機能を実現する何百ものAJAXライクな動作の1つにすぎません（しかも広く使われているわけでもありません）。
<acronym>－このタグは、もともと識別用の頭字語をコード化するために作られたものですが、もっと短い<abbr>タグに似すぎていました。代わりに<abbr>タグを使用すべきです。
<dir>－これはもともと静的なコンテンツを想定してディレクトリリストを作成するために使われていたのですが、新しい要素によって時代遅れになりました。代わりに<ul>を使用してください。
<frame>、<frameset>、<noframes>－frameは公式に廃止されています。これはWebデザイナ、SEOの専門家、プログラマ、およびセキュリティの専門家にとって悩みの種となるもので、もはやHTML言語から公式に抹消されています。埋め込まれたコンテンツを使わなければならない場合は、代わりに<iframe>要素を使用してください。フレームに対するニーズの多くは一般にAJAXや関連するローカルクライアント/サーバ対話でも実現できます。
<isindex>－これはHTMLの古代期からの生き残りで、あまりにも古いものなので、どんなものなのか調べないとわからなかったくらいです。<isindex>要素は1行のテキスト入力用コントロールを作成します。代わりに<input type="text">を使用してください。
<basefont>、<big>、<blink>、<center>、<font>、<s>、<spacer>、<strike>、<tt>、<u>－CSSによって、これらのすべてが時代遅れになりました（もちろん、<b>と<i>も時代遅れになりましたが、この2つはデザイン精神の中にしっかり根付いているので、完全に取り除くのは無理でしょう）。一般に、これらが必要な場合は、代わりに<span>と@style属性または@class属性（@classの方が好ましい）を使用してください。

　これらの要素に加え、以下の属性も非推奨になっています。

@name－これは@id属性に置き換えるべきです。従って、#idnameは今では"idname"という値の@nameを持つ要素ではなく、"idname"という値の@idを持つ要素を指します。
@alink、@background、@bgcolor、@link、@text、@vlink－これらはbody要素やそこに含まれているコンテンツの色（@backgroundの場合は背景画像）を制御していました。これらはどれもCSSに同等のものがあるので、そちらを使用すべきです。

　今日ではさまざまな世代のHTMLジェネレータが普及しているため、これらの古い要素が消えるまでにはしばらくかかるでしょう。しかし、いずれにしてもHTML 5が示しているメッセージは明確です。つまり、CSSはHTMLのプレゼンテーションレイヤであり、そのように扱うべきだということです。

ドキュメント言語への道

　HTMLが1991年に初めて登場したとき、この言語は科学ドキュメントのための引用要約を作成するという本来の目的にまったく適ったものでした。3.0および4.0のリリースでは、この本来の目的を置き去りにしてきましたが、現在の開発ではHTMLの一般化に力点を置く傾向があまりに強く（<div>要素と<span>要素しかないと言ってもいいぐらいです）、その結果、ドキュメント構造の基礎を提供する構造がかなり失われつつあります。HTML 5にはAJAX革命への譲歩がかなり含まれていますが、もっと根本的な目標の1つは、この言語を適切なドキュメント言語にすることです。導入されつつある変更によってこの目標がうまく達成されるかどうかはまだ分かりませんが、建設的なスタートであることは間違いありません。

　このシリーズの次回の記事では、HTML 5に関連したフォームコンテンツとデータバインディングモデルについて取り上げ、新しい入力要素や、リストとテーブルのデータバインディング機能、DOMサポートなどについて説明します。