取り上げた要素タイプの一覧

簡単で正確なHTMLのシリーズで取り上げている(もしくは予定の)要素タイプを列挙しておきます。全体像の把握に、また索引としてご利用ください。

要素タイプインデックス

「簡単で正確なHTML」はXHTML1.0/HTML 4.01の要素タイプ(要素型)全てを取り上げているわけではありませんが、文書の構造をきちんと記述して分かりやすいオンラインドキュメントを公開するためには十分な範囲をカバーしています。

以下は、それらの要素タイプをHTML 4.01の仕様書での区分(章)に従って、そこでの登場順に表にしたものです。本シリーズの区分とは異なっています。

*仕様書の1〜6章は全体定義などに当てられ、個別の要素タイプ解説は7章から始まります。第8章は使用言語に関する情報(国際化)についてです。

簡単で正確なHTMLで取り上げている要素タイプ
仕様書の章 要素型名 要素の役割 親要素 子要素(内容)
7. 全体の構造 html HTML文書全体を包含する (ルート) head, body
head 文書自身に関する情報 html title, meta, linkなど
title 文書の表題 head 文字列
meta 文書に関する特別な情報 head
body 文書の本文 html Block
div ブロックレベル要素のグループ化 Blockコンテナ Block
span フレーズのグループ化 Inlineコンテナ Inline
h1-h6 見出し Blockコンテナ Inline
address 作者に関する情報 Blockコンテナ Inline
9. テキスト em 強調 Inlineコンテナ Inline
strong さらに強調 Inlineコンテナ Inline
dfn 定義語 Inlineコンテナ Inline
cite 引用元(出典) Inlineコンテナ Inline
abbr 省略語 Inlineコンテナ Inline
acronym 頭字語 Inlineコンテナ Inline
blockquote ひとかたまりの引用 Blockコンテナ Block
q 文中での引用 Inlineコンテナ Inline
sub 下付文字 Inlineコンテナ Inline
sup 上付文字 Inlineコンテナ Inline
p 段落 Blockコンテナ Inline
br 改行 Inlineコンテナ
pre 整形済みテキスト Blockコンテナ インライン
ins 追加テキスト body以下の任意 親に準ずる
del 削除テキスト body以下の任意 親に準ずる
10. リスト ul 箇条書きリスト Blockコンテナ li
ol 番号付きリスト Blockコンテナ li
li リストの項目 ol,ul 任意
dl 定義型リスト Blockコンテナ dt,dd
dt 定義される用語 dl Inline
dd 定義内容 dl 任意
11. テーブル table テーブル Blockコンテナ Table内容
caption テーブルの表題 table Inline
thead テーブルヘッダ table tr
tbody テーブル本体 table tr
tfoot テーブルフッタ table tr
colgroup 列のグループ table col
col 列についての情報 table, colgroup
tr テーブルの行 Tableコンテナ th, td
td テーブルのセル tr 任意
th 見出しとなるセル tr 任意
12. リンク a 本文中でのリンクのアンカー Inlineコンテナ Inline
link 文書自身と関連リソースのリンク head
13. オブジェクト img インライン画像 Inlineコンテナ
14. スタイル style スタイルシート head スタイル定義
15. レイアウト hr 横罫線 Blockコンテナ
17. フォーム form フォーム本体 Blockコンテナ form以外の任意
input 入力コントロール Inlineコンテナ
select 選択メニュー Inlineコンテナ option,optgroup
option 選択肢 select 文字列
textarea テキストエリア Inlineコンテナ 文字列
label コントロールのラベル Inlineコンテナ label以外のInline
fieldset コントロールのグループ化 Blockコンテナ legend,任意
legend グループのラベル fieldset Inline
optgroup メニューのグループ化 select option

*link要素は「少し詳しいHTMLの説明」シリーズで紹介

親要素と子要素

基本要素の章で説明したように、HTMLの要素は親子関係を持ち、それぞれ親になれるもの、子になれるものが定められています。ここでは、厳密なDTDの定義ではなく、実際にタグを書いていく上で理解しやすいようにアレンジして親子関係を整理してみました(ここで使っているBlock, InlineはDTDの%block;、%inline; と正確には一致しません)。詳しくは以下の注意点を参照してください。

  1. 親要素、子要素の欄で具体的な要素名が記述されているのは、その要素タイプのみが親子となります。
  2. 親が「Blockコンテナ」となっているものは、ブロックレベル要素のグループに属し、子要素が「Block」もしくは「任意」となっている要素の内容になります。一般にはbodyもしくはdiv要素の内容として考えておくとよいと思います。
  3. 親が「Inlineコンテナ」となっているものは、インライン要素のグループに属し、子要素が「Inline」となっている要素の内部で使うのが原則ですが、そのほか「任意」の要素の内容になることができます。
  4. 子要素欄に「Block」とあるものは、原則としてブロックレベル要素に属する要素を内容としますが、インライン要素や文字列を持ってくることもできます。
  5. 子要素欄に「Inline」とあるものは、インライン要素に属する要素と文字列を内容とすることができます。
    • pre要素の場合、img, sup, subなどの文字幅を変える可能性のある要素は除外されます。
  6. 「任意」は、ブロックレベル要素、インライン要素および文字列を指します。head要素とその子要素は含みません。
  7. Tableコンテナ」は、thead, tbody, tfootを指しています。ただし、tbodyが略されていると見なして、trを直接tableの子要素とすることもできます。「Table内容」はTableコンテナ+caption, colgroup, colを指します。
  8. ins/del要素はbody内の任意の位置に記述でき、内容モデルも「任意」ですが、親要素がインライン要素の場合は、内容もインライン要素に限ります。

HTML 4で定義されている要素タイプ全体の親子関係は、HTML 4のDTDの木構造を参照してください。また、XHTMLのモジュールとそこで定義される要素タイプに関しては、XHTML抽象モジュールの簡易定義(早わかり)を参照してください。