body 要素は「ユーザーが実際に触る“本体”」
HTML 全体を家にたとえると、<!DOCTYPE html> は「これは家ですよ」の宣言、<html> は家全体の外枠、<head> は電気・住所・設定が書かれた“裏方”、
そして <body> が 「人が実際に住む・使う空間」 です。
ユーザーの目に見えるもの
ユーザーがクリック・入力・スクロールするもの
JavaScript が操作する対象
こういった「コンテンツの本体」は、すべて <body> の中に入ります。
body 要素の位置と“役割の境界線”
HTML 全体の中での body の場所
基本形をもう一度見てみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>こんにちは</h1>
<p>これは body 要素の中身です。</p>
</body>
</html>
ここでの役割分担はこうです。
head
ページの設定・メタ情報（タイトル、文字コード、CSS の読み込みなど）
body
画面に表示される中身（見出し、文章、画像、ボタンなど）
この「head は設定、body は中身」という境界線を
はっきり意識できると、HTML の設計が一気にきれいになります。
body の中に入るもの：画面に見える“コンテンツ全部”
見出し・本文・画像・リンク・ボタン…
<body> の中には、
ユーザーが実際に目にする・触る要素を置きます。
例えば、簡単な自己紹介ページならこうなります。
<body>
<h1>山田太郎のポートフォリオ</h1>
<h2>プロフィール</h2>
<p>東京在住のフロントエンドエンジニアです。</p>
<h2>スキル</h2>
<p>JavaScript / HTML / CSS を中心に開発しています。</p>
<h2>リンク</h2>
<p>
<a href="https://example.com">ブログはこちら</a>
</p>
</body>
ここに出てくるタグはすべて「コンテンツ」です。
見出し
段落
リンク
これらは、
「ユーザーに見せたい情報」なので body の中に置く
と覚えてください。
逆に、<meta> や <title> のような「設定」は
絶対に <body> に入れません。
body と JavaScript の関係：ここが“操作対象”になる
DOM 操作のほとんどは body の中を触る
JavaScript でよくやるのは、document.querySelector などで要素を取ってきて、
中身を書き換えたり、イベントを付けたりすることです。
その対象になるのは、ほぼすべて <body> の中の要素です。
例：ボタンを押したらメッセージを表示する
HTML:
<body>
<h1>ボタンの練習</h1>
<button id="helloBtn">あいさつする</button>
<p id="message"></p>
</body>
JavaScript:
const btn = document.querySelector("#helloBtn");
const message = document.querySelector("#message");
btn.addEventListener("click", () => {
message.textContent = "こんにちは！JavaScript からのメッセージです。";
});
ここで JavaScript が触っているのは、<button> と <p>、どちらも <body> の中の要素です。
つまり、
「JavaScript が動きを付ける舞台が body」
というイメージを持つと分かりやすいです。
body に“入れてはいけないもの”も理解しておく
設定系（meta、title、link など）は NG
<body> はコンテンツの場所なので、
次のようなものは入れません。
<meta><title><link rel="stylesheet"><script>（※置けるが、基本は head か body の末尾で意図的に使う）
悪い例：
<body>
<meta charset="UTF-8">
<title>ダメな例</title>
<h1>こんにちは</h1>
</body>
<meta> や <title> は
「ページの設定」なので head に置くべきもの です。
正しい形：
<head>
<meta charset="UTF-8">
<title>正しい例</title>
</head>
<body>
<h1>こんにちは</h1>
</body>
「これはユーザーに見せる中身か？
それともページの設定か？」
と自分に問いかけて、
中身なら body、設定なら head に置く、
という癖をつけると整理がうまくいきます。
body は「1 ページに 1 つだけ」の特別な要素
ネストしたり、複数作ったりはしない
HTML では、<div> や <section> はいくつでも作れますが、<body> は 1 ページに 1 つだけ です。
悪い例：
<body>
<h1>メイン</h1>
</body>
<body>
<h1>サブ</h1>
</body>
これは HTML として不正です。
ページ全体を包む「本文の箱」は一つだけ、
その中を <header> や <main>、<footer>、<section> などで
細かく分けていく、というイメージです。
例：
<body>
<header>
<h1>My Site</h1>
</header>
<main>
<h2>お知らせ</h2>
<p>新メニューを追加しました。</p>
</main>
<footer>
<p>© 2026 My Site</p>
</footer>
</body>
<body> は「ページの本文全体を包む一番大きな箱」
その中でさらに意味ごとに箱を分けていく、
という構造を意識できると、
HTML の設計がぐっとプロっぽくなります。
初心者として「body 要素」で掴んでほしいこと
<body> は、
「ユーザーが実際に見る・触るコンテンツのすべてを入れる場所」 です。
head は設定、body は中身
見出し・本文・画像・リンク・ボタンなどは全部 body の中
JavaScript が操作する DOM のほとんどは body の中の要素
meta や title など“設定系”は絶対に body に入れない
body は 1 ページに 1 つだけ。中でさらに意味ごとに分割していく
あなたが HTML を書くときに、
「これはユーザーの目に見えるものか？
それとも裏方の設定か？」と一度考えて、
自然に body / head を選べるようになったら、
もう“タグを並べる人”ではなく“構造を設計する人”になり始めています。