<body>

対応:		HTML 4（1997）

『<body>』要素はHTMLドキュメントの本体部分を表す要素です。ブラウザのウィンドウに表示されるテキスト・画像・リンクなど、すべてのコンテンツは『<body>』内に記述します。

構文

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
</head>
<body>
  <!-- ページに表示されるコンテンツをここに記述します -->
  <h1>見出し</h1>
  <p>段落のテキストです。</p>
</body>
</html>

body内でよく使うタグ一覧

タグ	概要
<header>	ページや記事のヘッダー部分を表します。ロゴやナビゲーションを配置します。
<nav>	ナビゲーションリンクのまとまりを表します。
<main>	ページのメインコンテンツを表します。1ページに1つだけ使用します。
<article>	単独で意味をなすコンテンツ（記事・ブログ投稿など）を表します。
<section>	テーマでまとまったコンテンツのセクションを表します。
<aside>	サイドバーなど、メインコンテンツと関連する補足情報を表します。
<footer>	ページや記事のフッター部分を表します。著作権情報などを配置します。
<div>	意味を持たない汎用のブロック要素です。レイアウト目的でよく使用します。

サンプルコード

sample_body.html

<!-- セマンティック要素を使った標準的なページ構成 -->
<body>
  <!-- ヘッダー -->
  <header>
    <h1>サイト名</h1>
    <nav>
      <a href="/">ホーム</a>
      <a href="/about/">About</a>
    </nav>
  </header>

  <!-- メインコンテンツ -->
  <main>
    <article>
      <h2>記事タイトル</h2>
      <p>記事の本文です。</p>
    </article>
  </main>

  <!-- フッター -->
  <footer>
    <p>© 2025 サイト名</p>
  </footer>
</body>

<!-- サイドバーあり・JavaScriptを末尾に配置 -->
<body>
  <header>
    <h1>プログラミング学習サイト</h1>
    <nav>
      <a href="/">ホーム</a>
      <a href="/html/">HTML</a>
      <a href="/css/">CSS</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>HTML入門</h2>
      <section>
        <h3>タグとは</h3>
        <p>HTMLはタグで文書を構造化します。</p>
      </section>
    </article>

    <!-- サイドバー -->
    <aside>
      <h2>関連記事</h2>
      <ul>
        <li><a href="/css/">CSS入門</a></li>
        <li><a href="/js/">JavaScript入門</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2025 プログラミング学習サイト</p>
  </footer>

  <!-- JavaScriptはbodyの末尾に記述してHTMLの描画をブロックしない -->
  <script src="main.js"></script>
</body>

実行結果

ブラウザはサイト名の見出し、ナビゲーションリンク、記事タイトル、本文、フッターのコピーライト表記を順番に表示します。

サンプルページはこちら

概要

『<body>』内には『<header>』『<nav>』『<main>』『<footer>』などのセマンティックな（意味を持つ）HTML5要素を使って構造を組み立てることが推奨されています。これにより、スクリーンリーダーや検索エンジンがページの構造を正しく理解できるようになります。

レイアウトのためだけにタグを使う場合は『<div>』要素を使いますが、意味を持つコンテンツにはできるだけ適切なセマンティック要素を選ぶようにしましょう。

JavaScriptファイルの読み込みは『<body>』の末尾（『</body>』の直前）に記述するのが一般的です。こうすることで、JavaScriptの読み込みがHTMLの描画をブロックするのを防ぎ、ページの表示を速くできます。

body属性によるイベントハンドリング

『<body>』要素にはページ全体の読み込み・操作に関するイベント属性を指定できます。ただし、現代の開発ではJavaScriptで別途イベントリスナーを設定する方法が一般的です。

属性	概要
onload	ページ（画像含む全リソース）の読み込みが完了したときに実行されます。
onunload	ページを離れる・ウィンドウを閉じるときに実行されます。
onresize	ウィンドウのサイズが変更されたときに実行されます。
onscroll	ページがスクロールされたときに実行されます。

<!-- JavaScriptでbodyのイベントを検知する（推奨方法） -->
<body>
  <p id="status">読み込み中...</p>

  <script>
    // ページの全リソースが読み込まれたタイミング
    window.addEventListener("load", function() {
      document.getElementById("status").textContent = "読み込み完了！";
    });

    // ウィンドウサイズが変わったタイミング
    window.addEventListener("resize", function() {
      console.log("幅: " + window.innerWidth + "px");
    });

    // スクロール位置に応じてヘッダーを固定する例
    window.addEventListener("scroll", function() {
      var header = document.getElementById("site-header");
      if (window.scrollY > 100) {
        header.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
      }
    });
  </script>
</body>

CSSレイアウトパターン（bodyを起点にしたページ全体のスタイル）

『<body>』にCSSを当てることで、ページ全体のフォント・余白・背景色を一括で設定できます。フレックスボックスを組み合わせるとフッターを常に画面下部に固定するレイアウトも実現できます。

/* ページ全体の基本スタイル */
body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #f8f8f8;
}

/* フッターを常に画面下部に固定するレイアウト */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1; /* mainが余白を埋める */
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #e0e0e0;
  }
}