HTML Living Standard/h1
h1～h6 要素
[編集]<h1> から <h6> は、HTML文書内で見出しを定義するための要素です。これらの要素は文書の構造を示すセマンティックな役割を持ち、数字が小さいほど重要度が高い見出しとなります。
基本構造
[編集]以下は、<h1> から <h6> 要素を使った基本的なHTMLの例です：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Heading Example</title> </head> <body> <h1>Level 1 Heading</h1> <h2>Level 2 Heading</h2> <h3>Level 3 Heading</h3> <h4>Level 4 Heading</h4> <h5>Level 5 Heading</h5> <h6>Level 6 Heading</h6> </body> </html>
このように、<h1> は最も重要な見出し、<h6> は最も重要度の低い見出しとして使用されます。
セマンティックな役割
[編集]見出し要素は、文書の論理構造を表現するために重要です。ブラウザや支援技術（スクリーンリーダーなど）は、見出しを用いて文書の内容を理解しやすくします。
- 例：
-
<h1>は通常、文書の主題を示す最上位の見出しとして使用されます。<h2>～<h6>は、内容をセクションに分割し、それぞれのセクションの見出しとして使用されます。
<h1>Website Title</h1> <h2>About Us</h2> <p>Information about the company...</p> <h2>Services</h2> <h3>Web Development</h3> <p>Details about web development services...</p> <h3>SEO</h3> <p>Details about SEO services...</p>
スタイリング
[編集]見出し要素のデフォルトのスタイル（フォントサイズや太字など）は、各要素の重要度に応じてブラウザによって異なります。しかし、CSSを使用して自由にスタイルを変更することができます。
<style> h1 { color: darkblue; font-size: 2.5em; } h2 { color: darkgreen; font-size: 2em; } </style>
- 結果：
-
<h1>は青くて大きいフォントになります。<h2>は緑でやや小さいフォントになります。
使用上の注意
[編集]- 順序の重要性: 見出しのレベルは文書の論理構造を反映する必要があります。たとえば、
<h1>の直後に<h3>を使用するのは避けるべきです。 - 過剰な使用の回避: 見出し要素を適切な文脈で使用し、スタイルを目的として使用するのではなく、文書構造を明確にするために使用してください。
- 1つの
<h1>: 文書には1つの主要な<h1>を持つことが推奨されます。ただし、HTML Living Standardでは、必要に応じて複数の<h1>を使用することも許容されています。
見出しのアウトライン
[編集]HTML Living Standardでは、見出し要素を基に自動的にアウトラインを生成する仕組みが廃止されました。そのため、適切な見出しレベルを使用して文書の構造を明確に示すことが重要です。