HTMLの見出しタグの使い方

HTMLでコーディングしていると見出しタグ（h1とかh2とか）をどのように付けようか迷うことがありませんか？
そんなときには文書構造を考えるようにしましょう。

h1タグ

HTML Living Standardではsectionタグ内でh1を使うことが許されています。sectionタグが複数あればh1タグも複数使っても問題なさそうに思えます。
ただMDNには次のようにあります。

1 つのページに複数の<h1>要素を使用することはHTML標準では認められていますが（入れ子でない限り）、これはよい習慣とはみなされません。

やはりページ内にひとつだけh1タグを用いる方が良いと言えます。

h1タグはページの見出し的な要素に付けるようにします。トップページならロゴや社名、LP（ランディングページ）なら一番目立たせたいキャッチコピーなどになるでしょうね。
下層ページなら、そのページのタイトル的な部分がh1になるでしょうか。

h2～h6タグ

先ほどのMDNのページにもありますが、

スクリーンリーダーの利用者にとって一般的なナビゲーション技法として、ページのコンテンツを判断するために、すばやく見出しから見出しへジャンプすることがあります。このため、見出しレベルを飛ばさないようにすることが重要です。

必ず、h1の次にはh2、h2の次には同じレベルのh2か下位のレベルのh3が来る・・・のように文書の階層構造を意識する必要があります。

• h1（タイトル）
  • h2（副見出し）
    • 内容
  • h2（副見出し）
    • h3（小見出し）
      • 内容

のような階層構造を意識しましょう。

また、見出しタグを内容のない部分に付けるのはふさわしくありません。
同じMDNのページには以下のように書かれています。

多くのスクリーンリーダーはページのすべての見出しの順序付きリストを生成し、利用者がコンテンツの階層構造を手早く特定することもできます。

つまり見出しがあるところにスクリーンリーダーはナビゲートします。
見出しタグの直後に何もなければ、ナビゲートされた直後に次の見出しが読まれることになり、利用者は混乱することになります。
（副見出しのすぐ後に小見出しが来ることは文書構造上問題ありません）

HTMLと文書構造

この見出しタグは、HTMLの階層構造とは全く異なる文書構造を作ることにも注意が必要です。

<section>
  <h2>副見出しです</h2>
  <div>
    <div>
      <div>
        <h2>小見出しのつもり</h2>
      </div>
    </div>
  </div>
</section>

このようなHTMLがあっても、二つのh2は同じレベルの見出しになります。
できる限りHTMLの階層構造と見出しレベルを同じにする努力を払ったほうが、コードを見た時に構造が分かりやすいとは思いますけどね。

終わりに

ともすればこういう文書構造は無視されがちです。
でもスクリーンリーダーを使っておられる方からすれば、守ってもらわないとページから必要な情報を得られないことになります。
どんな方にも読んでいただけるようなページを意識してコーディングしたいものですね。