ブログについて
HTML5でのタグの入れ子のルール
2023.11.23
制作
こんにちは、制作部の矢野です。
HTML5にはたくさんのタグが存在します。タグとは「文字（テキスト）に意味を与えてあげる印のようなもの」です。 また、文字列などをタグで囲んだ情報の単位のことを「要素」といいます。
タグ：<div>テキスト</div>の太字の部分
要素：<div>テキスト</div>のタグとテキスト含めた全体部分
そのタグをさらにタグで囲う構造のことを入れ子といいます。
入れ子にはルールがあり、自由にタグを囲えるわけではありません。
そこで今回の制作ブログでは、HTML5でのタグの入れ子のルールについてご紹介します。
入れ子の親要素・子要素
まずは、HTMLでの入れ子の要素について理解しましょう。要素とは文字列などをタグで囲んだ情報の単位のことを指します。
HTMLの入れ子には親要素と子要素という関係性があります。以下の例をご覧ください。
囲っている側を親要素、囲われている側を子要素と呼びます。例ではdivタグがh1タグを囲っています。したがってdivタグが親要素、h1タグが子要素となります。
また、HTMLは入れ子を多重構造にすることができます。多重構造について理解するために親＋子と書かれたulタグに注目してください。
h1タグはdivタグの子要素だけであるのに対して、ulタグはdivタグの子要素であるとともにliタグの親要素でもあります。このようにhtmlでは無制限に入れ子構造をつくっていくことができ、これを入れ子の多重構造といいます。
しかし、冒頭でも触れた通り自由にタグを囲えるわけではありません。入れ子のルールを理解することで正しくタグを扱えるようになります。それでは、入れ子のルールについて確認していきましょう。
入れ子のルールはコンテンツモデルで決まる
HTML5からはブロック要素とインライン要素という概念が廃止されました。その代わりにカテゴリーとコンテンツモデルという概念が新しく追加されました。この2つの概念を理解することが非常に重要です。それでは、カテゴリーとコンテンツモデルについて確認していきましょう。
カテゴリー
HTML5ではすべてのタグが、以下の7種のカテゴリーのいずれかに属しています。
- フローコンテンツ（div、p、table、ul、ol など）
body内で使用されている要素は基本的にフローコンテンツ - セクショニングコンテンツ（article、aside、nav、section）
文章の区分や節などの、区切りを表すコンテンツ - ヘッディングコンテンツ（h1、h2、h3、h4、h5 など）
見出しを表すコンテンツ - フレージングコンテンツ（a、img、select、strong、label など）
文章内で使用するコンテンツ - エンベディッドコンテンツ（iframe、img、video など）
画像や動画、音声など、文書内に外部のリソース埋め込みを行うコンテンツ - インタラクティブコンテンツ（a、button、iframe、img、input など）
リンクやフォームなど、ユーザーが操作することできるコンテンツ - メタデータコンテンツ（base、link、meta、noscript、script など）
タイトルやメタデータなどの文書情報等を表すコンテンツ
また、<head>要素内で使用できる要素であり、cssやスクリプトの指定もできる。
それぞれのカテゴリーが重なっているのは複数のカテゴリーに所属している要素もあるためです。
コンテンツモデル
コンテンツモデルは、ある要素がどの要素を内容として持つことができるか、つまり子要素とできるかというルールを表します。例えば、コンテンツモデルが「フローコンテンツ」のaside要素は、フローコンテンツに属するp要素などを内容として持てます。しかし、フローコンテンツに属していないlink要素などのメタデータコンテンツを内容として持つことはできません。
タグの入れ子ルール
ここまで、コンテンツモデルとカテゴリーについて確認しました。ここからはタグの入れ子ルールを、よく使うタグを厳選して一覧で紹介していきます。
フレージングコンテンツを子要素として入れ子に含む
h1〜h6タグ：見出し
ユーザーや検索エンジンにページの重要なテーマを伝えるために、HTMLでマークアップする見出しタグ（h1/h2/h3/h4/h5/h6）のことです。h1〜h6タグはフレージングコンテンツを子要素として入れ子に含むことができます。
spanタグ：構造・レイアウト
spanタグはフレージングコンテンツを子要素として入れ子に含むことができます。<span>～</span>で囲った部分をインライン要素としてグループ化することができるタグです。
p / preタグ：段落
pタグとは、段落を意味するhtmlのタグのことで、<p>～</p>で囲まれた範囲がその段落として表示されます。pタグもhタグ同様、フレージングコンテンツを子要素として入れ子に含むことができます。
strong / emタグ：強調
strongタグとは、 内容の重要性、重大性、または緊急性が高いテキストを示すためのHTMLタグのことです。strognタグはpタグ同様、フレージングコンテンツを子要素として入れ子に含むことができます。
| 入れられるタグ |
|---|
| a / audio / b / br / button / canvas / cite / code / data / em / i / iframe / img / input / label /picture / select / small / span / strong / svg / textarea / time / video |
フローコンテンツを子要素として入れ子に含む
divタグ：構造・レイアウト
divタグはフローコンテンツの要素を含むことができるのでほぼすべての要素を入れ子に含むことができます。<div>で囲った部分をブロックレベル要素としてグループ化することができるタグです。
liタグ：リスト定義（子要素）
liはdiv同様フローコンテンツを入れ子のタグとして含めることができる万能タグです。
th / tdタグ：見出しセル/データセル
<th> は、見出しセルを表します。列や行のタイトルのようなイメージです。<td> は、それ以外のセル（データが入るセル）に使います。thとtdはフローコンテンツを含めることができます。
| 入れられるタグ |
|---|
| a / article / aside / audio / b / blockquote / br / button / canvas / cite / code / div / dl / em / figure / footer / form / h1 / h2 / h3 / h4 / h5 / h6 / header / hgroup / hr / i / iframe / img / input / label / main / nav / ol / p / picture / pre / script / section / select / small / span / strong / svg / table / template / textarea / time / ul / video |
その他
ul / olタグ：リスト定義
ulタグは順序のないリストを表示する際に使用します。olタグは順序のある番号付きのリストを表示する際に使用します。
ulもolも直下の子要素には、基本liのみしか入れられません。
tableタグ：表の定義
表を定義するtableですが、直下に置いてよいのは以下のタグだけです。
aタグ：リンク
aは少し特殊なコンテンツモデルを持っています。それは直近の親要素タグのコンテンツモデルを引き継ぐということです。実際にどのようなケースがあるのか確認していきましょう。
aタグでhやdivを入れ子にできる場合
aタグの親要素はdivタグです。
この場合aタグはdivタグのフローコンテンツを入れ子にできるというコンテンツモデルを引き継ぐので、ほとんどのタグを入れ子にすることができます。
aタグでhやdivを入れ子にできない場合
aタグの親要素はpタグです。pタグはフレージングコンテンツしか含むことができません。この場合aタグはpタグのフレージングコンテンツを引き継ぎます。したがってaタグはフレージングコンテンツでないh1タグを入れ子にすることができません。
このように親要素タグのコンテンツモデルがなにかによって、aタグの中にpタグ、aタグの中にaタグ、aタグの中にdivタグを入れることが可能になります。
| タグ | 意味 | 入れられるタグ |
|---|---|---|
| ul | 番号のない箇条書きリスト | li / template / script |
| ol | 番号付き箇条書きリスト | li / template / script |
| table | 表を表すタグ。表全体を囲む tableの中にdivやtableの中にulを含みたい場合はthもしくはtdの入れ子タグにする |
tbody / thead / tfoot /caption / colgroup |
| a | リンクを張る リンク先はhref属性で指定 transparent（トランスペアレント）といって親要素のタグのコンテンツモデルを引き継ぐ（透過的と呼ぶ） |
nav / section / header / aside / h1 / h2 / h3 / h4 / h5 / h6 / footer / address / p / hr / pre / blockquote / ol / ul / dl / figure / div / a / em / strong / small / s / cite / q / dfn / abbr / data / time / code / var / samp / kbd / sub / sup / i b / u / mark / ruby / bdi / bdo / span / br / wbr / ins / del / picture / img / object / video / audio / map / area / math / svg / table / form / input / datalist / output / progress / meter / fieldset / detailes / dialog / script / noscript / template / canvas / テキスト |
まとめ
今回の記事では、HTML5でのタグの入れ子のルールについてご紹介しました。
HTML5には膨大な量のタグがあり、全て覚えきるというのは難しいと思います。今回紹介したカテゴリーとコンテンツモデルの概念を理解できれば、タグを入れてよいか迷ったときに簡単に自分で調べることができるようになります。HTML5を扱う上で、少しでもお役に立てれば幸いです。最後までお読みいただきありがとうございました。