あなたに合った学習プランは？LINE適正コース診断はこちら プログラミングが全て無料で学習可能！
HTMLのbodyタグとは？役割や書き方、CSS・scriptの実務ポイントを初心者向けに解説 - 忍者CODEマガジン

HTMLのbodyタグとは？役割や書き方、CSS・scriptの実務ポイントを初心者向けに解説

プログラミング言語の辞書

HTMLを学習していると、HTMLファイルの中に「bodyタグ」が必ずと言ってよいほど登場します。しかし、「bodyタグには何を書くの？」「headタグとは何が違うの？」「bodyタグにCSSを指定してもいいの？」「scriptタグをbodyの最後に書くのはなぜ？」と疑問に感じる方も多いのではないでしょうか。bodyタグは、ブラウザ画面に表示される見出し、文章、画像、リンク、フォームなどを入れるためのHTMLタグです。

この記事では、HTMLのbodyタグの意味や基本的な使い方、headタグとの違い、bodyタグ内に書く主な要素、CSSやJavaScriptとの関係、WordPress制作での実務ポイントを初心者向けにわかりやすく解説します。サンプルコード付きで紹介するので、HTMLを学び始めたばかりの方もぜひ参考にしてください。

HTMLのbodyタグとは？

bodyタグは、Webページ上に表示する内容を入れるためのタグです。見出し、本文、画像、リンク、ボタン、フォームなど、ユーザーがブラウザで見る多くの要素はbodyタグの中に書きます。

bodyタグの役割

bodyタグは、HTML文書の中でページ本文にあたる範囲を表します。

<body>
  <h1>ページタイトル</h1>
  <p>本文が入ります。</p>
</body>

上記の例では、h1タグとpタグをbodyタグの中に書いています。ブラウザに表示したい内容は、基本的にbodyタグ内に記述すると覚えておきましょう。

bodyタグとheadタグの違い

bodyタグとよくセットで登場するのがheadタグです。

<head>
  <title>ページタイトル</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>画面に表示される見出し</h1>
</body>

headタグにはページ設定を書き、bodyタグには画面に表示する内容を書きます。titleタグやmetaタグなどはheadタグに書き、本文や画像はbodyタグに書くのが基本です。

bodyタグはhtmlタグの中に書く

bodyタグは、htmlタグの内側に書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
</head>
<body>
  <p>ここに本文を書きます。</p>
</body>
</html>

bodyタグをheadタグの中に入れたり、htmlタグの外に出したりしないように注意しましょう。

オススメ：HTML・CSSの基礎を無料で学べる初心者向け講座はこちら
関連記事：「HTMLとは？初心者向けに基礎知識と作り方を解説」

HTMLでbodyタグを使う方法

bodyタグは、HTMLファイルの基本構造の中でheadタグの後に配置します。ページに表示したい内容を順番に書いていくことで、ブラウザ上にWebページが表示されます。

基本的な書き方

bodyタグの基本的な書き方は、「<body>表示したい内容</body>」です。

<body>
  <h1>HTMLを学ぼう</h1>
  <p>HTMLはWebページの構造を作るための言語です。</p>
</body>

この例では、bodyタグの中に見出しと文章を入れています。ブラウザで開くと、h1とpの内容が画面に表示されます。

bodyタグ内に書く主な要素

bodyタグ内には、さまざまなHTMLタグを記述できます。

  • 見出し：h1、h2、h3など
  • 文章：p、ul、ol、liなど
  • 画像：img、figureなど
  • リンク：a
  • フォーム：form、input、buttonなど
  • 構造：header、main、section、article、footerなど

bodyタグは、Webページの見える部分を組み立てる中心的な場所です。

header・main・footerで構造を作る

bodyタグの中では、ページ構造を分かりやすくするためにheader、main、footerなどのタグを使うことがあります。

<body>
  <header>
    <h1>サイト名</h1>
  </header>
  <main>
    <p>メインコンテンツです。</p>
  </main>
  <footer>
    <p>© 2026 Sample Site</p>
  </footer>
</body>

このように書くと、ページの冒頭、中心、末尾が分かりやすくなります。

関連記事：「HTMLタグ一覧【2026年最新】コピペで使える目的別リファレンス」

bodyタグを書く際の注意点

bodyタグはHTMLの基本ですが、何でも入れてよいわけではありません。headタグに書くべき設定情報や、構造が崩れる書き方には注意しましょう。

titleタグやmetaタグはbodyに書かない

titleタグやmetaタグは、ページ本文ではなくページ設定を表すタグです。

<body>
  <title>ページタイトル</title>
  <meta name="description" content="説明文">
</body>

上記のように、titleタグやmetaタグをbodyタグの中へ書くのは避けましょう。これらはheadタグの中に書くのが基本です。

bodyタグを複数書かない

HTML文書では、bodyタグは基本的に1つだけ書きます。

<body>
  <p>本文A</p>
</body>
<body>
  <p>本文B</p>
</body>

1つのページには1つのbodyタグを用意し、その中に表示内容をまとめると覚えておきましょう。

CSSのためだけに構造を崩さない

CSSでデザインを整えるために、bodyタグ内へdivタグを追加することはあります。ただし、意味のある構造を無視してdivタグだけで囲み続けると、HTMLが読みづらくなります。

見出しや本文、ナビゲーション、フッターなどは、役割に合ったタグを使うと管理しやすくなります。

関連記事：「【HTML】head（ヘッダ）とは？意味や使い方、重要性を解説！」

実務で使われるbodyタグの考え方

実際のWeb制作では、bodyタグそのものを意識してデザインするというより、bodyタグ内にどのような構造でコンテンツを配置するかが重要になります。また、ページ全体のベースとなるCSSや、JavaScriptの読み込み位置、WordPressで自動付与されるclassなどもbodyタグと関係します。

ページ全体の土台として使う

bodyタグは、ページに表示される要素全体を包む土台です。ヘッダー、メインコンテンツ、サイドバー、フッターなど、ページに必要な要素は基本的にbodyタグ内に配置します。

<body>
  <header>ヘッダー</header>
  <main>メイン</main>
  <aside>サイドバー</aside>
  <footer>フッター</footer>
</body>

bodyタグの中を整理すると、ページ全体の構造が分かりやすくなります。

bodyタグにCSSを指定してもよい？

初心者の方が迷いやすいのが、bodyタグ自体にCSSを指定してよいのかという点です。結論から言うと、実務ではbodyタグにページ全体のベーススタイルを指定することはよくあります。

body {
  font-family: sans-serif;
  color: #333;
  background-color: #fff;
  line-height: 1.7;
}

上記のように、サイト全体のフォント、文字色、背景色、行間などをbodyセレクタに指定すると、ページ全体の基本デザインをそろえやすくなります。

ただし、<body style=”background: red;”> のようにHTMLへ直接style属性を書く方法は、実務ではあまりおすすめされません。後からデザインを変更しにくくなるため、基本的にはCSSファイルやstyleタグ側で管理しましょう。

<body style="background-color: #fff;">
  <p>本文</p>
</body>

bodyへのCSS指定は「CSS側でまとめて管理する」のが実務で扱いやすい書き方です。

scriptタグをbodyの最後に置く理由

実務のHTMLでは、JavaScriptを読み込むscriptタグをbodyタグの閉じタグ直前に置くことがあります。

<body>
  <header>ヘッダー</header>
  <main>メインコンテンツ</main>

  <script src="main.js"></script>
</body>

これは、HTMLの表示に必要な要素を先に読み込み、JavaScriptの読み込みや実行で画面表示が遅くなるのを避けるためです。scriptタグをbodyの最後に置くと、ページの主要なHTMLを読み込んだ後にJavaScriptを実行しやすくなります。

ただし、現在はheadタグ内にscriptタグを書き、defer属性を付ける方法もよく使われます。

<head>
  <script src="main.js" defer></script>
</head>

JavaScriptをheadタグにそのまま置くと、読み込み方によってはページ表示を止めてしまう場合があります。初心者の方は、まず「bodyの最後に置く」または「deferを付ける」という考え方を覚えておくとよいでしょう。

bodyにclassを付けてページごとにCSSを変える

実務では、bodyタグにclass属性を付けてページごとのスタイルを切り替えることがあります。

<body class="page-home">
  <main>トップページの内容</main>
</body>

例えば、トップページだけ背景色を変えたい場合などに便利です。

body.page-home {
  background-color: #f7fbff;
}

body.page-contact {
  background-color: #fff;
}

bodyにclassを付けると、ページ単位でデザインやレイアウトを切り替えやすくなります。

WordPressの制作現場では、bodyタグにclassを直接手書きするのではなく、テーマ内でbody_class()という関数を使うことがあります。

<body <?php body_class(); ?>>

body_class()を使うと、トップページにはhome、固定ページにはpage、投稿ページにはsingleのようなclassが自動で付与されます。そのclassを使って、ページごとにCSSを出し分けるのがWordPress制作ではよくある実務パターンです。

body.home .main-visual {
  display: block;
}

body.page .main-visual {
  display: none;
}

WordPressではbody_class()で出力されるclassを活用すると、トップページ・下層ページ・投稿ページごとのデザイン調整がしやすくなります。

ただし、bodyタグに大量のclass名を手動で付けすぎると管理が複雑になるため注意しましょう。自分でclassを追加する場合も、役割が分かる名前にすることが大切です。

オススメ：HTML、CSSの問題集に無料で挑戦しよう！

HTML、CSSを勉強していると、調べれば分かることもありますが、実際に自分でアウトプットするのは難しいと感じたことはありませんか？
アウトプットするためのおすすめの方法は、「問題解くこと」です。
忍者CODEのHTML、CSS 学習の無料問題集では、HTML、CSSに関する問題を100問以上用意しており、LINE登録するだけで解答を無料で確認できます！

まとめ

本記事では、HTMLのbodyタグについて解説しました。

bodyタグは、Webページ上に表示する内容を入れるためのHTMLタグです。見出し、文章、画像、リンク、フォーム、ヘッダー、メインコンテンツ、フッターなど、ユーザーがブラウザで見る多くの要素をbodyタグ内に記述します。

headタグにはページ設定を書き、bodyタグには表示内容を書くという違いがあります。titleタグやmetaタグはheadタグ内に書き、h1タグやpタグなどの本文要素はbodyタグ内に書きましょう。

bodyタグを理解すると、HTML全体の構造をつかみやすくなります。今回紹介したサンプルコードを参考にしながら、まずはheadタグとbodyタグの違いを意識してHTMLを書いてみてください。

HTML・CSSを使った学習についてさらに詳しく知りたい方へ
  • HTML・CSSを学んで自分だけのスキルを身につけたい
  • HTML・CSSのスキルを身につけてwebクリエイターとして活躍したい
  • サポートが充実しているプログラミングスクールを知りたい

そんな思いを持った方は忍者CODEのWeb制作コースがおすすめです！
忍者CODEは未経験からでもプロのエンジニアを目指せるオンラインプログラミングスク―ルです。
期間制限なく動画を視聴できるので、自分のペースで学習することができます！