<body> - コンテンツ | HTML5

body 要素のポイント！

Webページのコンテンツを示す要素です。
<html>内に<head>に続く2番目の子要素として記述します
ブラウザに表示させるコンテンツは原則<body>内に記述することになります。

`body`要素の概要

SUMMARY OF ELEMENT

<body>は、Webページのコンテンツを示す要素で、<html>内に<head>に続けて2番目の要素として配置します。

ブラウザに表示させるコンテンツを要素内に記述していくことになります。
HTML5以前のHTML4.01やXHTML1.0時代には<body>内に記述できるのは「ブロック要素」と定義されていたため、直下にインライン要素である<img>や<span>等を記述することは文法違反とされていました。

HTML5ではブロック要素インライン要素という概念が無くなったことと「フローコンテンツ」を内包できるとなったことから、<body>直下に<img>等を記述しても文法違反とはなりません。

`body`要素の利用例

USAGE EXAMPLE FOR ELEMENT

要素の利用例を実際のコードを見ながら覚えていきましょう。
簡単なCSSでデザインをしているものもありますが、CSSの詳細はCSSリファレンスをご覧ください。

`body`要素の基本的な利用例

ここでは、<body>の具体的な利用例を見ていきましょう。


<!DOCTYPE html>
<html lang="ja">
  <head> <!--html内最初の子要素として配置-->
    メタデータ類
  </head>
  <body> <!--headに続けてbodyが配置される-->
    <section>
      <p>本文本文本文・・・・・</p>
      <img src="xxxx.jpg" alt="xxx" width="200" height="80">
    </section>
    <img src="xxxx.jpg" alt="xxx" width="200" height="80"> <!--bodyの子要素としてimg等のインライン要素があってもOK-->
  </body>
</html>

`body`要素の定義

DEFINITIONS OF ELEMENT

コンテンツ・カテゴリ

セクショニングルート

要素を記述出来る場所

<html>内の2番目の要素として

内包できるコンテンツ

フローコンテンツ

開始/終了タグの省略

ボックスのタイプ

ブロック

付与できる属性

グローバル属性

body 要素のポイント！

body要素の基本的な利用例

`body`要素の基本的な利用例