bodyタグ -メインコンテンツを含む要素｜HTML辞典

<body>タグとは？

<body>タグは、HTML文書のメインコンテンツを含む要素です。
ページ上に表示されるテキスト、画像、リンク、ボタン、フォームなどのすべての要素は、基本的にこのタグの中に記述されます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）

ページ上に表示されるすべての要素を含む主要なコンテナです。

閉じタグの有無

<body>は開始タグ（<body>）と閉じタグ（</body>）の両方が必要です。
この中に、見出し（<h1> など）、段落（<p>）、画像（<img>）、ナビゲーション（<nav>）などを記述します。

基本的な記述方法

<body> は 必ず <html> 内に記述 し、<head> の後に配置されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプルページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これはHTMLの基本構造の例です。</p>
</body>
</html>

ポイント：

ブラウザに表示されるすべてのコンテンツは <body> 内に記述する必要があります。
<body> の外にはメタ情報のみを記述する（例：<head> や <!DOCTYPE>）。

使用上の注意点

✅ <body> の外にコンテンツを記述しない

<body> の外にテキストや画像などのコンテンツを記述すると、HTMLの構造が崩れたり、意図しない表示になることがあります。
必ず <body> 内にコンテンツを記述することが推奨されます。

✅ スクリプトはできるだけ <body> の最後に記述する

JavaScriptの <script> タグを <head> に記述すると、ページの表示速度に影響を与えることがあります。
ページの読み込みを高速化するため、<script> は <body> の閉じタグの直前に配置するのが一般的です。

✅ 背景色やフォントスタイルは CSS で設定する

<body> に style 属性を使用して直接スタイルを適用することもできますが、
スタイルは基本的にCSSファイルで管理するのが望ましいです。

まとめ

<body>タグは、HTML文書のメインコンテンツを含む重要な要素 です。
すべてのページ表示要素は <body> 内に記述し、適切な属性や構造を守ることで、可読性とパフォーマンスを向上させることができます。
特に、スクリプトの記述位置やCSSの管理方法を工夫することが、Webページの最適化において重要です。