media archive

title要素や見出し要素(h1〜h6)、section要素を本の構成にたとえてわかりやすく解説!

本記事はHTMLの初学者に向けて、Webページのタイトルを表すtitle要素と、HTMLの文書の構成上大切な各見出し要素h1〜h6、そして、セクショニングコンテンツの1つsection要素について、それぞれを本にたとえることで感覚的にわかりやすくして解説しています。

本記事の内容
非表示

まずは本の構成をみてみよう!

HTMLの文書の構成は、一冊の本のように構成するとわかりやすくなります。

これは、Webページも本も、情報をわかりやすく整理して伝えるという点で本質的に同じだからです。

そこでまず本の構成をみてみましょう。本の構成は、

  • 表紙:本の題名や出版社
  • 中表紙:本の題名など
    • 第一章:章のタイトル
      • 第一節:節のタイトル
        • 第一項:項のタイトル
        • 第二項:項のタイトル
      • 第二節:節のタイトル
    • 第二章:章のタイトル
      • 第一節:節のタイトル
        • 第一項:項のタイトル
        • 第二項:項のタイトル
      • 第二節:節のタイトル

のような構成になっています。図に表すと、下図のようなイメージです。

本の表紙と中表紙の例
本の表紙と中表紙
本の章と節の例
本の章と節の例

また、このような

  • 内容が各章に分かれている
  • 各章の中に節がある
  • 節の中に項がある

というような、階層になっている構成のことを階層構造アウトラインといいます。

階層構造(アウトライン)の図
階層構造(アウトライン)の概念図

階層構造やアウトラインというと難しいように聞こえるかもしれませんが、見慣れたものとして、本の目次はその本の階層構造(アウトライン)を表しているといえます。

本の構成をHTMLの文書の構成に置き換えてみよう!

先ほどの本の構成をHTMLに置き換えてみると、

  • 表紙 → <title>:外側(検索結果ページ)から見えるWebページのタイトルやサイト運営者名
  • 中表紙 → <h1>:内側(サイト訪問者)から見えるWebページのタイトル
    • 第一章 → <h2>:大見出し
      • 第一節 → <h3>:中見出し
        • 第一項 → <h4>:小見出し
        • 第二項 → <h4>:小見出し
      • 第二節 → <h3>:中見出し
    • 第二章 → <h2>:大見出し
      • 第一節 → <h3>:中見出し
        • 第一項 → <h4>:小見出し
        • 第二項 → <h4>:小見出し
      • 第二節 → <h3>:中見出し

のように置き換えることができます。

title要素とh1要素は内容が似ていますが、Webサイトの外側から見えるか(検索結果に表示される)、内側から見えるか(サイト訪問時に表示される)という違いがあります。

上記の文書の構成を図に表したのが下図です。わかりやすくするため、各見出しに対する文章を段落で追加しています。

HTMLの文書の構成図

また、実際のコードにすると下記のようになります。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>外側(検索結果ページ)から見えるWebページのタイトルやサイト運営者名</title>
    <meta name="description" content="サイトの説明文です。" />
</head>

<body>
    <h1>内側(サイト訪問者)から見えるWebページのタイトル</h1>
    <p>h1に関する文章です。</p>

    <h2>大見出し</h2>
    <p>h2に関する文章です。</p>

    <h3>中見出し</h3>
    <p>h3に関する文章です。</p>

    <h4>小見出し</h4>
    <p>h4に関する文章です。</p>

    <h2>大見出し</h2>
    <p>h2に関する文章です。</p>

    <h3>中見出し</h3>
    <p>h3に関する文章です。</p>

    <h4>小見出し</h4>
    <p>h4に関する文章です。</p>
</body>
</html>

以上のように、HTMLの文書の構成は、本の構成に置き換えると感覚的にわかりやすいです。

見出し要素(h1〜h6)を使う上での注意点

本の基本的な構成は、見出しがあって、その見出しに対する内容や説明が記載されているという構成になっています。そのため、本の構成を考える上で、見出しは基本となる重要なものになります。

HTMLでも同様に、見出し要素(h1〜h6)はHTMLの文書の構成を考える上で基本となる大事な要素です。

見出し要素にはh1〜h6の6つのレベルがありますが、レベルを飛ばして使わないようにしましょう。具体的には、下記は見出しレベルがh1→h2→h3となっている正しい構成の例ですが、

  • 表紙 → <title>:外側(検索結果ページ)から見えるWebページのタイトルやサイト運営者名
  • 中表紙 → <h1>:内側(サイト訪問者)から見えるWebページのタイトル
    • 第一章 → <h2>:大見出し
      • 第一節 → <h3>:中見出し
      • 第二節 → <h3>:中見出し

下記は見出しレベルがh1→h2→h4となっている誤った構成の例です。

  • 表紙 → <title>:外側(検索結果ページ)から見えるWebページのタイトルやサイト運営者名
  • 中表紙 → <h1>:内側(サイト訪問者)から見えるWebページのタイトル
    • 第一章 → <h2>:大見出し
      • 第一節 → <h4>:中見出し
      • 第二節 → <h4>:中見出し

上記誤った構成の例のように、h2の子要素に、h3を飛ばしてh4が来るのは文書の構成上間違っています。

大見出しがあって中見出し、中見出しがあって小見出し…というように、h1の子要素にすることができる見出しレベルはh2h2の子要素にすることができる見出しレベルはh3…というように、階層構造を意識してレベルの順番を守りましょう。

また、h1は先ほどのたとえだと本の中表紙にあたるものなので、中表紙は本に1つしかないように、h11つのWebページに1つだけ使うようにしましょう。

コラム

h1は複数使ってもいいの?

HTMLの仕様書によると、section要素で明示的に階層構造を作った場合は、それぞれのセクションの見出しレベルをh1から始める階層構造の例が記載されています。

そのため、section要素で明示的に階層構造を作る場合に限り、h1の複数使用は階層構造的に問題ないと解釈できます。

HTMLの仕様書(Living Standard)

セクションについては後述のセクションってなに?の解説をご覧ください。

セクションってなに?

セクションとは、見出しとその見出しに関する情報のまとまりのことです。本でいうと章や節などにあたるものはセクションと言えます。

HTMLでは、本でいう章や節にあたるセクションsection要素でマークアップすることで、より明確にセクションを表すことができます。

先ほどのコードにsection要素を追加すると、下記のようになります。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>外側(検索結果ページ)から見えるWebページのタイトルやサイト運営者名</title>
    <meta name="description" content="サイトの説明文です。" />
</head>

<body>
    <h1>内側(サイト訪問者)から見えるWebページのタイトル</h1>
    <p>h1に関する文章です。</p>

    <section>
        <h2>大見出し</h2>
        <p>h2に関する文章です。</p>

        <section>
            <h3>中見出し</h3>
            <p>h3に関する文章です。</p>

            <section>
                <h4>小見出し</h4>
                <p>h4に関する文章です。</p>
            </section>

        </section>
    </section>

    <section>
        <h2>大見出し</h2>
        <p>h2に関する文章です。</p>

        <section>
            <h3>中見出し</h3>
            <p>h3に関する文章です。</p>

            <section>
                <h4>小見出し</h4>
                <p>h4に関する文章です。</p>
            </section>

        </section>
    </section>

</body>
</html>

h1〜h6の見出しレベルでも暗黙的に階層構造は作れますが、上記のようにsection要素でマークアップすることで、より明示的に階層構造を作れます。

補足

セクショニングコンテンツについて

セクショニングコンテンツには、section要素のほかにも、

  • article要素:自己完結している、独立しているセクションを表す要素
  • aside要素:もしなくてもメインコンテンツに影響を与えない補足的なセクションを表す要素
  • nav要素:ナビゲーションを表す要素

があります。

最後に

HTMLの文書の構成や階層構造というとややこしいように聞こえるかもしれませんが、本に置き換えて考えると、なじみもあり、わかりやすいと思います。

本の目次を作るように階層構造を考え、文書の構成がわかりやすいマークアップをしましょう。

HTML、CSS初学者にオススメの本

Webデザイン初学者にオススメの本

ホームページの制作、Webデザインから、
パンフレットやチラシなど紙媒体の制作、グラフィックデザインまで、
制作のご相談やお見積もりなど、まずはお気軽にお問い合わせください。

お問い合わせはこちら
TOP