【HTML Living Standard】section要素の使い方
section要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
sectionオブジェクトは、HTML文書内でテーマ別に独立した汎用的なセクションを表現するためのオブジェクトです。これは関連性の高いコンテンツを意味的にグループ化し、文書の構造を明確にするために利用されます。通常、section要素は必ず見出し要素（h1からh6）を伴い、その見出しがセクションの主題を示します。
例えば、ウェブサイトの主要な章や節、記事内の異なるテーマのセクション、あるいはタブ付きインターフェースにおける各タブの内容など、論理的にまとまったコンテンツのブロックに使用されます。section要素は単なるスタイル適用のためではなく、コンテンツにセマンティックな意味（意味論的な意味）を与えることが目的です。このため、スタイル目的で要素をグループ化するだけであれば、セマンティックな意味を持たないdiv要素を使用することが推奨されます。
また、article要素との違いも重要です。article要素が自己完結型で、単独で再利用可能なコンテンツ（例: ニュース記事、ブログ投稿）を表すのに対し、section要素は文書全体の一部として関連コンテンツを組織化するために用いられます。section要素を適切に利用することで、ウェブページの構造がより理解しやすくなり、検索エンジンや支援技術によるコンテンツの解析が容易になり、結果としてアクセシビリティとSEOの向上が期待できます。
公式リファレンス: <section>: The Generic Section element
構文(syntax)
1<section> 2 <h2>Section Title</h2> 3 <p>This is content within a section.</p> 4</section>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません