<h1>〜<h6> 文書やセクションの見出しを表す

<h1>〜<h6>タグの説明

<h1>～<h6>は、文書やセクションの見出しを表すための要素です。このタグで囲われた文字列は、文書の中で見出しという「格」が与えられます。それをセクションごとの階層に応じて格付けできるように、見出し要素には<h1>から<h6>まで６つの段階が用意されています。

<h1>が最上位の大見出しとなり、数字が大きくなるほど格が下がっていき、<h6>が最下位の小見出しになります。見出しは細かく分ければ良いというものではなく、少ない種類で済ませる方が望ましいとされます。

見出しは文書のアウトラインに影響を与えます。これはHTMLの中でも重要な概念であるため、未習の方はこの機会に覚えておきましょう。

セクショニングを行わない暗黙的なアウトラインでは、見出しの格付けレベルを飛ばすようなことは避けて下さい。一つの文書の中で見出しは、常に<h1>から始まり<h2>へと続くように配置します。文脈のない所で、見出しが欲しいからといって突然<h5>を置いてはいけない、ということです。

一方、セクショニングがしっかりと行われた明示的なアウトラインでは、そもそも章や節ごとに階層が変わるため、見出しの種類を増やす必用がありません。HTMLのマークアップが煩雑になってしまう場合は、セクショニング・コンテンツの使い方を見直してみましょう。

<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>

次の例は、大見出しと小見出しを使い分けた記述内容です。

<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>

セクショニングをしっかり行うことで、以下のような記述も認められています。

<article>

	<header>
		<h1>記事の見出し</h1>
		<p>文書の概要やキャッチコピーなど。</p>
	</header>

	<section>
		<h1>セクションの見出し</h1>
		<p>ドキュメントの主題に沿った内容かつセクションに適した内容。</p>
		<p>ドキュメントの主題に沿った内容かつセクションに適した内容。</p>
	</section>

	<section>
		<h1>セクションの見出し</h1>
		<p>ドキュメントの主題に沿った内容かつセクションに適した内容。</p>
		<p>ドキュメントの主題に沿った内容かつセクションに適した内容。</p>
	</section>

	<aside>
		<h1>余談や補足情報</h1>
		<p>ドキュメントに付随することで価値を持つ情報。</p>
		<p>ドキュメントに付随することで価値を持つ情報。</p>
	</aside>

</article>