<h1>〜<h6>タグの解説
<h1>～<h6>は、文書やセクションの見出しを表すための要素です。このタグで囲われた文字列は、文書の中で見出しという「格」が与えられます。それをセクションごとの階層に応じて格付けできるように、見出し要素には<h1>から<h6>まで６つの段階が用意されています。
<h1>が最上位の大見出しとなり、数字が大きくなるほど格が下がっていき、<h6>が最下位の小見出しになります。見出しは細かく分ければ良いというものではなく、少ない種類で済ませる方が望ましいと言えます。
見出しは文書のアウトラインに影響を与えます。これはHTMLの中でも重要な概念であるため、未習の方はこの機会に覚えておきましょう。
ひとつの文書の中で見出しを飛ばすような使い方は避けて下さい。具体的にはソースコードの上から順に、常に一番最初に登場する見出しは<h1>であり、続く見出しは<h2>であるように配置します。文脈のない所で、見出しがほしいからといって突然<h5>を置いてはいけない、ということです。
ただし、<h2>の後に<h3>の見出しが登場した後、再び<h2>を使うことはありえます。この場合、あくまで見出しは大見出し小見出しの関係性になるので、文脈上間違っていなければ問題ありません。
アウトラインの管理は、HTML5で<article>や<section>などを使って行うことが推奨されましたが、HTML Living Standardの時代になり、アウトラインの管理は見出し要素が行うことに統一されました。そのため、記事の中で細かくセクショニングを行わなくとも、ブラウザは見出しが登場するたびに自動的に文章の格付けを行います。
<h1>〜<h6>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素はヘディング・コンテンツとして、セクショニング・コンテンツで区分された要素の中で見出しを定義します。
- 視覚的な効果として太字になり、格付けに応じて文字の大きさが変わります。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
- 原則として、親要素が定義したひとつのセクションに対して設置できる
<h1>は一箇所です。<h2>以下は複数設置できますが、なるべく少ない格付けの方が望ましいとされます。
<h1>～<h6>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<h1>～<h6>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。見出しには文章の中でも特に重要な格付けが与えられます。
<h1>h1：記事全体の主題・最も格が高い文字列</h1>
<h2>h2：記事を構成する主要な章を表す文字列</h2>
<h3>h3：記事の章や説を表す文字列</h3>
<h4>h4：コンテンツの小見出し・中</h4>
<h5>h5：コンテンツの小見出し・小</h5>
<h6>h6：コンテンツの小見出し・微</h6>
見出しは一番格の高いものから順番に配置します。特に<h1>要素は、原則としてページの中で一回しか登場させてはいけません。以下の例は、独立した記事を章ごとに区切る場合の見出しの配置です。
<article>
<h1>記事の見出し</h1>
<p>段落の内容。見出しに沿った情報を提供しましょう。</p>
<p>段落の内容。見出しに沿った情報を提供しましょう。</p>
<h2>章の見出し</h2>
<p>段落の内容。見出しに沿った情報を提供しましょう。</p>
<p>段落の内容。見出しに沿った情報を提供しましょう。</p>
<h2>章の見出し</h2>
<p>段落の内容。見出しに沿った情報を提供しましょう。</p>
<p>段落の内容。見出しに沿った情報を提供しましょう。</p>
<h3>余談や補足情報</h3>
<p>段落の内容。見出しに沿った情報を提供しましょう。</p>
<p>段落の内容。見出しに沿った情報を提供しましょう。</p>
</article>
見出しの順序は原則として守らなければいけませんが、文章の構造上一つ上の階層へ戻ることも十分にありえます。例えば、第一章の中に三つの説があったとして、第二章へ進むためには一つ上の階層へ戻る必要が生じます。そのため、<h2>の後に<h3>が続いて、再び<h2>を配置しても問題ないのです。
セクショニングをしっかり行うと、これを視覚的にも分かりやすく記述できます。以下の例で、それぞれの見出しの順番や配置箇所を確かめて下さい。
<article>
<header>
<h1>記事の見出し</h1>
<p>序章、概要、キャッチコピーなど。</p>
</header>
<section>
<h2>章の見出し</h2>
<p>セクションの内容。セクションの内容。</p>
<p>セクションの内容。セクションの内容。</p>
<section>
<h3>説の見出し</h3>
<p>セクションの内容。セクションの内容。</p>
<p>セクションの内容。セクションの内容。</p>
</section>
<section>
<h3>説の見出し</h3>
<p>セクションの内容。セクションの内容。</p>
<p>セクションの内容。セクションの内容。</p>
</section>
</section>
<section>
<h2>章の見出し</h2>
<p>セクションの内容。セクションの内容。</p>
<p>セクションの内容。セクションの内容。</p>
<section>
<h3>説の見出し</h3>
<p>セクションの内容。セクションの内容。</p>
<p>セクションの内容。セクションの内容。</p>
</section>
<section>
<h3>説の見出し</h3>
<p>セクションの内容。セクションの内容。</p>
<p>セクションの内容。セクションの内容。</p>
</section>
</section>
<footer>
<h4>記事の終わり</h4>
<small>文書の出典</small>
<address>著者情報</address>
</footer>
</article>