Eyes, JAPAN Blog > HTMLのアウトラインを意識する

HTMLのアウトラインを意識する

Misato Usui

この記事は1年以上前に書かれたもので、内容が古い可能性がありますのでご注意ください。

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

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

<h1>1章</h1>
<p>1章の文章</p>
    <h2>1節タイトル</h2>
    <p>1節の文章</p>
    <h2>2節タイトル</h2>
    <p>2節の文章</p>

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

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

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

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

<article>
    <h1>1章</h1>
    <p>1章の文章</p>
    <section>
        <h1>1節タイトル</h1>
        <p>1節の文章</p>
    </section>
    <section>
        <h1>2節タイトル</h1>
        <p>2節の文章</p>
    </section>
</article>

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

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

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

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

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

HTML5 Outliner for Chrome
HeadingsMap for FireFox

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

Comments are closed.