section要素

section要素でアウトラインを表す

  • コンテンツやテーマによってグループ分けをしたセクション区切り
  • section要素は、要素の内容が明示的に文書のアウトラインに載る場合にのみ使用することが適切です
  • 通常見出しを持っています
  • section要素は、一般的なコンテナ要素ではありません(CSSJavaScriptで利用するための枠であれば、div要素を使用することを推奨しています)
  • div要素では明確にセクションを作ることができない(div要素はグループ化をする汎用的な枠の意味しかもてない)
文書のアウトライン
  • メインコンテンツを入れる(文書構造上の意味を囲む)
  • div要素は、内容にかかわらず見た目を指定するための囲みとして使う
<section>
  <h1>大見出し</h1>  
  <p>本文</p>
</section>
section要素のネスト(入れ子)
  • 各section要素の見出しは「h1」から指定可能
  • コーディング段階で理解しやすいように、従来どおりの「h1 → h2 →h3 →h4」という風に記述することが一般的(アウトライン上は、h1を何度使っても問題はありません)


ページ個別のセクションと全体のセクションを切り分ける
  • ページ個別のセクション(ページタイトル、見出し、本文など)
  • 全体のセクション(header要素、footer要素、nav要素)
  • nav要素のみが「セクショニングコンテンツ」です

HTML5でのアウトライン

  • section要素と見出し要素を使った階層構造をアウトラインと呼びます
  • HTML5では、セクショニングコンテンツによるアウトライン構造が重要視されます