記事内の大見出しにはh2タグを使おう
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は結構変わっているみたいですので,昔の常識に囚われないようにしましょう(自分への戒め).