HTML5 - 見出しのタグ(h1～h6)のルール

投稿日時 : 2024/09/29 更新日時 : -

見出しのタグを使うにはルールがある。
まず、<h1>タグはそのページの見出しとして、1度しか使ってはならない。このページでもどの記事のページでもh1タグは1つしかない。

h1からh6タグの使用するルール

h1タグはそのページの見出しとして1度しか使ってはならないが、h2からh6のタグは何度使っても構わない。しかし、使うにはルールがある。
デザインされていないので見にくいが、構造として分かりやすいように生のタグで野球の試合のページとして例を挙げる。

<h1>〇〇高校野球部の情報ページ</h1> (h1は記事に1つだけ)
野球部の情報ページです。

<h2>試合のスケジュール</h2> (h1に関連する見出し)
スケジュールについては下記を参照してください。

　<h3>春の試合</h3> (h2に関連する見出し)
　　<h4>3月の試合</h4>
　　<h4>4月の試合</h4>

<h2>野球部のメンバー紹介</h2> (h1に関連する見出し)

　<h3>監督について</h3>
　<h3>主将について</h3>
　<h3>レギュラー</h3>

上記のページのタグのように見出しタグ(h1～h6)は階層構造のように順番に付ける必要がある。例えば下記はダメだ

<h1>〇〇高校野球部の情報</h1>
<h1>〇〇高校サッカー部の情報</h1> (h1が1ページに複数はダメ！)
<h1>〇〇高校バスケ部の情報</h1>

<h1>〇〇高校野球部の情報</h1>
<h3>春の試合</h3> (h2を飛ばしていきなりh3はダメ！)
<h2>試合の情報</h2>

<h1>〇〇高校野球部の情報</h1>
<h2>〇〇高校サッカー部の情報</h2> (階層構造で関連性がないのはSEO的に良くない)
<h3>〇〇高校サッカー部の試合情報</h3>