見出しによるアウトラインのミス

HTML5ではページにh1タグが1つだけという決まりはない。この言葉だけが一人歩きしたのか、やや使い方を間違っているサイトを見かけた。

正しくは、他者が作ったWordPressテーマを使用していて起こったミスなのだが、これは後述する。

全体をセクションで囲んだ中でh1を使用


<article>
    <header>
        <h1>ペットについて</h1>
        <time>2015-04-04</time>
    </header>
    <div id="mainCont">
        <h1>犬</h1>
        <p>哺乳類の一種</p>
        <h2>柴犬</h2>
        <p>日本古来の犬種</p>
        <h2>ゴールデン・レトリバー</h2>
        <p>穏和な性格の犬種</p>
        <h1>猫</h1>
        <p>イエネコ亜種に分類される小型哺乳類</p>
    </div>
</article>

これは以下のアウトラインを形成します。書き手の思っているアウトラインとは異なると思います。


1. ペットについて
2. 犬
    1. 柴犬
    2. ゴールデン・レトリバー
3. 猫

セクションを入れ子にしてh1を使用


<article>
    <header>
        <h1>ペットについて</h1>
        <time>2015-04-04</time>
    </header>
    <section id="mainCont">
        <h1>犬</h1>
        <p>哺乳類の一種</p>
        <h2>柴犬</h2>
        <p>日本古来の犬種</p>
        <h2>ゴールデン・レトリバー</h2>
        <p>穏和な性格の犬種</p>
        <h1>猫</h1>
        <p>イエネコ亜種に分類される小型哺乳類</p>
    </section>
</article>

これは先のコードを単に内部セクションで囲んでいるだけなのですが、正しいアウトラインを生成しています。


1. ペットについて
    1. 犬
        1. 柴犬
        2. ゴールデン・レトリバー
    2. 猫

HTML5では「ページにh1タグが1つだけという決まりはない」は正しいのですが、正確には「セクションタグで構造化出来ていれば複数のh1を使ってもいい」になります。

CMSなどのテーマを配布している場合に起こりうる問題

通常は見出しレベルを1つずつ下げて書くのがお作法みたいなものなので間違えることはないのですが、WordPressなどのテンプレートを配布している人は注意が必要です。

1つ目の例のように、テンプレートを利用するユーザが本文の見出しをh1から始めることもあるかもしれません。このため、本文はセクション要素で囲っておくのがベター。


<article>
    <header>
        <!-- 記事タイトル -->
    </header>
    <section>
        <!-- ここに記事本文 -->
    </section>
</article>

セクション要素は内部でh1を使っても、その外側のセクションにまで影響を与えない囲いのような役割を持っています。

コメントする




8 + 7 =