HTML 入門
HTML 文書を検証しよう
コンテンツカテゴリを理解する
次のような HTML 文書を準備します．
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>コンテンツカテゴリ</title>
</head>
<body>
<h1>コンテンツカテゴリ</h1>
<p>
段落の本文です。
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</p>
</body>
</html>
ブラウザでは問題なく表示できます．
上のコードを validation でチェックするとエラーが表示されました．このエラーは，16行目の閉じタグ </p> に対応する開始タグ <p> が見つからないというエラーです．開始タグは 9 行目にあるはずですが．．．
16行目の閉じタグを11行目に移動するとエラーがなくなりました．
コンテンツカテゴリ
HTML ではあるタグの中に入れることのできるタグの種類が決まっています．例えば，<p> タグの中に <br> タグを入れることはできるのですが，<ul> タグを入れることはできません．上のエラーはそのルールに違反しているエラーなので，閉じタグ </p> を11行目に移動させることでエラーが表示されなくなりました．
実際のところ，このようなすべてのルールを覚える必要はありません．コンテンツカテゴリを理解すれば，あるタグの中にどのタグを入れてよいかが理解できるようになります．
- 主要コンテンツカテゴリ
- フォーム関連コンテンツカテゴリ
- 固有のコンテンツカテゴリ
上の主要コンテンツカテゴリの中にさらに フローコンテンツ (Flow content) と呼ばれるカテゴリがあります．このフローコンテンツは <body> 要素の中に入ることができるほどんどの要素を含む広いカテゴリです．このフローコンテンツの中にさらに次の5つとメタデータコンテンツ (Metadata content)の一部があります．詳細はここの図を確認してください．
- 区分コンテンツ (Sectioning content)
- 見出しコンテンツ (Heading content)
- 記述コンテンツ (Phrasing content)
- 埋め込みコンテンツ (Embedded content)
- 対話型コンテンツ (Interactive content)
例えば，MDN のサイトで<p> タグ（段落要素）のリファレンスを確認します．このページを確認すると <p> のコンテンツカテゴリは「フローコンテンツ」（および知覚可能コンテンツ）で，許可されている内容は「記述コンテンツ」であることがわかります．
同様に，MDN のサイトで <ul> タグ（順序なしリスト要素）のリファレンスを確認します．このページを確認すると <ul> のコンテンツカテゴリも「フローコンテンツ」であることがわかります．
したがって，「記述コンテンツ」が許可された <p> の中に「フローコンテンツ」である <ul> が入ることはできません．一方で <br>（改行要素） や <img>（画像埋め込み要素） は「記述コンテンツ」であるので，<p> の中に入ることができます．
なお，上のエラーが表示されたときには「16行目の閉じタグ </p> に対応する開始タグ <p> が見つからないというエラーです」と説明しました．この原因を理解するために，MDN のサイトで<p> タグ（段落要素）のリファレンスを確認します．このページの「タグの省略」を確認すると 「<p> 要素の直後に続く要素が <ul> の場合は終了タグを省略することが可能」との記載があります．つまり，次のコードのように9行目の <p> の後，11行目に <ul> が現れたため，その時点で閉じタグ </p> が省略されたものとブラウザが判断します．その後，16行目で閉じタグ </p> 現れたことでエラーとなりました．したがって閉じタグ </p> を省略した下のコードではエラーにはならないはずなので確認してください．
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>コンテンツカテゴリ</title>
</head>
<body>
<h1>コンテンツカテゴリ</h1>
<p>
段落の本文です。
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</body>
</html>
様々なタグがどのコンテンツカテゴリに属しているのか，また，どのコンテンツカテゴリを許可しているかを覚えることは大変です．必要になったときに MDN の HTML 要素リファレンスを参照して問題を解決できるようになっておくと良いでしょう．