初心者のためのWEBデザイナーの教科書

セクションを使った構造化

HTML5では、W3Cにより「セクション」に関するタグの利用が推奨されています。セクションに関するタグを使うと、文書構造が非常に分かりやすくなり、定義した内容が何なのか、どこに何が書いてあるのかを明確にすることができます。

セクション・要素とは


セクション?要素?
聞きなれない専門用語が出てきましたね。難しく考える必要は全くありません。要するに、何がどこにあるかを明確にするだけなんです。皆さんは、コンビニに行ったことがあるでしょう。思い浮かべてください。同じ種類(要素)を持つものを一箇所に集めて、グループ化にするということです。

コンビニ店内の構造化


ちゃんと「お菓子のコーナー」「雑誌のコーナー」と仕分けがされていますね。同じ種類のものをきちんと構造化しているからこそ私たちは、買い物をする際に迷わず目的のコーナーへ辿り着くことができるのです。HTMLも、同じことが言えます。それぞれのコーナーをセクションと捉えればいいわけです。

主なHTML5のセクション

タグ 意味
header ページやセクションのヘッダー
main メインコンテンツ
sectionまたはdiv 汎用的なセクション
article 単独で成立するコンテンツ
nav ナビゲーション
aside 補足的なコンテンツ
footer ページやセクションのフッター

HTML5には、目的に応じたカテゴリーが定められています。セクショニングコンテンツなどそれぞれのカテゴリーに分類され意味合いを持っていますが、初級では解説を省略します。


【関連ページ】-CSS基礎-範囲指定・グループ化
では、いよいよ「ワクワク動物園」のページを作成しながら、わくわく学んでいきましょう。
「ワクワク動物園」に行く。