---
title: "HTMLタグとは？head・bodyの役割をやさしく解説"
description: "Webページがどんな骨格で組み立てられているか知りたい方へ。headに書く情報とbodyに書くコンテンツの役割の違いを中心に、HTMLタグの基本的な構造を、初めてコードを見る方でも分かるように説明します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-html-tag-structure"
markdown: "https://giga-site.com/articles/what-is-html-tag-structure/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# HTMLタグとは？head・bodyの役割をやさしく解説

Webページの中身は、HTMLという仕組みで組み立てられています。その部品が「タグ」です。中でもheadとbodyは、ページの土台を作る大事な役割を持っています。この記事では、HTMLタグの基本とこの二つの違いを、初めての方向けに説明します。

> Source HTML: https://giga-site.com/articles/what-is-html-tag-structure
> Article index: https://giga-site.com/articles/index.md

## HTMLタグとは

HTMLタグとは、文章や画像が「見出しなのか」「段落なのか」といった意味を、ブラウザに伝えるための目印です。文章の前後を目印で挟むことで、ブラウザはそれをどう表示すればよいか判断します。

たとえば「ここは見出し」「ここは段落」と印を付けておくと、ブラウザは見出しを大きく太く、段落はふつうの文章として表示してくれます。

つまりタグは、ただの文字の集まりに「役割」を与えるラベルのようなものだと考えると分かりやすいでしょう。

## ページの骨組みになる基本構造

HTMLのページは、大きく見ると入れ子になった箱の集まりです。一番外側にページ全体を表す箱があり、その中に二つの大きな箱、headとbodyが入っています。

headはページの設定や情報を入れる箱、bodyは実際に画面に表示される中身を入れる箱です。この二つを正しく分けることが、整ったページの第一歩になります。

この骨組みがしっかりしていると、後から内容を足したりデザインを変えたりしても崩れにくくなります。

## 実務ではどこで関係する？

HTMLタグは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

HTMLタグについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## headとbodyの役割の違い

headには、ページのタイトルや文字の種類の指定、検索結果に表示される説明文など、画面には直接出てこないけれど大切な情報を書きます。ページの「裏方の設定」が集まる場所です。

bodyには、見出しや本文、画像やボタンなど、実際に利用者が目にする中身を書きます。私たちが普段ページとして見ているのは、このbodyの中身です。

headは設定、bodyは中身、という対比で覚えると、どちらに何を書けばよいか迷いにくくなります。

## 基本構造を組み立てる手順

簡単なページを作るときは、外側から内側へ箱を作っていくイメージで進めると整理しやすくなります。

1. ページ全体を表す一番外側の箱を用意する
2. その中に、設定を入れるheadの箱を作る
3. headにページのタイトルや説明など裏方の情報を書く
4. headの次に、表示する中身を入れるbodyの箱を作る
5. bodyに見出しや本文、画像などの実際のコンテンツを書く

## 作ったHTMLを確認・共有するには

HTMLは作っただけでは自分の手元にあるだけで、そのままでは他の人に見てもらえません。誰かに確認してもらうには、外からアクセスできる状態で公開する必要があります。

ギガサイト便では、作成したHTMLファイルをドロップするだけで共有URLが発行され、相手にリンクを送って表示を確認してもらえます。会員登録なしでも公開でき、headやbodyの組み方が意図どおりに表示されるかを手早く確かめたいときに便利です。

## よくある質問

### タグとはそもそも何ですか

文章や画像に「見出し」「段落」などの役割を与える目印のことです。前後を目印で挟むことで、ブラウザはその部分をどう表示すればよいかを判断します。文字に意味のラベルを付けるもの、と考えると分かりやすいです。

### headとbodyはどちらが先ですか

headが先で、bodyがその後に続きます。先に裏方の設定をまとめたheadを書き、続いて実際に表示する中身を入れたbodyを書く、という順番が基本の構造です。

### headに書いた内容は画面に表示されますか

原則として表示されません。headにはタイトルや説明、文字の種類の指定など、画面には直接出ない裏方の情報を書きます。利用者が目にするのはbodyの中身です。

### HTMLを書けば自動で公開されますか

いいえ。HTMLは作っただけでは手元にあるだけで、他の人は見られません。外からアクセスできる場所に置いて初めて共有できます。手軽に公開したいときは、ファイルを置くだけでURLを発行してくれるサービスを使うと簡単です。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)
- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md)
- [404エラーとは？ページが見つからない原因と仕組み](https://giga-site.com/articles/what-is-404/index.md)
- [403 Forbiddenとは？アクセスが拒否される意味](https://giga-site.com/articles/what-is-403/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTMLタグとは？head・bodyの役割をやさしく解説",
  "description": "Webページがどんな骨格で組み立てられているか知りたい方へ。headに書く情報とbodyに書くコンテンツの役割の違いを中心に、HTMLタグの基本的な構造を、初めてコードを見る方でも分かるように説明します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-html-tag-structure",
  "url": "https://giga-site.com/articles/what-is-html-tag-structure",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "タグとはそもそも何ですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "文章や画像に「見出し」「段落」などの役割を与える目印のことです。前後を目印で挟むことで、ブラウザはその部分をどう表示すればよいかを判断します。文字に意味のラベルを付けるもの、と考えると分かりやすいです。"
      }
    },
    {
      "@type": "Question",
      "name": "headとbodyはどちらが先ですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "headが先で、bodyがその後に続きます。先に裏方の設定をまとめたheadを書き、続いて実際に表示する中身を入れたbodyを書く、という順番が基本の構造です。"
      }
    },
    {
      "@type": "Question",
      "name": "headに書いた内容は画面に表示されますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "原則として表示されません。headにはタイトルや説明、文字の種類の指定など、画面には直接出ない裏方の情報を書きます。利用者が目にするのはbodyの中身です。"
      }
    },
    {
      "@type": "Question",
      "name": "HTMLを書けば自動で公開されますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "いいえ。HTMLは作っただけでは手元にあるだけで、他の人は見られません。外からアクセスできる場所に置いて初めて共有できます。手軽に公開したいときは、ファイルを置くだけでURLを発行してくれるサービスを使うと簡単です。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```