＜body要素＞ - コンテンツ

公開日: 2017/02/08

body要素は、HTMLドキュメントのコンテンツ部分を表す要素です。body要素には、他の要素とは違ういくつかのイベント属性を付けることができます。

概要

名前

body

カテゴリー

Sectioning content

配置できる場所

html要素の、head要素に続く2つ目の子要素。

コンテンツモデル

Flow content。

タグの省略

body要素の最初のノードが空白文字、コメント、meta要素、link要素、script要素、style要素、template要素ではない場合に開始タグを省略できる。

body要素の直後にコメントがない場合に終了タグを省略できる。

DOM Interface

HTMLBodyElement

デフォルトのスタイル

body {
	display: block;
	margin: 8px;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-body-element

属性

onafterprint

印刷の確認用ダイアログが表示され、「OK」を押してダイアログを閉じた後に発火するイベント。

onbeforeprint

印刷の確認用ダイアログが表示される直前に発火するイベント。

onbeforeunload

ページを離れる直前に発火するイベント。

onhashchange

URLのハッシュ(#)が変化した時に発火するイベント。

onlanguagechange

ユーザーの優先言語の設定が変化した時に発火するイベント。

onmessage

WebSocket、PostMessageのメッセージを受け取った時に発火するイベント。

onoffline

オフラインになった時に発火するイベント。

ononline

オンラインになった時に発火するイベント。

onpagehide

onbeforeunloadとonunloadの間に発火するイベント。

onpageshow

ページが表示された時に発火するイベント。キャッシュの読み込みでも発火する。

onpopstate

History APIで履歴の現在位置を変更した時に発火するイベント。

onrejectionhandled

仕様書を読んでも理解できませんでした。情報提供をお待ちしております。

onstorage

別のブラウジングコンテキストで、WebStorageの内容に変化があった時に発火するイベント。

onunhandledrejection

仕様書を読んでも理解できませんでした。情報提供をお待ちしております。

onunload

ページを離れた時に発火するイベント。onpagehideよりも後に発火する。

グローバル属性

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

サンプルコード

HTML

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

<h2>Hello</h2>
<p>body要素内に、ユーザーに表示したいコンテンツを設置しましょう。</p>

	</body>
</html>

デモを開く

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

<!DOCTYPE html> <html> <head> <base href="/575/"> <meta charset="utf-8"> <title>【デモ】＜body要素＞ - コンテンツ</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/body/"> </head> <body>

<h2>Hello</h2> <p>body要素内に、ユーザーに表示したいコンテンツを設置しましょう。</p>

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

<style>

body { background-color: #fff ; }

</style>

</script>