HTML Living Standard/body

body 要素

<body> 要素は、HTML文書の主要なコンテンツを含む要素です。ユーザーに表示されるすべての要素（テキスト、画像、動画、リンク、フォームなど）は、通常この要素内に記述されます。

HTML Living Standardでは、<body> 要素は文書の構造を形成する中心的な役割を担います。

基本構造

以下は、<body> 要素を含むHTML文書の基本構造の例です：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example Document</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is an example of content within the <code>body</code> element.</p>
    <img src="example.jpg" alt="Example Image">
  </body>
</html>

<body> 要素は、文書内で1つだけ存在する必要があります。

属性

<body> 要素には、以下の属性を指定することができます。

グローバル属性

すべてのグローバル属性（id、class、style、data-* など）が使用可能です。これにより、<body> 要素にスタイルを適用したり、JavaScriptで操作したりすることができます。

イベントハンドラー属性

<body> 要素には、ページ全体のイベントに関連する属性を指定することができます：

onload: ページが完全に読み込まれた後に実行されるスクリプトを指定します。
```
<body onload="alert('Page loaded!')">
```
onunload: ページが閉じられる直前に実行されるスクリプトを指定します。
```
<body onunload="alert('Goodbye!')">
```

特定のスタイル属性（非推奨）

以前のHTML仕様では、bgcolor、text、link、vlink、alink などの属性が使用されていましたが、これらはHTML Living Standardでは非推奨となり、CSSを使用してスタイルを適用することが推奨されています。

<!-- 非推奨の例 -->
<body bgcolor="lightblue" text="black">
<!-- 推奨されるCSSの例 -->
<body style="background-color: lightblue; color: black;">

子要素

<body> 要素内には、以下を含むあらゆるHTML要素を配置できます：

セクション要素（例：<header>、<nav>、<main>、<footer>）
テキストコンテンツ（例：<p>、<h1>～<h6>）
インタラクティブ要素（例：<button>、<a>、<form>）
埋め込みコンテンツ（例：<img>、<video>、<iframe>）

<body>
  <header>
    <h1>Site Header</h1>
  </header>
  <main>
    <p>This is the main content of the page.</p>
    <img src="image.jpg" alt="An example image">
  </main>
  <footer>
    <p>Footer content here.</p>
  </footer>
</body>

使用上の注意

1つだけ存在するルール: HTML文書には1つの <body> 要素しか記述できません。
非推奨属性の使用回避: bgcolor や text 属性は使用せず、CSSを活用してください。
JavaScriptの適切な利用: onload や onunload 属性を使用する際は、過剰に依存せず、必要最小限に留めましょう。