h1 ~ h6
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> はセクションごとの見出しを設定するのに使用します。最上位の見出しが <h1> であり、階層が深まっていくごとに <h2>, <h3> と数字が増えていきます。
- 分類
- フローコンテンツ、見出しコンテンツ、知覚可能コンテンツ
- 内包できるもの
- フレージングコンテンツ
属性
グローバル属性のみ
サンプル
基本的に<h1> ~ <h6> 要素は <section> とセットで使用し、明示的に区分化します。もちろん <section> を使用せずに見出しを配置していくことも可能で、その際は暗黙的に区分化されることになります。その際 <section> で区分化した時に、構造に問題が無いように見出しと内容を配置していく必要があります。
記事本文はまず <article> 要素から始まるのでこれが最初のセクションになります。<h1> タグは多くの場合 <header> 要素内に配置されているので、それよりも下の階層にあたる <article> の見出しは <h2> から始まることになります。
<article>
<h2>見出し2</h2>
<p>内容</p>
<section>
<h3>見出し3</h3>
<p>内容</p>
</section>
<section>
<h3>見出し3</h3>
<p>内容</p>
<section>
<h4>見出し4</h4>
<p>内容</p>
</section>
</section>
</article>
プレビュー
注意点
HTML5 では ページ内のすべての階層の見出しを <h1> で配置することができましたが、HTML5.1 以降は使用できません。