HTML

body

初級

読み方:ボディ|英語:Body

ブラウザの画面に表示される内容を書く場所だよ。

やさしい説明

body(ボディ)タグは、ブラウザの画面に表示される内容を書く場所です。ユーザーが目にするものは、すべてbodyの中に入っています。

headが「裏側の設定」だとすると、bodyは「表舞台」です。見出し、文章、画像、リンク、ボタン、動画——ページに表示したいものは全部ここに書きます。

ノートに例えると、headは表紙の裏に書いた名前や日付、bodyはノートの中身(本文)です。読む人が見るのはbodyの部分だけです。

1つのHTMLファイルにbodyタグは1つだけ。headの後に書きます。

図解:headとbodyの役割

headは裏側の設定、bodyは画面に表示される内容

具体例・使い方

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>文化祭のお知らせ</title>
</head>
<body>
  <h1>文化祭のお知らせ</h1>
  <p>今年の文化祭は10月15日です。</p>
  <img src="poster.jpg" alt="文化祭ポスター">
  <a href="schedule.html">スケジュールを見る</a>
</body>
</html>

bodyの中に書いた内容がブラウザの画面に表示されます。headの中に書いたタイトルはブラウザのタブに表示されますが、ページ本文には出てきません。

body内でよく使うタグ

  • h1h6 — 見出し(ページの構造を作る)
  • p — 段落(文章のかたまり)
  • img — 画像(src・alt属性が必須)
  • a — リンク(クリックで別ページへ移動)
  • div / section — 要素をグループ化する入れ物
  • header / main / footer — ページの大きな区画
  • button / form / input — ユーザーが操作する要素

いつ使う?

HTMLファイルを作るたびに必ず書きます。「ユーザーに見せたい内容」を追加するときは、いつもbodyの中に書きます。自己紹介ページ、ブログ記事、ゲームの画面——何を作るにもbodyが必要です。

間違いやすいポイント

❌ body の外に内容を書いてしまう

body の終了タグ(</body>)の後に内容を書くと、ブラウザが自動修正しますが意図しない表示になることがあります。コンテンツは必ず body の中に書きましょう。

<!-- ❌ bodyの外に書くと正しく表示されないことがある -->
</body>
<p>ここに書いちゃダメ</p>
</html>

<!-- ✅ 必ずbodyの中に書く -->
<body>
  <p>ここに書く</p>
</body>

❌ body タグを2つ書いてしまう

body タグは1つのHTMLファイルに1つだけです。2つ書くとブラウザが混乱して、予期しない表示になることがあります。

よくある疑問

Q: bodyの外に書いたらどうなる?

A: ブラウザが自動的にbodyの中に移動させますが、正しいHTMLではありません。必ずbodyの中に書きましょう。

Q: bodyに直接スタイルを書いていい?

A: <body style="...">と書くこともできますが、CSSファイルに分けて書くのが良い習慣です。管理しやすくなります。

Q: bodyの中の書く順番は決まっている?

A: 自由ですが、一般的にはheader→main→footerの順に書きます。ページの上から下に向かって書くとわかりやすいです。

関連用語

  • head — body と対になる要素。ブラウザへの設定情報を書く場所
  • タグ — body の中に並べる各HTMLタグ
  • 要素 — body 内のタグが作る「要素」の基本概念
  • HTML — body は HTML ファイルの必須構成要素のひとつ

📖 関連レッスン

レッスンを見る →

関連ブログ記事

⚠️ 関連するエラー

❓ 関連するQ&A