タイトル: セクション

本稿はHTMLのセクションに関する要素をまとめる記事です。HTML5以降はセマンティック要素と呼ばれる「意味を持つ」要素群が標準で用意されており、検索エンジンやスクリーンリーダーへの伝わり方が向上します。

子ページから要素を選択して下さい。

本ページの子ページ一覧

要素	意味
section要素	独立したセクション。見出し付きのまとまり
article要素	独立して再利用可能なコンテンツ（記事・投稿）
aside要素	本文から離れた補足情報・サイドバー
nav要素	ナビゲーション（メニュー、目次）

HTML5のセマンティック要素（全体）

要素	用途
`<header>`	ページ／セクションの先頭
`<nav>`	ナビゲーションリンク
`<main>`	ページのメインコンテンツ（1ページに1つ）
`<article>`	独立コンテンツ
`<section>`	テーマでまとまった部分
`<aside>`	補足・サイドバー
`<footer>`	ページ／セクションの末尾
`<figure>` / `<figcaption>`	図とキャプション

典型的なページ構造

<body>
<header>...サイトヘッダー / ロゴ...</header>
<nav>...グローバルナビ...</nav>
<main>
<article>
<h1>記事タイトル</h1>
<section>
<h2>セクション見出し</h2>
<p>本文...</p>
</section>
</article>
<aside>関連記事 / 広告</aside>
</main>
<footer>コピーライト</footer>
</body>

section と article の使い分け

要素	使う場面
`<article>`	切り出して別の場所でも意味が通る独立コンテンツ（ブログ記事、ニュース、コメント）
`<section>`	テーマでまとまった文書内のひとまとまり（章・節）
`<div>`	意味を持たないグルーピング（スタイル目的のみ）

セマンティック要素のメリット

SEO — 検索エンジンがページ構造を理解しやすい
アクセシビリティ — スクリーンリーダーがランドマークとして読み上げ
CSS・JS が書きやすい — main > article 等で構造的にセレクト可
保守性 — div ばかりではなく意味で読み解ける

注意点

<section> には必ず見出し（h1〜h6）を入れる
<article> はネスト可能（記事内のコメントも article 等）
<main> はページに1つだけ
古いブラウザ（IE8等）はセマンティック要素を未対応。html5shiv等で代替
装飾だけが目的なら <div> + class が適切

IT総合Wiki

過去バージョン