スタイルだけを重視してマークアップしていくと、必ずと言っていいほどめちゃくちゃになってしまうHTMLのアウトライン。皆さんはちゃんと意識していますか？

Webに限らず文章は『入れ子』になっている場合がほとんどです。例えば本であっても、１章の中には１節、２節というように大きな「章」というまとまりの中に「節」という区切りが入る構造になっています。

<h1>１章</h1>
<p>１章の文章</p>
    <h2>１節タイトル</h2>
    <p>１節の文章</p>
    <h2>２節タイトル</h2>
    <p>２節の文章</p>

この区切りを明確に表すために用いられるのがsection要素です。では、上記のマークアップをsection要素を用いて、書き直してみましょう。

<article>
    <h1>１章</h1>
    <p>１章の文章</p>
    <section>
        <h2>１節タイトル</h2>
        <p>１節の文章</p>
    </section>
    <section>
        <h2>２節タイトル</h2>
        <p>２節の文章</p>
    </section>
</article>

section要素によって各「章」と「節」の区切りが明確になりました。（唐突にarticle要素が出てきましたが、section要素とarticle要素の違いについては今回は話題に上げません。）

このようにHTML5では、section要素の入れ子構造とその深さによってアウトラインが決定します。ですので、h1〜h6要素の使い分けは実施は無意味なものとなり、以下のようにすべてh1要素でマークアップしても生成されるアウトラインは同一のものになります。

<article>
    <h1>１章</h1>
    <p>１章の文章</p>
    <section>
        <h1>１節タイトル</h1>
        <p>１節の文章</p>
    </section>
    <section>
        <h1>２節タイトル</h1>
        <p>２節の文章</p>
    </section>
</article>

ですが、h1〜h6要素を順番に用いたマークアップの方が読みやすくていいですね。

また、h1要素の次にh3要素を用いるなどh1〜h6の順番をバラバラにしても、入れ子構造さえしっかりマークアップされていれば文法的には許容されるのですが、これは見づらいのでやめた方が賢明かと思います。

<article>
    <h1>１章</h1>
    <p>１章の文章</p>
    <section>
        <h3>１節タイトル</h3>
        <p>１節の文章</p>
    </section>
    <section>
        <h5>２節タイトル</h5>
        <p>２節の文章</p>
    </section>
</article>

上記でも、生成されるアウトラインは前２つの例と全く同じ。

最後に、私も使用しているおすすめのアウトラインチェッカーをご紹介します。

HTML5 Outliner for Chrome
HeadingsMap for FireFox

HTMLのアウトライン構造はコンピュータに文章構造を正確に理解させるための仕組みであり、SEOにも効果的とされています。マークアップの際にはセクションの区切りとh1〜h6要素の順番に注意して、コンピュータも人間も読みやすいコードを目指しましょう。