section要素

ページのセクションを分ける場合に使用します。セクションとはコンテンツの一定のグループ単位を指します。

サンプルコード

<article>
	<header>
		<h1>section要素の使い方</h1>
		<p><time datetime="2016-01-19">2016年1月19日</time></p>
	</header>
	<section>
		<h2>サンプルコード</h2>
		<p>section要素のサンプルコードです。</p>
	</section>
	<section>
		<h2>セクション2</h2>
		<p>section要素のサンプルコードです。</p>
	</section>
</article>

カテゴリー

フローコンテンツ、セクショニングコンテンツ、パルパブルコンテンツ
コンテンツモデル

フローコンテンツ
使用ケース

フローコンテンツが期待される場所

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

ブログの記事一覧を想定したサンプルコード

セクションを「新着順」と「人気順」の2つに分けたケースになります。サイドメニューなどでよく使われるコード形式です。

<aside>
	<h1>記事一覧</h1>
	<section>
		<h2>新着順</h2>
		<article>
			<h3>記事タイトル1</h3>
			<p><time datetime="2016-01-19">2016年1月19日</time></p>
			<p>記事の概要</p>
		</article>
		<article>
			<h3>記事タイトル2</h3>
			<p><time datetime="2016-01-15">2016年1月15日</time></p>
			<p>記事の概要</p>
		</article>
		<article>
			<h3>記事タイトル3</h3>
			<p><time datetime="2016-01-12">2016年1月12日</time></p>
			<p>記事の概要</p>
		</article>
	</section>
	<section>
		<h2>人気順</h2>
		<article>
			<h3>記事タイトル1</h3>
			<p><time datetime="2015-12-25">2015年12月25日</time></p>
			<p>記事の概要</p>
		</article>
		<article>
			<h3>記事タイトル2</h3>
			<p><time datetime="2015-12-30">2015年12月30日</time></p>
			<p>記事の概要</p>
		</article>
		<article>
			<h3>記事タイトル3</h3>
			<p><time datetime="2016-01-03">2016年1月3日</time></p>
			<p>記事の概要</p>
		</article>
	</section>
</aside>

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。