HTML5における見出しのマークアップ方法
見出しは<h1>～<h6>の6段階のタグでマークアップしますが、HTML5では<h1>～<h6>をページ全体で利用する方法のほかに、セクションごとに利用する方法も用意されています。
ページ全体で<h1>～<h6>を利用する方法。
これまでと同じように、ページ全体の上位階層の見出しから順に<h1>～<h6>でマークアップします。サンプルAの場合、以下のようにサイト名を<h1>で、記事のタイトルを<h2>で、記事の小見出しを<h3>でマークアップしてあります。
<body> <h1>Green Leaf</h1> … <nav> <ul><li>…</li></ul> </nav> <article> <h2>森の工房について</h2> … <section> <h3>森の中のある工房</h3> … </sectoin> <section> <h3>四季を楽しむことができる場所</h3> … </sectoin> <section> <h3>工房のまわりにいる動物たち</h3> … </sectoin> </article> </body>
ページ全体で<h1>～<h6>を利用してマークアップしたときのアウトライン。
セクションごとに<h1>～<h6>を利用する方法。
<article>、<nav>、<aside>、<section>タグでセクションを構成すると、セクションごとに<h1>～<h6>を利用できるようになります。サンプルAの見出しをセクションごとに<h1>から始めると、次のようになります。
<body> <h1>Green Leaf</h1> … <nav> <ul><li>…</li></ul> </nav> <article> <h1>森の工房について</h1> … <section> <h1>森の中のある工房</h1> … </sectoin> <section> <h1>四季を楽しむことができる場所</h1> … </sectoin> <section> <h1>工房のまわりにいる動物たち</h1> … </sectoin> </article> </body>
このマークアップでアウトラインを確認すると、ページ全体で<h1>から<h6>を利用した時と同じアウトラインが取得されることがわかります。
なお、セクションごとに見出しを扱えるようにしたのは、コンテンツの再利用を柔軟に行えるようにするためです。たとえば、ポータルサイトやブログのトップページのように、多様なページからコンテンツを集めて表示する場合、トップページに表示することまで考慮して、文法違反にならないように見出しをマークアップする必要がありました。一方、新しい文法ではセクション単位で見出しを扱うことができますので、異なるページのコンテンツを組み合わせても、文法違反になる心配がありません。
この例では構造がシンプルなため、すべての見出しを<h1>でマークアップした形になっていますが、セクション内では見出しタグの基本ルールに従ってマークアップすることができます。
セクションごとにで<h1>～<h6>を利用してマークアップしたときのアウトライン。