bodyについてhtmlプロパティ解説

概要

<body> タグは、HTML文書において実際にブラウザに表示されるコンテンツ部分を囲むための要素です。
テキスト、画像、リンク、フォームなど、ユーザーが直接見るすべての要素がこのタグ内に含まれます。

基本的な使い方

See the Pen titleについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen. 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>会社概要</title>
  </head>
  <body>
    <h1>会社概要</h1>
    <p>私たちは地域密着型のサービスを提供しています。</p>
  </body>
</html>

<body> タグ内に記述された要素は、ブラウザ上にそのまま表示されます。ページに表示したいコンテンツは、すべてこの中に記述するのが基本です。

出力される内容の例


会社概要

私たちは地域密着型のサービスを提供しています。

役割とメリット（定義リスト形式）

表示領域の定義
HTML文書の中で、実際にユーザーに見える部分を明確に区切ります。
構造の明確化
<head> と分けることで、構造的に読みやすくメンテナンスしやすくなります。
イベント処理の対象
JavaScriptで onload や onclick などのイベントを扱う際に対象として利用されます。
CSS適用の起点
body 要素にスタイルを設定することで、ページ全体のデザインベースを決定できます。

注意点

  • <body> タグはHTML文書に1つだけ記述してください。
  • <html> タグ内の適切な位置（<head> の後）に配置する必要があります。
  • JavaScriptを記述する場合は、読み込みタイミングに注意が必要です（例：</body> 直前に書く）。
  • SEOの観点では、本文の構成（h1〜h6など）も <body> 内に適切に記述する必要があります。

まとめ

<body> タグは、HTMLページにおけるユーザーに見せる主要なコンテンツ領域を担います。
基本構造における重要な要素であり、見た目・動き・意味づけすべての起点となるため、正しく配置・記述することが不可欠です。