h1にはサイトタイトル

ぼくの場合，h1要素にはサイトタイトルを入れることが多いです。

• 文書の階層構造を見出しでマークアップしようとしている。
• サイト全体を統一されたルールでマークアップしようとしている。
• サイト全体をひとつのまとまった文書（document）ととらえている。

といったことが主な理由です。

たとえばこのブログだと，サイトタイトルをh1，エントリタイトルをh3でマークアップしています。トップページでも，アーカイヴのページでも，カテゴリのページでも，各エントリのページでも，サイトタイトルはh1，エントリタイトルはh3で統一しようと心がけています。サイト全体を通して矛盾のない階層構造を持たせたいという欲求から来るものです。

全ページの見出し（heading）要素を抜き出し，重複するものを整理して並べたとき，きれいな階層構造を持った目次になることが理想です。

複数のページを持つまとまったひとつの文書ならば，サイト全体に冠するタイトルがあるべきで，これを最上位の見出しh1としているわけです。章にあたるもののタイトルがh2，節にあたるもののタイトルがh3という感じです。

1. h1：サイトタイトル（文書のタイトル）
2. h2：カテゴリタイトル（章のタイトル）
3. h3：エントリタイトル（節のタイトル）

ページタイトルをh1にした場合

そのページで最も重要な見出しをh1とするなら，サイトタイトルよりエントリ（ページ）タイトルをh1にしたほうがよいと言えるかもしれません。サイトタイトルは上位の見出しではあるけれど，重要な見出しではない場合もあります。

ひとつのページの中には，中心となるコンテンツがありますが，それに直接関わらない周辺のコンテンツも多々あります。サイトタイトルやサイトの概要（description），他ページにリンクするナビゲーションなど。

こうした部分にh1より下位の見出しをつけると，サイトの中にこのページがあるという「サイト ⊃ ページ」の階層の包含関係が「サイト ⊂ ページ」と逆転してしまいます。ナビゲーションメニューもエントリ（ページ）に含まれるコンテンツというより，サイト全体に関わるコンテンツととらえたほうがしっくり行きます。つまり「ナビゲーション ⊂ ページ」ではありません。

こうした不整合を起こさないようにするには， ページタイトルに直接関わらない部分に見出しをつけないということになります。

hn要素は構造を切り分ける役割を持つ

hn要素は，div要素とともに，ページの構造を切り分けて，部分の意味づけを明瞭にするという役割を担っていると思うのです。見出しがあることで区切りを明確に示すことができます。たとえば次のように...。

<div>
  <h1>サイトタイトル</h1>
  <p>サイトの概要</p>
</div>
<div>
  <h2>カテゴリタイトル</h2>
  <p>カテゴリの概要</p>
</div>
<div>
  <h3>ページタイトル</h3>
  ......
</div>
<div>
  <h2>グローバルメニュー</h2>
  <ul>
    <li>リンク</li>
    <li>リンク</li>
    <li>リンク</li>
    <li>リンク</li>
  </ul>
</div>
<div>
  <h3>ローカルメニュー</h3>
  <ul>
    <li>リンク</li>
    <li>リンク</li>
    <li>リンク</li>
    <li>リンク</li>
  </ul>
</div>
......

div要素で切り分け，これにclassやidをふって意味づけることもできます。しかしこれだけでは，CSSの装飾を外したときや，視覚によらない閲覧者にとって，十分なアクセシビリティの向上になっていないように思います。

見出しをつけないということは，この切り分けと意味づけを曖昧にしてしまうようで，あまり気持ちよくありません。

階層を明確に示すことを重視するなら

このような理由で，主要なdiv要素の最初の子要素にはできるだけheading要素を置くようにし，このheading要素がサイト全体を通して矛盾のない階層を持つようにしたいと思っています。

個人的には，階層を明確に示すことを重視するなら，サイトタイトルをh1にするのが整合性をとりやすく，しっくり行くなと感じています。

関連

• サイト全体に連なるh1〜h6