この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:atom
更新日時:2026-05-13 07:13:29

タイトル: セクション

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

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

本ページの子ページ一覧

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

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

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

典型的なページ構造


 

...サイトヘッダー / ロゴ...

 
 

   

     

記事タイトル


     

       

セクション見出し


       

本文...


     

   

   
 

 
コピーライト

section と article の使い分け

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

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

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

注意点

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

関連