section要素

このエントリーをはてなブックマークに追加

section要素はページ内の一般的なセクションを指定する要素です。

セクションとはコンテンツをグループに分けたもので、通常はh1〜h6要素などの見出し要素を合わせて指定します。

セクションが独立したコンテンツである場合はsection要素ではなくarticle要素の利用が推奨されます。

また、section要素をレイアウトやCSSを当てるための目的だけで利用してはいけません。そういった場合はdiv要素を利用しましょう。

<section>
	(セクション)
</section>

簡単なサンプルで解説しましょう。次のコードは「HTML5とは?」という記事の中に「article要素とは?」や「section要素とは?」といった項目が存在する場合のマークアップです。

<article>
	<h1>HTML5とは?</h1>
	<p>Webサイトの構造を記述するHTMLの新しいバージョンです。</p>
	<section>
		<h1>article要素とは?</h1>
		<p>article要素はページ内で独立した記事などを記述する為の要素です。</p>
	</section>
	<section>
		<h1>section要素とは?</h1>
		<p>section要素はページ内の一般的なセクションを指定する要素です。</p>
	</section>
	(中略)
</article>

このように親のセクション(この場合はarticle要素)に複数の項目が存在する並列する場合には、それぞれを独立したsection要素でマークアップします。そうすることで文章の親子兄弟関係を明示的に示すことが可能になります。

section要素はIE8以下では非対応な為、CSSでスタイリングできません。section要素を利用する場合はhtml5shivを利用するなどしてください。

参考URL

4.4.3 The section element - W3C

登録日 : 2013年07月18日 最終更新日 : 2013年9月5日

同じカテゴリー(セクション)のエントリー

検索

スポンサードリンク

バージョン

リファレンス