h1〜h6要素の使い方 — 見出しの順番を伝える

HTMLのh1からh6は、ページの見出しを表す要素です。どの話題が大きく、その中にどんな小さな話題があるかを伝えます。

先に結論

小さな例

<h1>パンの作り方</h1>

<h2>材料</h2>
<h3>粉を量る</h3>
<h3>水を量る</h3>

<h2>手順</h2>
<h3>生地をこねる</h3>

h1はページ全体の話題、h2は大きな話題、h3はその中の話題を表しています。

数字は内容の順番を表す

h1が一番上の見出しで、数字が大きくなるほど小さな話題を表します。たとえば、h2の下の話題にはh3を使います。

前の見出しがh4でも、新しい大きな話題が始まるならh2に戻れます。ページの内容がどのようにつながるかを考えて選びます。

文字の大きさとは別に考える

ブラウザーは見出しを大きく太く表示しますが、見た目の大きさが見出しの意味を決めるわけではありません。小さく見せたいからh4にするのではなく、見た目はCSSで調整します。

sectionを置いても数字は変わらない

sectionで内容を囲んだだけでは、見出しの数字は自動で変わりません。ページ全体の順番に合わせて選びます。section要素の使い方もあわせて確認できます。

読み上げソフトでも見出しを使える

見出し要素を正しく使うと、読み上げソフトなどで見出しの一覧を見たり、見出しごとに移動したりしやすくなります。見た目だけを大きくした文字には、この見出しの意味がありません。

よくある間違い

• 文字を大きくしたいだけでh1やh2を使う
• 見出しの順番を考えずに、数字だけを飛ばして使う
• sectionを置くと見出しの数字が自動で変わると思う
• 見出しの言葉だけでは、その下の内容が分からない

見出しだけを順に読んでも、内容の流れが分かる言葉にしましょう。

Atlasで仕様と確認結果を見る

要素の正確な定義、見出しレベルの計算、アクセシビリティツリーでの公開、WPTの実行結果は、Yugien AtlasのHTML見出しTopicで詳しく確認できます。