DOMの構造における head要素 と body要素

HTML文書は大きく分けて「head要素」と「body要素」の2つの主要部分に分かれています。両者は <html>（ルート要素） の直下に配置され、異なる役割を担います。以下に詳しく説明します。

1. head要素

役割

  • 文書に関する メタデータ（付加情報） を定義する部分です。

  • ブラウザに対して文書の表示方法や関連情報を伝える役割を持ちます。

  • ユーザーが画面上で直接目にする内容は基本的に含まれません。

主な内容

  • 文書のタイトル

    • <title>タグを使い、ブラウザのタブやブックマークに表示されます。

  • 文字コードや言語設定

    • <meta charset="UTF-8"> など、正しい文字の表示に必要です。

  • 外部リソースのリンク

    • <link>タグでCSSファイルを読み込みます。

  • スタイルやスクリプトの宣言

    • <style> や <script> で文書全体のデザインや挙動を定義できます。

  • SEOやSNS共有のための情報

    • <meta name="description" ...> や <meta property="og:title" ...> など。

例

html
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
  <link rel="stylesheet" href="styles.css">
  <meta name="description" content="これはサンプルページです。">
</head>

2. body要素

役割

  • ユーザーが実際に目にする コンテンツ（本文） を格納します。

  • テキスト、画像、リンク、フォーム、ボタンなどの要素が含まれます。

  • ページの見た目や動作に直接関わる部分です。

主な内容

  • テキスト要素

    • <h1>〜<h6> 見出し、<p> 段落、<span> インライン要素など。

  • マルチメディア要素

    • <img> 画像、<video> 動画、<audio> 音声など。

  • インタラクティブ要素

    • <a> リンク、<button> ボタン、<form> 入力フォームなど。

  • 構造的要素

    • <header> ヘッダー、<footer> フッター、<section> セクションなど。

例

html
<body>
  <h1>ようこそ</h1>
  <p>これはサンプルページです。</p>
  <img src="sample.jpg" alt="サンプル画像">
  <a href="about.html">詳細はこちら</a>
</body>

3. head要素とbody要素の関係

  • head要素: ページの「設定情報」を担当。見えない部分でブラウザや検索エンジンに影響します。

  • body要素: ページの「見える内容」を担当。ユーザーが直接操作・閲覧します。

両者を分けて定義することで、HTML文書は「構造（body）」と「情報（head）」を明確に区別して管理できます。

ChatGPT5 生成日：2025/09/11