この記事の要点

section 要素は一般的なセクション（章・節）を表す HTML5 のセマンティック要素 使用条件: 見出し (h1-h6) を持ち、テーマで明確にまとまった内容であること article / aside / nav のいずれにも当てはまらない普通のセクションに使う 誤用注意: 単なる装飾の div の代わりに使うのは NG — 意味的なまとまりがあるときだけ スクリーンリーダーは Region ランドマークとして認識 (aria-labelledby との併用推奨)

section 要素とは

section 要素は HTML5 で追加されたセクショニング要素で、文書内の一般的なセクション（章・節）を表します。本の章、ニュースサイトの各カテゴリブロック、フォームのステップなど、「テーマでまとまった内容」を意味づけるときに使います。

基本構文

  
会社概要
  
当社は2010年に設立され、Web 開発を中心に...



  
サービス紹介
  
主なサービスは以下の通りです...

使用条件: 見出し必須

HTML5 仕様上、section は見出し (h1-h6) を持つのが推奨されています。見出しなしで使うと意味づけが弱くなります。

  
料金プラン
  
...




  
...

article / aside / nav との違い

HTML5 のセクショニング要素は 4 種類あります。用途が決まっているものはそれぞれの専用要素を使い、それ以外を section にします。

要素	意味	典型用途
article	独立した記事	ブログ記事 / ニュース / 商品ページ
aside	本文の補足	サイドバー / 関連情報 / プルクオート
nav	ナビゲーション	メニュー / 目次 / パンくず
section	一般的なセクション	章・節・カテゴリ別ブロック

使用例

1. 記事内の章分け

  
JavaScript 入門

  

    
変数と型
    
JavaScript には var, let, const の 3 種類の変数宣言があります...
  

  

    
関数
    
関数宣言と関数式の違いは...
  

  

    
非同期処理
    
Promise と async/await を使うと...
  

2. トップページのカテゴリブロック

  

    
新着商品
    
...
  

  

    
人気ランキング
    
...
  

  

    
お知らせ
    
...
  

3. ステップ式フォーム

  

    
ステップ 1: お客様情報
    氏名 
  

  

    
ステップ 2: 配送先
    住所 
  

誤用パターン

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 を切ると、スクリーンリーダーで「ランドマーク間を飛ばし読み」できるようになり、検索エンジンも文書構造を理解しやすくなります。

関連記事

• article要素
• aside要素
• nav要素