WordPress等のブログでは,記事を見やすくするためにセクション毎に見出しをつけることが推奨されています.私は最初,記事中の一番大きな見出しにh1タグを使っていましたが,どうやらh2タグを使った方がよいみたいです.

選択肢

記事中の一番大きな見出しを示すタグとして,主に以下のどちらかのタグを選択することになるでしょう.

  • h1タグ
  • h2タグ

私は最初h1タグを使っていましたが,色々調べてみて,h2タグを使うことにしました(全ページ修正済みです).

h1タグを使っていた理由

HTML5に関する古いドキュメントを見てみましょう.

(旧版)HTML5日本語訳#h1、h2、h3、h4、h5、h6要素

以下のようなサンプルコードが書いてあります.

<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では,セクショニングに使うタグ中では,見出しはh1から始めることができました.実際に私が使っているHestiaテンプレートでは,記事本文のセクションはarticleタグで囲われており,h1の使用は問題ありませんでした.

h2タグを使うべき理由

HTML5に関する最新のドキュメントを見てみましょう.

(最新版)HTML5#Headings and sections

上記したサンプルコードが消されており,以下のような文言が書いてあります.

Sections may contain headings of a rank equal to their section nesting level. Authors should use headings of the appropriate rank for the section’s nesting level.

要するに,各セクションのネスティングされている階層数と,見出しのランクは一致させましょうねということです.このブログだと,一番大きいbodyセクション内のheader部分で記事タイトルにh1見出しがあります.そのbodyセクションにネストされているarticleセクション(階層数2)内に記事本文が書かれています.したがって,記事本文では大見出しにh2タグを使うべきです

おわりに

というわけで,記事の大見出しはh2タグを使いましょう! あとは,HTML5は結構変わっているみたいですので,昔の常識に囚われないようにしましょう(自分への戒め).