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>見出しレベル1</h1>
<p>ここは文章です。ここは文章です。ここは文章です。</p>

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

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

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

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

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

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

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

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

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

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

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

 

関連記事