【初心者向け】HTML初心者が押さえておくべきコンテンツモデルのポイントについて解説！

HTML
HTML入門

はじめに

HTMLの学習を始めると、さまざまなタグや属性に触れます。これらを一度に全て覚えることは困難であり、よく使用されるタグの使い方や構文を学んでいくことが、効率良く学習するための基本です。

HTML要素を大きく分類すると、ブロック要素とインライン要素の二つに分けられます。「どの要素がブロック要素で、どの要素がインライン要素か」ということを理解することは、適切なマークアップを行うためにとても重要です。また、これを理解しているとCSSの学習でつまづくことが少なくなるため、コーディングのスキルとしても重要なポイントとなります。

ブロック要素とインライン要素の区別ができるようになるにはある程度の経験が必要ですが、コンテンツモデルの基本について学習しておくと理解の助けになります。

コンテンツモデルは、HTML要素がどのように組み合わさってページを構成するかを定義するものであり、簡単に言うと、「要素に含められるものと含められないものを定義する」といったものです。これにより、ブラウザはHTMLを適切に解釈し、ユーザーに正しく表示することができます。

コンテンツモデルはHTML初心者の方にとって難しい概念であり、完璧に理解している人は現役のウェブエンジニアでも多くありません。しかし、コンテンツモデルの基本について理解しておくと、誤ったHTMLの記述や、CSSでスタイリングを行う際の苦労が減るのでオススメです。

この記事では、HTML要素を大きく分類したブロック要素とインライン要素の概要に触れ、HTML初心者の方が押さえておくべきコンテンツモデルのポイントについて解説します。

HTMLの基本構造

コンテンツモデルを理解するには、HTMLの基本構造について理解している必要があります。まずはこれをおさらいしておきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル</title>
</head>
<body>
  <h1>ページの見出し</h1>
  <p>ここに本文が入ります。</p>
  <img src="image.jpg" alt="説明">
</body>
</html>

上記のコードはHTMLのもっとも基本的な記述です。この意味がよくわからないという方は、以下の記事でHTMLの基本構造について解説しているので参考にしてください。

【HTML入門2】タグの書き方とHTMLの基本構造について解説！
この記事では、見出しや段落、画像といったウェブページを構成する要素や、それを表現するためのタグの書き方、HTMLファイルの基本構造といったHTMLを学ぶための最も基本となる知識について解説していきます。
ns-adwork.com

続いて、コンテンツモデルを理解しやすくするために、ブロック要素とインライン要素について簡単に解説します。

ブロック要素とインライン要素

HTML要素は覚えきれないぐらいたくさんありますが、大きく分けてブロック要素とインライン要素の2種類に分類されます。これらの違いを理解することは、文書構造を正しく表現するためだけでなく、CSSでページのレイアウトをスタイリングする際にも非常に重要です。

ブロック要素とは

ブロック要素は、文書の大きな構造を形成する要素です。ブロック要素はウェブブラウザの表示領域内の全幅を占めることが特徴で、何もスタイリングを行わなければ全て縦に並びます。

ブロック要素には文書のアウトラインを表現するための要素や、見出し、段落、リストなどが含まれます。

  • <section>: 一般的なセクション。
  • <h1> – <h6>: 見出し。
  • <ul>: リスト。
  • <li>: リスト項目。
  • <p>: 段落。
  • <div>: 汎用ブロック要素（CSSでのスタイリングなどに使用）

ブロック要素は、一部制限がありますが（ul要素の子要素はli要素でなければならない等）その内部に他のブロック要素やインライン要素を含めることができます。

インライン要素とは

インライン要素は、テキストの一部に意味や機能などを与えるための要素です。これにはボタンや入力フィールドなどが含まれます。主なインライン要素は以下です。

  • <a>: ハイパーリンク。
  • <strong>: 重要なテキスト。
  • <img>: 画像。
  • <input>: 入力フィールド。
  • <span>: 汎用インライン要素（CSSでのスタイリングなどに使用）

インライン要素は、テキストや他のインライン要素と同じ行に表示されます。

<!-- 以下は全て横並びになります。 --->
<a href="#">リンクです。</a>
<storong>重要なテキストです。</strong>
<img src="" alt="srcが空なのでテキストが表示されます。">

画像がインライン要素なのは分かりづらいかもしれません。img要素はalt属性で代替テキストを定義することが必須であり、画像は装飾目的以外であれば「テキストのみでは分かりにくいことを視覚的に表現するためのコンテンツ」なので、画像もテキストの一部と捉えておくと理解しやすいと思います。

インライン要素は子要素に他のインライン要素を含めることはできますが（imgのような閉じタグのないものを除く）、ブロック要素を含めることはできないことに注意が必要です。

ブロック要素とインライン要素の覚え方

HTML初心者の方がブロック要素とインライン要素の区別ができるようになるには、タグを記述する度にブラウザで表示して上記の特長を確認していく必要があります。

そのため、ブロック要素とインライン要素のみに着眼していると学習効率や制作効率が低くなります。また、知らずに間違ったHTML構造になることも考えられるでしょう。ここで重要になってくるのが、コンテンツモデルの理解です。

コンテンツモデルとは

コンテンツモデルでは、HTML要素を7つのカテゴリーに分類しています。

  • メタデータコンテンツ: ウェブページのデータ関連を定義する要素。
  • フローコンテンツ: 大部分のHTML要素が含まれる。
  • セクショニングコンテンツ: 文書のセクショニングを行う要素。
  • ヘディングコンテンツ: 見出し要素。
  • フレージングコンテンツ: テキストやテキストに似た要素。
  • エンベデッドコンテンツ: 画像や動画などの外部ファイル。
  • インタラクティブコンテンツ: ユーザーが操作できる要素。

HTML要素の全ては上記のカテゴリーの中のどれか一つ、または複数に属しています。コンテンツモデルを理解することで、HTMLタグを正しく使い、セマンティックなHTMLを記述することができます。

しかし、コンテンツモデルを完璧にマスターしようと思うと、HTMLを学び始めた方にとっては徒労になる可能性があります。なぜなら、HTMLタグはほとんど使わないものや、推奨されないものも含まれているからです。

HTML初心者が押さえるべきコンテンツモデルのポイント

ここでは、HTMLのコンテンツモデルの中から、HTML初心者の方が知っておくべき重要な4つのポイントについて解説していきます。

  1. セクショニングコンテンツを使用する
  2. ヘディングコンテンツを使用する
  3. セクショニングコンテンツのヘディングコンテンツの関係を理解する
  4. フレージングコンテンツはインライン要素

1．セクショニングコンテンツを使用する

セクショニングコンテンツは、文書を論理的なセクションに分割するための要素です。

「ウェブページは文書」だということは当サイトでも強調してお伝えしていますが、分かりやすい文書には必ず見出しや章立てが必要になります。セクショニングコンテンツには章立てを行うためのタグが含まれており、セクショニングコンテンツに分類される要素は以下の4つです。

  • <section>: 一般的なセクション。
  • <article>: 独立したコンテンツ（ブログ記事など）。
  • <nav>: ナビゲーションメニュー。
  • <aside>: 主要コンテンツとは別の補足情報。

上記の要素は全てブロック要素になります。

<section>
  <h1>セクションの見出し</h1>
  <p>セクションの内容</p>
</section>

ウェブページは、セクショニングコンテンツのタグを使わずにdiv要素のみで構築することもできます。しかし、sectionタグやarticleタグを使用したほうがコードが読みやすくなり、ページの構造が明確になってアクセシビリティやSEO的にも良いです。

種類も少なく使用頻度も多いので、HTML初心者の方でも覚えやすいタグだと思います。セクショニングコンテンツに該当するsectionタグ、articleタグ、navタグ、asideタグは学習必須のものとして押さえておきましょう。

2．ヘディングコンテンツを使用する

ヘディングコンテンツは、見出しを定義するための要素です。ヘディングコンテンツに分類される要素は全てブロック要素です。これらの要素は、ページの階層構造を示し、コンテンツの意味を明確にします。

  • <h1> – <h6>: 見出しレベル（<h1>が最も重要な見出し）。
<h1>ページのメイン見出し</h1>
<h2>サブ見出し</h2>
<h3>さらに小さい見出し</h3>

見出し要素の使い方は難しく感じることはないかもしれませんが、セクショニングコンテンツと密接に関わりがある重要な要素なので、正しい使い方を理解しておく必要があります。

3．セクショニングコンテンツとヘディングコンテンツの関係を理解する

セクショニングコンテンツとヘディングコンテンツは、ウェブページの文書構造に大きく影響を与える要素です。セクショニングコンテンツに該当する要素は、見出しを配置することがHTMLの仕様を策定しているW3C（World Wide Web Consortium）により推奨されています（しかし、デザイン等の都合でnav要素に見出しを配置しているケースはあまりありません）。

ウェブブラウザや検索エンジンがウェブページを解析する際、「アウトライン」というものが形成されます。アウトラインは文書構造そのものを表し、適切なセクショニングコンテンツとヘディングコンテンツの配置を行うことで文書の意味を正しく表現することができます。

誤った見出しの使い方をするとブラウザ等に意図したとおりの意味を伝えることができず、SEO（サーチエンジン最適化）にも悪影響を及ぼすとされています。以下は誤った例です。

<section>
  <h1>メインセクション</h1>
  <p>このセクションの内容。</p>
  <section>
    <h3>サブセクション</h3><!-- 見出しの階層が正しくない -->
    <p>このサブセクションの内容。</p>
  </section>
</section>

見出しタグは見出しレベルを飛ばして使用してはいけません。HTMLを学び始めたばかりの方の中には、見た目の変更を目的としてHTMLの要素を変えてしまう方もいらっしゃいます。このような方法では、上記のような文書構造の崩れたマークアップになる可能性があるため注意が必要です。

HTMLはあくまで文書であり、見た目の変更はCSSでスタイリングを行います。スタイリングのためにHTML要素を追加する必要がある場合は、文書構造に影響しないdivタグやspanタグを使用することが基本です。

見出しとアウトラインについては以下の記事でもご紹介しています。こちらもご参考ください。

【HTML】アウトラインとは？見出しタグの使い方について詳しく解説！
見出しタグがの使い方が適切でないと、検索エンジンにコンテンツの内容を正しく伝えることはできません。この記事では、検索エンジンにコンテンツの内容を正しく理解してもらうための見出しタグの使い方と、見出しタグにとって重要な概念であるアウトラインについて解説します。
ns-adwork.com

4．インライン要素はフレージングコンテンツ

フレージングコンテンツは、テキストやテキストに似たコンテンツを含む要素です。テキストと説明すると少し紛らわしいですが、p要素や見出し要素はフレージングコンテンツには含まれません。

フレージングコンテンツには、後述するインタラクティブコンテンツやエンベデッドコンテンツのほとんどが含まれ、このカテゴリーに分類されるHTML要素はたくさんあります。

例外もありますが、フレージングコンテンツのほとんどはインライン要素です。なので、はじめは「フレージングコンテンツ＝インライン要素」と考えたほうがシンプルで覚えやすいです。以下はフレージングコンテンツに該当する主な要素です。

  • <a>: ハイパーリンク。
  • <em>: 強調表示。
  • <strong>: 重要なテキスト。
  • <span>: 汎用インライン要素。
<p>これは<strong>重要な</strong>テキストです。</p>

フレージングコンテンツは、上記のようにテキストの一部分に意味を付け加える要素や、ボタンのようなテキストに近い意味合いの要素が該当します（ちなみに、p要素はフレージングコンテンツしか含むことができないという制限があります）。

また、フレージングコンテンツは入れ子にすることもできます。

<p>これは <em>強調された <strong>重要な</strong> テキスト</em> です。</p>

フレージングコンテンツのポイントとして、フレージングコンテンツのほとんどはインライン要素なので、ブロック要素を子要素として含めることはできません。しかし、a要素のみ例外としてブロック要素を含めることができます。

<span><div>これは間違いです。</div></span>
<a href="#"><div>これは問題ありません。</div></a>

まとめ

コンテンツモデルにおいて、HTML初心者の方が理解しておくべきポイントについて解説しました。以下の点は押さえておきましょう。

  • <section><article><nav><aside>を使用する。
  • 上記の要素にはできるだけ見出しを付ける。
  • セクショニングコンテンツ・ヘディングコンテンツはブロック要素
  • フレージングコンテンツはインライン要素
  • フレージングコンテンツ（インライン要素）はブロック要素を含められない（a要素は例外）。
  • p要素はフレージングコンテンツしか含められない。

【補足】その他のカテゴリーについて

あまり重要な情報ではありませんが、その他のカテゴリーも気になるという方のために簡単に解説いたします。

メタデータコンテンツ

メタデータコンテンツは、ウェブページのデータを記述するために使用され、ウェブページに表示されない要素です。

メタデータコンテンツに該当する要素は通常、ページの見た目には影響しませんが、ブラウザや検索エンジンにとっては重要です。メタデータコンテンツに含まれる主な要素は以下です。

  • <head>: メタデータコンテンツのルート要素。
  • <title>: ページのタイトルを指定。
  • <meta>: 文字エンコーディングやページの説明などのメタ情報を設定。
  • <link>: 外部リソース（スタイルシートなど）へのリンクを設定。
  • <style>: ページ内にスタイルシートを記述。

メタデータコンテンツは、head要素がルートとなり、それ以外のメタデータコンテンツはhead要素直下の子要素として配置されます。

<head>
  <!-- head要素以外は全てhead要素の直下に配置する -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル</title>
</head>

フローコンテンツ

フローコンテンツには、ウェブページに表示されるHTML要素が該当します。よって、ほとんどのHTML要素はフローコンテンツに分類されるため、HTMLでマークアップをする際にフローコンテンツであることを意識する必要はありません。

<p>これはフローコンテンツです。</p>
<div>これもフローコンテンツです。</div>
<span>これもフローコンテンツです。</span>

エンベデッドコンテンツ

エンベデッドコンテンツは、外部ファイルなどをHTMLに埋め込むための要素です。これには、画像、音声、動画などが含まれます。

  • <img>: 画像。
  • <audio>: 音声ファイル。
  • <video>: 動画ファイル。
  • <iframe>: 別のHTMLページを埋め込む。
<img src="image.jpg" alt="説明">
<video src="video.mp4" controls></video>

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

インタラクティブコンテンツは、ユーザーが操作できる要素です。これには、リンク、ボタン、フォーム要素などが含まれます。

  • <a>: ハイパーリンク。
  • <button>: ボタン。
  • <input>: フォーム入力フィールド。
  • <select>: ドロップダウンリスト。
<a href="https://example.com">リンク</a>
<button>クリック</button>
<input type="text" placeholder="テキストを入力">

最後に

この記事では、HTML要素を大きく分類したブロック要素とインライン要素の概要に触れ、HTML初心者の方が押さえておくべきコンテンツモデルのポイントについて解説しました。

HTMLは閲覧者に情報を伝えるための文書としての役割を持ちます。これは章や節や項、見出し、段落といった要素で構成される論文や書籍などと変わりません。

HTMLには章や見出しなどを表現するためのタグがあり、文書として適切なアウトラインやHTML構造を制御するためにコンテンツモデルなどのルールがあります。誤ったHTMLの構造は、表示が崩れるだけでなく検索エンジンがそのページの構造を正しく理解できなくなる可能性があるため注意しましょう。

この記事の内容が、HTMLを学び始めた方にとってのお役に立てば幸いです。

タイトルとURLをコピーしました