HTML5では、W3Cにより「セクション」に関するタグの利用が推奨されています。セクションに関するタグを使うと、文書構造が非常に分かりやすくなり、定義した内容が何なのか、どこに何が書いてあるのかを明確にすることができます。
セクション・要素とは
セクション？要素？
聞きなれない専門用語が出てきましたね。難しく考える必要は全くありません。要するに、何がどこにあるかを明確にするだけなんです。皆さんは、コンビニに行ったことがあるでしょう。思い浮かべてください。同じ種類(要素)を持つものを一箇所に集めて、グループ化にするということです。
コンビニ店内の構造化
ちゃんと「お菓子のコーナー」「雑誌のコーナー」と仕分けがされていますね。同じ種類のものをきちんと構造化しているからこそ私たちは、買い物をする際に迷わず目的のコーナーへ辿り着くことができるのです。HTMLも、同じことが言えます。それぞれのコーナーをセクションと捉えればいいわけです。
主なHTML5のセクション
| タグ | 意味 |
|---|---|
| header | ページやセクションのヘッダー |
| main | メインコンテンツ |
| sectionまたはdiv | 汎用的なセクション |
| article | 単独で成立するコンテンツ |
| nav | ナビゲーション |
| aside | 補足的なコンテンツ |
| footer | ページやセクションのフッター |
HTML5には、目的に応じたカテゴリーが定められています。セクショニングコンテンツなどそれぞれのカテゴリーに分類され意味合いを持っていますが、初級では解説を省略します。
【関連ページ】-CSS基礎-範囲指定・グループ化
では、いよいよ「ワクワク動物園」のページを作成しながら、わくわく学んでいきましょう。
▶「ワクワク動物園」に行く。
