この記事では、HTMLの「コンテンツモデル」について、HTML初心者の方でも分かりやすく説明します。

コンテンツモデルは、Webページを作る際のコンテンツ配置のルールです。これを理解することは、Webサイトを使いやすくし、検索エンジンがWebページを正しく理解する手助けをします。

この記事では、まずコンテンツモデルの基本を解説し、HTMLコーディングの役立つコンテンツの種類を詳しく解説します。また、具体的な例を使い実践でも役立てる内容を解説します。そして、最後にコンテンツモデルを守るために必要な使えるツールも紹介します。

コンテンツモデルとは？

コンテンツモデルは、HTML要素がWebページ内でどのように機能し、どの種類の子要素を含むかを定める、Web開発の基本的なルールです。

コンテンツモデルを理解し適切に使用することで、以下のメリットが得られます。また、コンテンツモデルを解説する上で、必要不可欠なコンテンツカテゴリーについても説明します。

コンテンツモデルを理解することで得られるメリット

コンテンツカテゴリー

コンテンツカテゴリーは、HTML要素がどのグループに属し、それらがWebページ内でどのように使用されるかを示すHTMLの概念です。

以下は主要なカテゴリーを表す図です。HTML初心者の方は、コンテンツカテゴリーと呼ばれるこれらのカテゴリーが存在し、多くのHTMLタグがその中のどれかに属していることを理解することが重要です。

メタデータコンテンツ

メタデータコンテンツ(Metadata Content)とは、Webページの背景情報や設定を提供するコンテンツカテゴリーです。

メタデータコンテンツ

フローコンテンツ

フローコンテンツ(Flow Content)とは、Webページの中で広く使われるもので、文章の段落、画像、リンク、リストなど、ページのほとんどの部分を形成するコンテンツカテゴリーです。

フローコンテンツ

セクショニングコンテンツ

セクショニングコンテンツ(Sectioning Content)は、ページの構造を整え、内容をわかりやすくするために使われるコンテンツカテゴリーです。

セクショニングコンテンツ

ヘディングコンテンツ

ヘディングコンテンツ(Heading Content)は、Webページの見出しやタイトルを示すために重要な役割を果たすコンテンツカテゴリーです。

ヘディングコンテンツ

フレージングコンテンツ

フレージングコンテンツ（Phrasing Content）は、Webページ内のテキストやインライン要素を表すために使用されるコンテンツカテゴリーです。

フレージングコンテンツ

エンベディッドコンテンツ

エンベディッドコンテンツ（Embedded Content）は、Webページに外部のメディアやコンテンツを埋め込むために使用されるコンテンツカテゴリーです。

エンベディッドコンテンツ

インタラクティブコンテンツ

インタラクティブコンテンツ(Interactive Content)は、ユーザーが操作可能なコンテンツカテゴリーです。

インタラクティブコンテンツ

その他のコンテンツカテゴリー

その他コンテンツカテゴリーでは、パルパブルコンテンツ、フォーム関連コンテンツ、透過的コンテンツモデル、スクリプト対応要素についても解説します。

パルパブルコンテンツ

パルパブルコンテンツ (palpable)は、HTMLにおいて意味のある内容をユーザーに提供する要素を指します。空の要素や、意味的に関連性のない要素（たとえばスタイルのみを目的としたdivやspan）は、パルパブルコンテンツには含まれません。このカテゴリーには、テキスト、画像、リンク、リストなど、ページ上でユーザーが直接操作できる、意味のある情報が含まれています。

フォーム関連コンテンツ

フォーム関連コンテンツは、基本的にインタラクティブコンテンツに含まれ、HTMLにおいてユーザーが情報を入力、送信するために使用される要素のグループです。

透過的コンテンツモデル

透過的コンテンツモデルは、特定のHTML要素がその親要素のコンテンツモデルに応じて異なるタイプの子要素を持つことを許可する概念です。これにより、たとえば aタグの中にブロック要素やインライン要素を含むなど、柔軟なマークアップが可能になります。

スクリプト対応要素

スクリプト対応要素(Script-supporting elements)は、JavaScriptなどのスクリプトと相互作用することが可能なHTML要素を指します。これらの要素は、Webページの動的な挙動やインタラクティブな機能を提供するために使用されます。

コンテンツモデルの実例

以下ではよく使われるコンテンツモデルの実例を解説します。

h1〜h6タグ(見出し)

<h1>これは見出しレベル1です</h1>

<h1> から <h6> までの見出しタグ（<h1> が最も高いレベルの見出しで、<h6> が最も低いレベルの見出し）は、コンテンツモデルがフレージングコンテンツであり、通常、テキストやフレージングコンテンツ(インライン要素）などを含むことができます。

h1〜h6タグ

divタグ(構造・レイアウト)

<div>
  <h1>これは見出しです</h1>
  <p>これは段落のテキストです。段落は通常、文章を記述するのに使用されます。</p>
  <ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
  </ul>
  <img src="example.jpg" alt="画像の説明">
  <a href="https://www.example.com">これはリンクです</a>
</div>

コンテンツモデルが柔軟であるため、さまざまな種類の要素を含むことができますが、このタグ自体に意味を持つわけではありません。divタグは、フローコンテンツを含むことができます。

divタグ

pタグ(段落)

<p>これは段落です。段落はテキストコンテンツを包むために使用されます。</p>

pタグは、テキストやフレージングコンテンツ(インライン要素）などを含むことができます。

pタグ

spanタグ(構造・レイアウト)

<p>この文章は <span style="color: blue;">青い</span> 色のテキストが含まれています。</p>

spanタグは、インライン要素であり、通常はテキストやフレージングコンテンツ(インライン要素）などを含むことができます。

ulタグ(リスト)

<ul>
  <li>リスト項目 1</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
</ul>

ulタグは、基本的にliタグを入れ子にします。liタグは、フローコンテンツを含むことができます。

sectionタグ(セクション)

<section>
  <h1>セクションタイトル</h1>
  <p>このセクションに関するテキストコンテンツです。</p>
</section>

sectionタグの中には、通常はh1からh6までの見出し要素を含む必要があります。

dlタグ(説明リスト)

<dl>
  <dt>HTML</dt>
  <dd>ハイパーテキストマークアップ言語</dd>
  
  <dt>CSS</dt>
  <dd>カスケーディングスタイルシート</dd>
  
  <dt>JavaScript</dt>
  <dd>Webページを操作するスクリプト言語</dd>
</dl>

dlタグの中には、dtタグ、ddタグを含むことができます。

• dtタグは、用語または言葉を表し、基本的に太字で表示されます。
• ddタグは、対応する用語の定義や説明を表し、通常は普通のテキストで表示されます。

tableタグ(表形式データ)

See the Pen Untitled by YOCHITECH (@YOCHITECH) on CodePen.

tableタグ…テーブル全体を定義します。
├ captionタグ(省略可能) … テーブルのキャプション（タイトル）を指定します。
└theadタグ(省略可能) … テーブルの見出し行をグループ化します。
　└ trタグ … 表の見出し行を定義します。
　　└ thタグ … 表のヘッダーセル（見出しセル）を定義します。
└ tbodyタグ(省略可能) … テーブルの本文部分をグループ化します。
　└ trタグ … 表のデータ行を定義します。
　　└ tdタグ … 表のデータセルを定義します。
└ tfoot(省略可能) … テーブルのフッター行をグループ化します。
　└ trタグ … 表のフッターセル（合計など）を定義します。
　　└ tdタグ … 表のフッターセルを定義します。

<table>
  <tr>
    <th>見出しセル</th>
    <td>データセル</td>
  </tr>
</table>

上記は、最低限必要なタグのみに絞ったコードです。tableタグの中には、trタグを含むことができ、trタグの中には、thタグ、tdタグを含むことができます。

• thタグは、表の見出しセルを定義するためのタグです。通常は太字で中央揃えで表示されます。基本的にフローコンテンツを含むことができますが、ヘッダー、フッター、セクショニングコンテンツ、ヘッディングコンテンツを含むことはできません。
• tdタグは、表のデータセルを定義するためのタグです。フローコンテンツを含むことができます。

formタグ(データ収集)

<form action="/submit" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name" required><br>

  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" required><br>

  <input type="submit" value="送信">
</form>

formタグはユーザーからのデータ入力を受け取るためのフォームを作成します。フォーム内にはテキストボックス、ラジオボタン、チェックボックスなどのフォーム要素が含まれます。

aタグ(ハイパーリンク)

<div>
  <!-- divタグが親要素 -->
  <a href="https://example.com">
    <!-- aタグ内にブロック要素としてpタグを含める -->
    <p>このパラグラフはリンクです。</p>
  </a>
</div>

aタグは「透過的コンテンツモデル」を採用しており、これはそのコンテンツモデルが親要素に依存することを意味します。具体的には、aタグはその親要素のコンテンツカテゴリーによって入れ子にできる要素が決まります。

W3C Markup Validator

W3C Markup Validatorは、HTML文書がW3Cの標準に準拠しているかを検証するツールです。コンテンツモデルのチェックにも使用することができます。使用方法については以下のページで解説していますので、よかったらご覧ください。

W3C Markup Validator

まとめ

コンテンツモデルを適切に理解し、W3C Markup Validatorを定期的に使用することにより、技術的正確性とWebアクセシビリティが向上し、結果としてエンドユーザーにとって使いやすいWebサイトやアプリケーションを提供できます。