The HTML <body> element represents the document’s content area shown to users, and it is always present in the DOM even if you omit the tag in markup.
<body> は、ページに表示される本文（見出し・文章・画像・フォームなど）をまとめる要素です。HTMLとして <body> の開始/終了タグを省略できる場合もありますが、DOM上では常に document.body として存在します。
<body> が「何を入れる場所か」「何を入れないか（<head> との分担）」を説明できるclass で全体テーマを切り替える、margin/overflow を触るなど、実務での定番操作ができる<body> が2つある」「余白が消えない/消えた」「スクロールできない」事故を切り分けられる<body> って何？ざっくり言うと、<body> は「ブラウザに表示される中身の箱」です。
<head> とは役割が違う：タイトルやメタ情報、CSS/JSの読み込みは基本 <head><body> は、文書の「内容（content）」を表す要素です。ユーザーに表示され、ユーザーが操作する対象（リンク、フォーム、ボタンなど）を含みます。
<body> は <html> の子要素として1つだけ置きます。典型的には <head> の後に置かれます。
onload など）を使って、文書読み込みのタイミングにフックできる（ただし実務ではJS側での登録が主流）<body> を複数置くこと（HTMLとして不正）<head> に置くべきメタ情報（<title> や <meta>）を置くこと<html>）<body> の中は基本的に「フローコンテンツ」です。細かい分類は試験では用語として問われることがありますが、実務では次の感覚で十分です。
<h1> 等）、段落（<p>）、画像（<img>）、リスト（<ul>）、フォーム（<form>）、セクション（<main>/<section>/<article>）など<title>、<meta>、<link> などのメタデータ要素（原則 <head>）HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>ここが本文です。</p>
</body>
</html>まずは「<head> に設定、<body> に本文」を分けて書くのが最短です。
<body class="theme-dark"> のように、ページ全体の状態を class で表すbody { overflow: hidden; }（戻し忘れると「スクロールできない」事故になる）body { margin: 0; }（デザインシステムやリセットCSSでよく行う）<body> の開始タグ・終了タグは、条件を満たすと省略できます。ただし、省略できる＝存在しないではありません（DOMには作られます）。
<head> が終わった直後に本文コンテンツが始まる場合（ブラウザが <body> を補う）<body> の内容で終わる場合（続く兄弟要素がない）<body> にクラスを付け替えて、全体の挙動を確認する実務では <body> に class を付けて「ページ全体の状態（モーダル表示中、テーマ切替など）」を表すことが多いです。ここでは3つの典型操作をボタンで切り替えます。
背景は body に指定すると、ページ全体に一貫して効かせやすいです。
margin: 0）リセットCSSが入ると「余白が消える」ので、仕様として把握しておくと事故りません。
overflow: hidden）モーダル中に使いがちですが、戻し忘れると「スクロールできない」事故になります。
body.className）DevTools では Elements パネルで <body> のクラス付け替えを確認できます。
JavaScript
document.addEventListener("click", (e) => {
const btn = e.target.closest("[data-demo-body]");
if (!btn) return;
document.body.classList.toggle("demoBodyBg", btn.dataset.demoBody === "bgOn");
document.body.classList.toggle("demoBodyNoMargin", btn.dataset.demoBody === "noMarginOn");
document.body.classList.toggle("demoBodyNoScroll", btn.dataset.demoBody === "noScrollOn");
});<body> が2つある（テンプレ結合で起きがち）<body> まで含めてしまった。対策：レイアウト側に <body> を固定し、部分テンプレートは本文だけを差し込む。body の margin / リセットCSS / 共通CSS。確認：DevTools の Computed で margin を見る。overflow: hidden を body か html に付けたまま。確認：Computed の overflow と、どの要素に指定されているか。document.body が null になる<body> 生成前に実行している。対策：defer を使う、または DOMContentLoaded 後に実行する。<body> は1つ（複数は不正）<html> の子で、通常は <head> の後id/class/lang 等）。イベント属性も付けられるが、実務はJSでの登録が主流bgcolor などの見た目属性は現在は非推奨（CSSで行う）<body>、設定やメタ情報は <head>body の class で表すと管理しやすいoverflow: hidden）は戻し忘れ対策までセットで設計する