コンテンツにスキップ

HTML Living Standard/ヘディング・コンテンツ

出典: フリー教科書『ウィキブックス(Wikibooks)』

ヘディング・コンテンツ

[編集]

ヘディング・コンテンツ(Heading Content)は、HTML文書内でセクションの見出しを定義する要素です。これらの要素は文書の構造化を助け、内容の階層を明確に示します。ヘディング・コンテンツは、アクセシビリティや検索エンジン最適化(SEO)の観点からも重要な役割を果たします。

定義

[編集]

ヘディング・コンテンツは、HTML文書の見出し(Heading)を表現する要素であり、以下の特性を持ちます:

  • 見出しの階層を定義し、文書の構造を明確化します。
  • 各セクションのタイトルとして機能します。

主な要素

[編集]

ヘディング・コンテンツに分類される要素は以下の通りです:

  • <h1>
    最も重要な見出しを表します。通常、文書全体のタイトルとして使用されます。
  • <h2>
    <h1>に続く重要度を持つ見出しを表します。文書のセクションタイトルとして使用されます。
  • <h3><h6>
    <h2>以下の階層で使用される見出しを表します。詳細なセクションやサブセクションのタイトルに使用します。

特性

[編集]

ヘディング・コンテンツの要素には以下の特性があります:

  • 階層構造の形成
    <h1><h6>の要素は、文書内の階層構造を視覚的および論理的に表現します。
  • アウトラインの生成
    ヘディング・コンテンツはセクショニング・コンテンツと連携して文書のアウトラインを形成します。
  • アクセシビリティへの貢献
    スクリーンリーダーなどの支援技術は、ヘディングを基に文書の構造を認識します。適切なヘディングの使用はアクセシビリティを向上させます。

使用例

[編集]

以下は、ヘディング・コンテンツを使用したHTML文書の例です:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ヘディング・コンテンツの例</title>
</head>
<body>
  <h1>文書のタイトル</h1>
  <h2>セクション1</h2>
  <p>これはセクション1の本文です。</p>
  <h3>セクション1-1</h3>
  <p>これはセクション1-1の本文です。</p>
  <h2>セクション2</h2>
  <p>これはセクション2の本文です。</p>
</body>
</html>

使用上の注意

[編集]

階層に基づいてヘディング要素を適切に使用してください。<h1>を飛ばして直接<h2><h3>を使用することは避けましょう。 ビジュアルスタイルを目的としてヘディング要素を使用せず、意味論的な用途に限定してください。スタイル変更はCSSを使用してください。

関連項目

[編集]

この章では、ヘディング・コンテンツの概要、特性、主な要素、使用例、そして注意点を詳細に説明しています。適切なヘディング要素の使用を促し、HTML文書の構造化やアクセシビリティ向上に貢献する内容となっています。

関連仕様

[編集]