★HTML Living Standard リファレンス
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>タグは、セクションの見出しを表す際に使用します。
hの後に続く数値は、見出しレベルを表します。 h1要素が一番の大見出し、h6要素が最も小さな小見出しです。 数値が小さいほど大見出し、大きいほど小見出しとなります。
見出しレベルは、ネストされたセクションのレベルに対応します。 h1要素は最上位セクション、h2要素はサブセクション、h3要素はサブサブセクションといった具合です。
■使用例
以下のサンプルでは、section要素のネストレベルと見出しレベルが対応しています。
HTMLソース
<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>ブラウザ上の表示
ドロー描画
はじめよう
シンプルな図形
Canvas座標
Canvas座標で描く図表
パスを描く
■使用例
上記サンプルではsection要素を明示的に記述していますが、 以下に表すサンプルではsection要素の記述を省略しています。
h1-h6要素で見出しを指定する場合、section要素の記述を省略しても暗黙的にセクションがあるものと解釈されます。 そのため、上記サンプルと以下のサンプルにおける文書のアウトライン（見出しとセクションの構造）は、意味的に同等です。
HTMLソース
<body>
<h1>ドロー描画</h1>
<h2>はじめよう</h2>
<h2>シンプルな図形</h2>
<h2>Canvas座標</h2>
<h3>Canvas座標で描く図表</h3>
<h2>パスを描く</h2>
</body>ブラウザ上の表示
ドロー描画
はじめよう
シンプルな図形
Canvas座標
Canvas座標で描く図表
パスを描く
スタイリング指定のためにsection要素を省略しない書き方を好むかもしれませんし、 簡潔さのためにsection要素を省略する書き方を好むかもしれません。 これはコーディング方針や好みの問題であり、どちらの書き方も適切です。
見出しと文書のアウトライン
h1-h6要素で見出しを指定する際には、 文書のアウトラインに合わせて見出しレベルを上位から下位へと適切に割り当てる必要があります。
文書に１つ以上の見出しがある場合、アウトライン内の少なくとも１つの見出しのレベルを1（h1要素）にする必要があります。
■使用例
以下のサンプルは、見出しレベルの割り当てが不適切です。
HTMLソース（不適切な例）
<body>
<h4>りんご</h4>
<p>りんごは果物です。</p>
<section>
<h2>味</h2>
<p>甘酸っぱくておいしい。</p>
</section>
</body>上記のサンプルは、見出しレベルを修正して以下のように書くことができるでしょう。
HTMLソース（適切に訂正した例）
<body>
<h1>りんご</h1>
<p>りんごは果物です。</p>
<section>
<h2>味</h2>
<p>甘酸っぱくておいしい。</p>
</section>
</body>■関連項目
- <body> …… 文書の本体（コンテンツ）を表す
- <article> …… 自己完結する内容であることを表す
- <section> …… 一般的なセクションを表す
- <nav> …… ナビゲーションリンクのセクションを表す
- <aside> …… メインコンテンツとは別のコンテンツであることを表す
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6> …… セクションの見出しを表す
- <hgroup> …… 見出しとその関連コンテンツを表す
- <header> …… 導入部分やナビゲーション補助のグループを表す
- <footer> …… フッターを表す
- <address> …… 連絡先情報を表す
- <title> …… 文書のタイトルや文書名を表す
Sponsors
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
