<h1>, <h2>, <h3>, <h4>, <h5>, <h6>タグは、セクションの見出しを表す際に使用します。
hの後に続く数値は、見出しレベルを表します。
h1要素が一番の大見出し、h6要素が最も小さな小見出しです。
数値が小さいほど大見出し、大きいほど小見出しとなります。
見出しレベルは、ネストされたセクションのレベルに対応します。
h1要素は最上位セクション、h2要素はサブセクション、h3要素はサブサブセクションといった具合です。
以下のサンプルでは、section要素のネストレベルと見出しレベルが対応しています。
<body>
<h1>ドロー描画</h1>
<section>
<h2>はじめよう</h2>
</section>
<section>
<h2>シンプルな図形</h2>
</section>
<section>
<h2>Canvas座標</h2>
<section>
<h3>Canvas座標で描く図表</h3>
</section>
</section>
<section>
<h2>パスを描く</h2>
</section>
</body>
上記サンプルではsection要素を明示的に記述していますが、
以下に表すサンプルではsection要素の記述を省略しています。
h1-h6要素で見出しを指定する場合、section要素の記述を省略しても暗黙的にセクションがあるものと解釈されます。
そのため、上記サンプルと以下のサンプルにおける文書のアウトライン(見出しとセクションの構造)は、意味的に同等です。
<body>
<h1>ドロー描画</h1>
<h2>はじめよう</h2>
<h2>シンプルな図形</h2>
<h2>Canvas座標</h2>
<h3>Canvas座標で描く図表</h3>
<h2>パスを描く</h2>
</body>
スタイリング指定のためにsection要素を省略しない書き方を好むかもしれませんし、
簡潔さのためにsection要素を省略する書き方を好むかもしれません。
これはコーディング方針や好みの問題であり、どちらの書き方も適切です。
h1-h6要素で見出しを指定する際には、
文書のアウトラインに合わせて見出しレベルを上位から下位へと適切に割り当てる必要があります。
文書に1つ以上の見出しがある場合、アウトライン内の少なくとも1つの見出しのレベルを1(h1要素)にする必要があります。
以下のサンプルは、見出しレベルの割り当てが不適切です。
<body>
<h4>りんご</h4>
<p>りんごは果物です。</p>
<section>
<h2>味</h2>
<p>甘酸っぱくておいしい。</p>
</section>
</body>
上記のサンプルは、見出しレベルを修正して以下のように書くことができるでしょう。
<body>
<h1>りんご</h1>
<p>りんごは果物です。</p>
<section>
<h2>味</h2>
<p>甘酸っぱくておいしい。</p>
</section>
</body>