HTML5.1におけるh1（見出し）の使い方

HTML5.1 h1

今さらですが（笑）2016年11月1日にHTML5.1が勧告されました。そこで、見出し（h1 ～ h6）の使い方をおさらい。

WEB-LABO放置気味ですね（汗）
記事を書くモチベーションが・・・（笑）

以前、HTML5が勧告された時に「HTML5におけるh1（見出し）の使い方」という記事を書きました。で、その記事がそこそこアクセスがあるので、書かなきゃと思いつつ約1年が経ちました（笑）

HTML5.1では、見出し（h1 ～ h6）の使い方が HTML4.1 や XHTML 時の様に h1 から順番に記述する使い方だけになりましたので注意しましょう。

 

具体的には、こんな感じでセクションごとに見出しのレベルを下げていきます。

<article>
    <h1>見出しレベル１</h1>
    <p>ここは文章です。ここは文章です。ここは文章です。</p>

    <section>
        <h2>見出しレベル２</h2>
        <p>ここは文章です。ここは文章です。ここは文章です。</p>

        <section>
            <h3>見出しレベル３</h3>
            <p>ここは文章です。ここは文章です。ここは文章です。</p>
        </section>

        <section>
            <h3>見出しレベル３</h3>
            <p>ここは文章です。ここは文章です。ここは文章です。</p>
        </section>
    </section>
    
    <section>
        <h2>見出しレベル２</h2>
        <p>ここは文章です。ここは文章です。ここは文章です。</p>
    </section>
</article>

但し、必ずしもsectionタグは使う必要はなく、次の様に書いてもOK

<article>
    <h1>見出しレベル１</h1>
    <p>ここは文章です。ここは文章です。ここは文章です。</p>

    <h2>見出しレベル２</h2>
    <p>ここは文章です。ここは文章です。ここは文章です。</p>

    <h3>見出しレベル３</h3>
    <p>ここは文章です。ここは文章です。ここは文章です。</p>

    <h3>見出しレベル３</h3>
    <p>ここは文章です。ここは文章です。ここは文章です。</p>

    
    <h2>見出しレベル２</h2>
    <p>ここは文章です。ここは文章です。ここは文章です。</p>
</article>

見出しを書くことでセクションとして認識されますが、明示的にsectionタグを書く方が分かりやすいですよね。

 

関連記事