HTMLタグ
<h1>

h1, h2, …, h6とは？

セクション内に配置され、そのセクションの「見出し」を記述します。h1, h2, h3, .. などのｈに続く数字は、その見出しの「ランク」を表します。

セクションと見出し

セクションとは、「セクショニングルート要素（body, figure, blockquote, td, fieldset）」か、「セクション要素（article, section, nav, aside, … 他）」によって生成されます。

この中にh1などの「見出し要素」を配置することで、ドキュメントのアウトラインを生成します。見出し要素は、SEO上、重要な意味をもちます。

検索エンジンが「そのドキュメントが何について書かれているのか？」の解釈に大きな影響を与えるからです。また、見出し要素は（多くの場合）ブラウザ上で大きく目立つように表示されますので、そのページの読者がそのページについて理解する事に影響を与えます。

見出し要素は慎重に配置し、またそのテキストもよく考えて決定すべきだと言えるでしょう。

見出しのランクとセクション

先程、セクションの形成について書きましたが、実際は「見出し要素」によっても、セクションが形成されます。

例えば、このようなケースでは

<body>

<h1>H1タグについて</h1>
<p>H1はとても大事なタグです</p>

<h1>私とHTML</h1>
<p>私はHTMLが大好きです。</p>

<h1>CSSとの関係</h1>
<p>CSSにはいつも助けられます。</p>

</body>

<h1>とその直後に<p>タグが続いています。このh1に続くテキストは、h1が形成したセクションの内容だとみなされます。これを「暗黙のセクション」と呼びます。

注意が必要なのは、上記の場合、２番めの「<p>私はHMLTが大好きです。</p>」は、１番めの見出し「<h1>H1タグについて</h1>」についてテキストだとみなされる事はない、という点です。

「見出し要素の後に続いて記述される、別の見出し要素のランクが、直前の見出し要素のランクと等しい（か、それより高い）場合、新しい別の暗黙セクションが形成されるのです。

セクションとアウトライン

見出しのランクとアウトラインの理解には、少し注意が必要です。

例えば、下記により実践的なケースを紹介します。

<body>

  <h1>私の食生活</h1>
  <p>私の１日の食事について紹介します。</p>
  
  <h2>おきまりの朝食</h2>
  
  <h2>昼食は手早く</h2>

  <h3>間食を利用する</h3>

  <blockquote>
    <h1>行きつけのラーメン点</h1>
  </blockquote>
　
  <h2>夜は自炊で</h2>
  <p>近所のスーパーで食材を探します。</p>

  <section>
    <h1>夜におすすめの食材</h1>
    <p>納豆はすごくいいらいいです。</p>
  </section>

  <p>そんなこんなで、私の食生活は健康的です。</p>

</body>

この場合、見出し要素が形成するアウトラインは以下のようになります。

私の食生活
- お決まりの朝食
- 昼食は手早く
  - 間食を利用する
- 夜は自炊で
  - 夜におすすめの食材

覚えておく必要があるのは、sectionのような「セクショニング要素」は必ずその親のセクションに従属するサブセクションとみなされる、という点です。

「<h1>夜におすすめの食材</h1>」は、「<h2>夜は自炊で</h2>」の子供に当たるという事です。（見出し要素のランクが逆なので、混乱しますが、これは仕様上定義されいます。）

また、このsection要素の挿入された時点で、直前の<h2>が生成した暗黙のセクションが終了していますので、最終P要素の<p>そんなこんなで、私の食生活は健康的です。</p>は、冒頭の「<h1>私の食生活</h1>」が生成したセクションに従属していることになります。

見出しのランクは、絶対的な数字ではなく、「暗黙の従属セクション（＝子セクション）を生成したい場合、その親よりも相対的に低いランクを与える」といった理解が良さそうです。

ただし、section要素を使うことで、より明示的に従属セクションを生成できますので、相対的なランクによる暗黙関係でなく、セクショニング要素を利用した明示的なセクション生成が推奨されています。

最後に、セクショニング・ルートである<blockquote>内の要素は、アウトラインから独立します。

行きつけのラーメン店