SYNCER

SYNCER

＜header要素＞ - ヘッダー

公開日:

header要素はヘッダーを表す要素です。見出し、概要、投稿日など、コンテンツに関する案内をまとめます。著者、関連リンク、ライセンスなどの補足情報はfooter要素に含めて下さい。

概要

名前
header
カテゴリー
Flow content
Palpable content
配置できる場所
Flow contentが期待される場所。
コンテンツモデル
Flow content。ただし、header要素、footer要素、main要素の祖先になってはいけない。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLElement
デフォルトのスタイル
header {
	display: block;
}
仕様書
https://html.spec.whatwg.org/multipage/semantics.html#the-header-element

属性

グローバル属性

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

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜header要素＞ - ヘッダー</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/header/">
		<style>
			body {
				background-color: #fff ;
			}

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

<p>header要素は、コンテンツの案内となる情報を含めましょう。</p>

<header>
	<h1>パンを作る方法</h1>
	<dl>
		<dt>投稿日</dt><dd>2017-01-01</dd>
		<dt>更新日</dt><dd>2017-02-01</dd>
	</dl>
	<dl>
		<dt>材料</dt><dd>スーパーにあり</dd>
		<dt>所要時間</dt><dd>10分</dd>
	</dl>
</header>

<section>
	<h2>準備編</h2>
	<p>パンを作るにはまずスーパーに行く必要があります。…</p>
</section>

<section>
	<h2>調理編</h2>
	<p>買ってきた小麦粉を、まずホームベーカリーに入れます。…</p>
</section>

	</body>
</html>

デモを開く

デモ

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

<body> <div id="___body">

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

<style>

</style>

<script>

</script>