SYNCER

SYNCER

＜section要素＞ - コンテンツの区分

公開日:

section要素は、コンテンツのテーマ別の区分を表す要素です。例えば、ブログ記事であれば各章、企業ページであれば概要、ニュース、沿革、ギャラリーといった具合です。各セクションには通常、見出しが付くべきです。section要素は、div要素のように汎用ブロック要素として利用するべきではありません。

概要

名前
section
カテゴリー
Flow content
Sectioning content
Palpable content
配置できる場所
Flow contentが期待される場所。
コンテンツモデル
Flow content。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLElement
デフォルトのスタイル
section {
	display: block;
}
仕様書
https://html.spec.whatwg.org/multipage/semantics.html#the-section-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜section要素＞ - コンテンツの区分</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/section/">
		<style>
			body {
				background-color: #fff ;
			}

			article {
				background-color: #fffff0 ;
			}

			section {
				background-color: #ffeeff ;
			}
		</style>
	</head>
	<body>

<p>section要素は、コンテンツを区分ごとにまとめるために使いましょう。</p>

<article>
	<h1>SYNCER</h1>

	<section>
		<h2>作成者</h2>
		<dl>
			<dt>名前</dt><dd>あらゆ</dd>
			<dt>年齢</dt><dd>おっさん。</dd>
			<dt>能力</dt><dd>2013年頃からPHP、2015年頃からJavaScriptをセコセコ…。</dd>
		</dl>
	</section>

	<section>
		<h2>開発環境</h2>
		<dl>
			<dt>パソコン</dt><dd>Mac。</dd>
			<dt>エディター</dt><dd>mi。</dd>
			<dt>CMS</dt><dd>SyncerPress(自作)。</dd>
			<dt>サーバー</dt><dd>2014年頃はさくらインターネット、2015年頃からAWS。</dd>
		</dl>
	</section>

	<section>
		<h2>沿革</h2>
		<ul>
			<li>2014年6月にスタートしました。</li>
			<li>2015年3月に月間100万pvを達成しました。</li>
			<li>2015年7月に月間200万pvを達成しました。</li>
			<li>2015年9月に月間300万pvを達成しました。</li>
			<li>2016年7月に月間400万pvを達成しました。</li>
		</ul>
	</section>
</article>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>