HTML Living Standard/セクショニング・コンテンツ
セクショニング・コンテンツ
[編集]セクショニング・コンテンツ（Sectioning Content）は、HTML文書の構造を定義し、文書を論理的なセクションに分割する要素群です。このカテゴリに属する要素を使用することで、見出しの階層構造を適切に構築し、文書全体の可読性やアクセシビリティを向上させることができます。
定義
[編集]セクショニング・コンテンツは、文書のセクション（節）を定義する要素であり、以下の特性を持ちます：
セクショニング・コンテンツ要素を適切に使用することで、文書の内容を階層化し、論理構造を明確にすることが可能です。
主な要素
[編集]セクショニング・コンテンツに分類される主な要素を以下に示します：
<section>- 文書のセクションを表します。セクションは特定のテーマを持つ文書の一部分です。例として、章や節を表現するために使用されます。
<article>- 独立したコンテンツを表します。記事、ブログ投稿、フォーラムの投稿、ニュースなどに適しています。
<nav>- ナビゲーションリンクのセクションを表します。主に文書内やサイト全体のナビゲーションを提供します。
<aside>- 主な内容に関連した補足的なコンテンツを表します。サイドバーや注釈、関連情報などに使用されます。
<header>- 文書またはセクションのヘッダーを表します。見出しやナビゲーションリンク、紹介文などが含まれます。
<footer>- 文書またはセクションのフッターを表します。著作権情報、関連リンク、免責事項などに使用されます。
特性
[編集]セクショニング・コンテンツの要素には以下の特性があります：
- アウトラインの生成
- ネスト可能
- セクショニング要素は入れ子にすることが可能であり、文書の階層構造を柔軟に定義できます。
- 意味論的役割
使用例
[編集]以下は、セクショニング・コンテンツを使用したHTML文書の例です：
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>セクショニング・コンテンツの例</title> </head> <body> <header> <h1>セクショニング・コンテンツの例</h1> <nav> <ul> <li><a href="#section1">セクション1</a></li> <li><a href="#section2">セクション2</a></li> </ul> </nav> </header> <section id="section1"> <h2>セクション1</h2> <p>これはセクション1の本文です。</p> <aside> <p>これは補足情報です。</p> </aside> </section> <section id="section2"> <h2>セクション2</h2> <article> <h3>記事のタイトル</h3> <p>これは記事の本文です。</p> </article> </section> <footer> <p>© 2025 セクショニング・コンテンツの例</p> </footer> </body> </html>
注意事項
[編集]- 過剰なセクショニング要素の使用は避け、文書の構造が複雑になりすぎないようにすること。
- アウトラインを正しく形成するため、見出し要素（
<h1>～<h6>）を適切に配置してください。 - セクショニング・コンテンツ要素とインライン要素（例：
<span>）を混同しないよう注意してください。