JavaScript 入門
変数と型
JavaScript には var, let, const の 3 種類の変数宣言があります...
関数
関数宣言と関数式の違いは...
非同期処理
Promise と async/await を使うと...
タイトル: section要素
SEOタイトル: HTML section要素 完全ガイド（一般的なセクション / 見出し必須 / article との違い）
| この記事の要点 |
|
section 要素とは
section 要素は HTML5 で追加されたセクショニング要素で、文書内の一般的なセクション（章・節）を表します。本の章、ニュースサイトの各カテゴリブロック、フォームのステップなど、「テーマでまとまった内容」を意味づけるときに使います。
基本構文
会社概要
当社は2010年に設立され、Web 開発を中心に...
サービス紹介
主なサービスは以下の通りです...
使用条件: 見出し必須
HTML5 仕様上、section は見出し (h1-h6) を持つのが推奨されています。見出しなしで使うと意味づけが弱くなります。
料金プラン
...
...
article / aside / nav との違い
HTML5 のセクショニング要素は 4 種類あります。用途が決まっているものはそれぞれの専用要素を使い、それ以外を section にします。
| 要素 | 意味 | 典型用途 |
|---|---|---|
article | 独立した記事 | ブログ記事 / ニュース / 商品ページ |
aside | 本文の補足 | サイドバー / 関連情報 / プルクオート |
nav | ナビゲーション | メニュー / 目次 / パンくず |
section | 一般的なセクション | 章・節・カテゴリ別ブロック |
使用例
1. 記事内の章分け
2. トップページのカテゴリブロック
新着商品
...
人気ランキング
...
お知らせ
...
3. ステップ式フォーム
誤用パターン
section は意味的なまとまりがあるときだけ使います。スタイリング目的の div 代わりに使うのは誤りです。
| 誤用 | 正しい要素 |
|---|---|
| 単なる装飾用ラッパー | div |
| 独立した記事 | article |
| 本文の補足 | aside |
| ナビゲーション | nav |
| ページ全体のヘッダー | header |
| ページ全体のフッター | footer |
見出しレベルの扱い
HTML5 ではsection ごとに見出しレベルがリセットされる「アウトラインアルゴリズム」が提案されていましたが、主要ブラウザは未実装です。実用上は明示的に h1 → h2 → h3 と階層を作るのが安全です。
記事タイトル
章タイトル
節タイトル
アクセシビリティ
- section はアクセシブル名がある場合のみ「Region ランドマーク」として認識される
aria-labelledbyで見出しと結びつけると識別しやすい- section が多すぎると逆にナビゲーションが混乱する — 意味のある区分に絞る
お知らせ
...
FAQ
Q: section と div の使い分け
A: 見出しを持ち、テーマでまとまっているなら section。スタイル目的だけなら div。
Q: section の中に article を入れていい？
A: OK。例: ニュースサイトでカテゴリ section の中に記事 article を複数並べる構成。
Q: 見出しなしで section を使うと？
A: 仕様上は使えるが、アクセシビリティ上意味が伝わらない。div で十分なケースが多い。
Q: ランディングページの各ブロックを全部 section にしていい？
A: ヒーロー / 機能紹介 / 料金 / お問い合わせのようにテーマでまとまっているブロックならOK。各ブロックに見出しを付ける。
Q: section と article をネストする深さに制限は？
A: 仕様上の制限なし。実用上は2〜3 段に収めるのが読みやすい。深くなりすぎると意味づけが伝わりにくくなる。
ランディングページでの典型例
最強の業務効率化ツール
3 分で導入完了。今すぐ無料トライアル。
機能紹介
機能1: 自動化
...
機能2: 分析
...
料金プラン
...
よくある質問
...
このようにテーマ単位で section を切ると、スクリーンリーダーで「ランドマーク間を飛ばし読み」できるようになり、検索エンジンも文書構造を理解しやすくなります。