HTML5

サイト・タイトルとページ・タイトル

HTML4 や XHTML1 での問題点

 HTML4 や XHTML1 では、アウトラインを判別するための手掛かりは、見出し要素だけでした。h1 要素を 2つ以上使ったとしても HTML4 や XHTML1 には準拠しています。

 しかし、アクセシビリティや SEO を考慮して、h1 要素はページに 1つだけしか使わない方が良いとされてきました。ここで 1つの問題が浮上します。

 サイト名は、サイト全体を 1つのドキュメントと捉えれば、最も重要な見出しです。しかし、個々のページだけを見れば、そのページのメイン・コンテンツの見出しが、ページの見出しと考えるのが妥当です。いずれも h1 要素でマークアップしたいところです。しかし、h1 要素を 1つしか使わないというルールを適用しようとすると、悩ましい問題になります。

 ロボット型検索エンジンが主流になる前は、通常、サイトのトップページを入り口としてアクセスする事が多かったと言えます。これであれば、個々のページに、サイト名を見出しとしてマークアップする必要性は低かったと言えます。しかし、ロボット型検索エンジンが主流となった現在は、必ずしもトップページを入り口としてアクセスがあるわけではなく、直接、個々のページへアクセスする事が多くなりました。この場合、サイト名も大事な見出しとしてマークアップしたいと考えるのは当然のことと言えます。

 こういった事情から、これまでは、以下のいずれかを採用していたのではないでしょうか。

  1. サイト名を h1 要素で、ページ見出しを h2 でマークアップし、その下部の見出しは h3~h6 を使う。
  2. サイト名を見出し要素を使わずにマークアップし、ページ見出しを h1 要素でマークアップする。
  3. h1 要素を 2つ以上使わない方が良いと言われてはいるものの、サイト名にもページ見出しにも h1 要素でアークアップする。

 いずれの方法もすっきりしません。①ではページ見出しが h2 要素になるということに違和感を感じるでしょう。②ではサイト名が通常の文章と同じレベルの重要性しか持たなくなります。③では、サイト名とページ見出しがトップ・レベルに並んだ形となり、アウトライン上、不自然です。

HTML5 での解決法

 HTML5 で新たに導入された要素をうまく使えば、これらの問題を解決する事ができます。

 HTML5 では、全てのセクションにセクショニング要素を使えば、見出し要素の数字に意味はなくなります。極端に言えば、全ての見出しを h1 要素でアークアップしても構わない事になります。セクショニング要素が正しく使われていれば、見出し要素の数字ではなく、セクショニング要素の階層によって、自動的にアウトラインが判別されるからです。

ページのマークアップ例
<body>
  <header>
   <h1>Waste Of Time</h1>
  </header>
  <nav>
   <!-- サイトナビゲーション -->
  </nav>
  <article>
   <h1>HTML5 とは?</h1>
   <p>...</p>
  </article>
  <aside>
   <!-- サイドバー -->
  </aside>
  <footer>
   <!-- ページ・フッター -->
  </footer>
</body>

 この例では、サイト名にもページ見出しにも h1 要素を使っています。このアウトラインは次のようになります。

アウトライン
1.Waste Of Time
  1.1.不明(nav)
  1.2.HTML5 とは?(article)
  1.3.不明(aside)

 これで、アウトライン上は、サイト名がトップ・レベルになっています。しかし、これを見て、少し違和感を感じた人もいらっしゃるでしょう。nav 要素と aside 要素はセクショニング要素ですので、アウトラインに現れてしまうのです。

 しかし、この例から、簡単にメイン・コンテンツを機械的に抜き取る事ができます。それは、body 要素の直下にある header 要素、nav 要素、aside 要素、footer 要素を抜き取るだけです。これらの要素は、セマンティクス上、メイン・コンテンツを表すわけではありませんので、これらの要素を抜き取れば、必然的にメイン・コンテンツが残る可能性が高くなるという事になります。

 将来的には、SEO におけるメリットも出てくるでしょう。メイン・コンテンツだけを機械的に認識できるという事は、ロボットが、そのページのコンテンツを適正に評価できるという事を意味します。

 ただし、検索順位が上がるかどうかは関係がありませんので、変な期待を持たないよう気を付けてください。それは、そのページのコンテンツのクオリティー次第という事になります。

見出し要素の数字も意識すべき理由

 このように、HTML5 では、うまく要素を使えば、サイト名をアウトライン上でトップ・レベルとして認識させつつも、ページのメイン・コンテンツだけを機械的に認識できるようになります。

 とはいえ、見出し要素の数字を意味もなく使うべきではありません。次のマークアップをご覧ください。

無秩序に見出し要素を使用したマークアップ例
<h4>HTML5</h4>
<p>HTML5 とは...</p>
<section>
  <h2>要素</h2>
  <p>要素とは...</p>
  <section>
   <h6>section 要素</h6>
   <p>section 要素とは...</p>
  </section>
  <section>
   <h6>article 要素</h6>
   <p>article 要素とは...</p>
  </section>
</section>
<section>
  <h3>DOM</h3>
  <p>DOM とは...</p>
</section>

 ちょっと極端な例ですが、これでも HTML5 のマークアップとしては準拠しています。

 ただし、これは、メンテナンス性が悪いだけでなく、アクセシビリティ上問題があります。やはり、アウトライン・レベルに応じた見出し要素を使うようにしましょう。