ブロックレベル要素のマークアップ

ブロックレベル要素のマークアップ方法を考察。

はじめに

body要素内に子要素として直接記述できるのはブロックレベル要素だけです(Transitional/Frameset DTDでは制約が緩いので、その限りではないのですが)。そのため、body要素はブロックレベル要素で構成されていると考えることができます。ここではブロックレベル要素を分類し、どのようにマークアップするのが望ましいのかを考えます。

以下では2つのステップでbody要素内のテキストをブロックレベル要素としてマークアップします。すでに完成した普通のテキストにマークアップを施してHTMLにするという形式ですが、実際にHTML文書を書くときは必ずしもそのような形式にこだわる必要はありません。マークアップを施しながら文書を書いても問題はありません。重要なのは、結果として得られるHTML文書が「どのような考えに基づいてマークアップされているか」であって、「どのタイミングでマークアップされたか」ではありません。

Step 1: 文書の骨格をブロックレベル要素としてマークアップ

まず、body要素内のすべてのテキストを、見出し(h1-6)、段落(p, pre, address)、リスト(ul, ol, dl)、テーブル(table)としてマークアップします。もし、上記のいずれにも該当しないテキストがある場合はdiv要素としてマークアップします(フォームのコントロールの場合はfieldset要素を用いることもできます。詳細は後述)。

これらの要素は、普通のテキストを直接含むことができるブロックレベル要素です(厳密に言うとリストやテーブルの場合はli, dt, dd, th, tdといった要素がテキストを直接含むことができます)。ですから、これらの要素は文書本体を構成する最も基本的なブロックレベル要素と見なすことができます。

リストとテーブルは、普通のテキストだけでなくブロックレベル要素も含むことができます。これはより複雑な構造(階層構造を持つリストなど)を表現するためだと考えることができます。

先ほども述べたように、body要素の子要素として直接記述できるのはブロックレベル要素だけです。body要素内に普通のテキストを直接記述することはできません。このStep 1の段階で、body要素内のすべてのテキストが上述のブロックレベル要素に含まれている必要があります。

Step 2: 特殊な意味をもつブロックレベル要素群をグループ化

次に、引用文(blockquote)、フォーム(form)、スクリプト非対応環境向けの記述(noscript)をグループ化します。これらの他にグループ化すべき要素群がある場合は、div要素としてマークアップします(fieldset要素でグループ化することもできます。詳細は後述)。

これらの要素が子要素として直接含むことができるのはブロックレベル要素だけです(div要素は例外)。ですから、これらの要素はある意味をもったブロックレベル要素群をグループ化するための要素と考えることができます。例えば、p要素としてマークアップされたテキストが引用文であるときは、それらをblockquote要素としてグループ化するといった具合です。

フォームのマークアップ

form要素は子要素としてインライン要素を直接含むことができません。これはインライン要素であるコントロール(テキストフィールドやボタンなどのフォームの部品)がStep 1で挙げたブロックレベル要素によって構造化されていることが前提であることを意味しています。例えば、テキストフィールドやボタンは、form要素にでたらめに入っているのではなく、順不同リスト(ul)や定義リスト(dl)のような構造で配置されるということです。

フォームのコントロールをグループ化する要素としてfieldset要素が定義されています。この要素はブロックレベル要素とインライン要素(と普通のテキスト)の両方を子要素として含むことができます。そのため、fieldset要素は、Step 1の要素のように文書の基本構成単位になることも、Step 2の要素のようにブロックレベル要素群をグループ化することもできます。

補足: テーブルレイアウト

やむを得ずテーブルレイアウトを用いる場合は、Step 1, 2の手順でブロックレベル要素をマークアップした後、それらをグループ化する形でテーブル要素を記述すると良いでしょう。こうすることで、テーブル関連のタグが無視された場合でも文書の基本構造が維持されるので、テーブルレイアウトの弊害を抑えることができます。

補足: address要素の位置付け

address要素は、「連絡先」という意味を持つという点で、文書構造を表すh1-6要素(見出し)やp要素(段落)といった要素よりも寧ろblockquote要素(「引用」という意味を持つ)のような「意味を付加する要素」に近いと言えます。ですから、address要素は、Step 1の要素(文書の基本構成単位の要素)というよりは、Step 2の要素(ブロックレベル要素群をグループ化するための要素)と考えた方が自然です。しかし、W3Cの仕様ではaddress要素の子要素としてブロックレベル要素を記述することは認められていないので、Step 1の要素に分類せざるを得ません。

XHTML 2.0の2003年5月6日付けのWorking Draft(草案)では、address要素の内容モデルを改善する必要があるという指摘があります。しかし、最近の草案では、address要素の内容モデルを改善しようという動きは無いようです。また、blockquote要素がテキストを直接含めるようになったり、blockcode要素(code要素のブロックレベル要素版)が追加されたりしています。XHTML2.0では、address要素のような「特殊な意味を持つp要素」を増やそうとしているようです。