HTML Living Standard/section

section 要素

<section> 要素は、HTML文書の中で主題やトピックを区切るセマンティック要素です。意味的に関連するコンテンツをグループ化し、文書の論理構造を明確にするために使用されます。

概要

役割: 文書やアプリケーションの主題を意味的に区分するためのコンテナ。
主な用途:
- トピックごとの分割
- 文書の章やセクションの定義
- 主題に関連するコンテンツのグループ化

使用例

基本的な使用例

以下は、<section> 要素を使用して、トピックごとに文書を区切る例です。

<section>
  <h2>HTMLの歴史</h2>
  <p>HTMLは、Tim Berners-Leeによって1989年に初めて提案されました...</p>
</section>
<section>
  <h2>HTML Living Standard</h2>
  <p>HTML Living Standardは、WHATWGによって維持されている最新のHTML規格です...</p>
</section>

ネストされた使用例

<section> 要素は、入れ子構造を持つことができ、文書の細分化に役立ちます。

<section>
  <h1>HTMLの概要</h1>
  <section>
    <h2>HTMLの歴史</h2>
    <p>HTMLの起源は...</p>
  </section>
  <section>
    <h2>HTMLの進化</h2>
    <p>HTML5からLiving Standardへの移行...</p>
  </section>
</section>

属性

<section> 要素は、グローバル属性をサポートします。

グローバル属性の例

以下の例では、id 属性を使用して、特定のセクションを識別しています。

<section id="introduction">
  <h2>はじめに</h2>
  <p>このセクションでは、HTMLの基礎を紹介します...</p>
</section>

`<section>` 要素の仕様

許可される親要素: フローコンテンツを含むほぼすべての要素（例: <body>、<article>、<div> など）。
含めることが推奨されるコンテンツ:
- 見出し（<h1> ～ <h6>）を含むコンテンツ
- 関連する段落、リスト、メディアなど

使用上の注意

見出しの重要性: <section> 要素には、少なくとも1つの見出し（<h1> ～ <h6>）を含めるべきです。これにより、セクションの目的が明確になり、支援技術によるナビゲーションが容易になります。
不適切な使用例: 単なるスタイリング目的や無関係なコンテンツのグループ化には <section> を使用しないでください（代わりに <div> を使用）。

ベストプラクティス

適切な見出しを付与: 各 <section> 要素には、その主題を示す見出しを付けることが推奨されます。
階層的な構造を保つ: 文書全体が論理的に整理されるように <section> を使用します。
セマンティックな区切りに活用: トピックごとに関連する内容をグループ化し、文書の意味を明確にします。

アクセシビリティの考慮

<section> 要素と見出しを適切に組み合わせることで、スクリーンリーダーが文書構造を正確に理解できるようになります。
支援技術では、見出し構造が文書のセクションを認識するための重要な手がかりとなります。

まとめ

<section> 要素は、主題やトピックをグループ化するために使用されるセマンティック要素です。見出しと組み合わせて使用することで、文書の構造を明確にし、アクセス可能性や再利用性を向上させます。