Hタグ(見出しタグ)とHTML5 アウトライン

最終更新日:2020年12月14日公開日:2020年12月14日 2020年12月

本記事は
HTML Standard
のサイトの説明に基づいている．

アウトラインとは，「概要，あらまし，輪郭」などと辞書にあるが，まさにその通りで見出し(heading content)ごとに文章をグループ(sectioning content セクショニングコンテンツというらしい)に分けて分かりやすくしたものとでもいえようか．

各セクショニングコンテンツにはヘッディングコンテンツを持つ可能性があると書かれている．

簡単にいうと，section 要素(sectionタグで囲まれた部分)には h要素(見出しタグ)が必要だということらしい．

1. 見出しタグ・Hタグについて
2. 実際の使用例
3. HTML5 Outliner
- 3.1. HTML5 Outline 拡張機能で確認
- 3.2. HTML5 Outline サイトで確認
4. Hタグ(見出しタグ)とHTML5 アウトラインに関するFAQ

見出しタグ・Hタグについて

見出しタグのことについてよく聞かれるので改めてまとめてみる．

すなわち，

h1 は一つのページに一つ？二つ以上あってはダメなの？
h1 は必ず一つのページに一つなくてはいけない？
h2 から始まってはいけないのか？

のような質問だ．

実際の使用例

「百聞は一見に如かず」というが，見たほうが早い．
以下の3つはアウトラインに関する限り意味的に同等だということ．

分かりやすいので上のサイトからそのまま引用させてもらった．

これは従来のスタイル．

<body>
  <h1>Let's call it a draw(ing surface)</h1>
  <h2>Diving in</h2>
  <h2>Simple shapes</h2>
  <h2>Canvas coordinates</h2>
  <h3>Canvas coordinates diagram</h3>
  <h2>Paths</h2>
</body>

HTML5 のアウトラインでは h1 だけでも同等の意味のコーディングが出来る．

<body>
  <h1>Let's call it a draw(ing surface)</h1>
  <section>
    <h1>Diving in</h1>
  </section>
  <section>
    <h1>Simple shapes</h1>
  </section>
  <section>
    <h1>Canvas coordinates</h1>
    <section>
      <h1>Canvas coordinates diagram</h1>
    </section>
  </section>
  <section>
    <h1>Paths</h1>
  </section>
</body>

従来の見出しのつけ方を維持しつつ，HTML5 のアウトラインで書くとこうなる．

<body>
  <h1>Let's call it a draw(ing surface)</h1>
  <section>
    <h2>Diving in</h2>
  </section>
  <section>
    <h2>Simple shapes</h2>
  </section>
  <section>
    <h2>Canvas coordinates</h2>
    <section>
      <h3>Canvas coordinates diagram</h3>
    </section>
  </section>
  <section>
    <h2>Paths</h2>
  </section>
</body>

見出しをつけるとその部分がひと塊(セクション)となるが，<section> タグを使うとそれが明示的にどの範囲になるかがわかるようになる．

上記ページの内容を考慮した上で先の質問に対する回答としては

h1 は一つのページに何個あっても良い
h1 は必ず一つのページに一つなくても良い
h2 から始まっても良い

となるが，よく上記の説明を理解した上で回答を読んでもらった方が良い．

ちなみに HTML5 のアウトラインに沿った書き方をしておいて，SEO に貢献するかどうかは知りません．
ただ，規則にかなった使い方をしておいた方が何かとよいでしょうという話です．

ちなみにこのセクションで囲んで見出しを付けて強弱を決める部分は
【CSS】z-index が効かない場合の注意点
と考え方はほぼ一緒だと思われるので合わせて読むとよいでしょう．

HTML5 Outliner

(※2022年1月追記 2022年3月追記と変更)

アウトラインを簡単に確認出来るツールがあるので紹介する．
以前は HTML5 Outliner を紹介していたが，弊社で新たに開発したのでそちらを紹介する．

HTML5 Outline 拡張機能で確認

HTML Outliner では見出しのタグが分からないのと，画像の alt 属性が無視されてしまうので，その部分を改良したものを弊社で開発して公開しました．

[Chrome 拡張機能] HTML アウトライン確認ツール

弊社のHTML アウトライン確認ツールも HTML5 Outliner と同様に無料で使えます．

データ収集したりもしません．

以下，以前の内容．

HTML5 Outliner という分かりやすい Google 拡張機能があるので紹介する．

すぐ上のリンクをクリックしてインストールするとそのページを見ながらアウトラインを確認することが出来る．

こちらは Hタグの中に img タグしかない場合に alt 属性が存在していても無視される．

HTML5 Outline サイトで確認

サイトで確認したい場合，HTML 5 Outlinerで確認が出来る．

こちらは Hタグの中の img タグに alt 属性が設定されていれば表示される．