HTMLの基本構造（DOCTYPE、head、bodyとは）｜初心者向けにわかりやすく解説

HTMLでWebページを作るとき、最初に登場するのが「基本構造（ひな形）」です。
この構造を理解しておくと、HTML全体の仕組みがスッキリわかります。

この記事では、HTMLの基本構造と、<!DOCTYPE>, <head>, <body> の役割をわかりやすく解説します。

HTMLの基本構造とは？
<!DOCTYPE html>とは？
1. よくある誤解
<html>タグとは？
<head>とは？
1. headの中に書く主な要素
<body>とは？
HTMLの階層構造をイメージしよう
headとbodyの違いを簡単にまとめると
完成したHTMLテンプレート
よくある間違いと注意点
まとめ

HTMLの基本構造とは？

HTMLファイルは、次のような「一定の書き方（構造）」で成り立っています。

<!DOCTYPE html>
<html>
<head>
  <title>ページタイトル</title>
</head>
<body>
  <h1>見出しタイトル</h1>
  <p>ここに本文が入ります。</p>
</body>
</html>

上のように、HTMLは 大きく3つのパート に分かれています。

DOCTYPE宣言
head（ヘッド）部分
body（ボディ）部分

それぞれの役割を見ていきましょう。

<!DOCTYPE html>とは？

最初の行にある <!DOCTYPE html> は、「このファイルはHTML5で書かれています」とブラウザに伝える宣言です。

<!DOCTYPE html>

この宣言があることで、ブラウザが正しくHTML5のルールでページを解釈します。

よくある誤解

表示内容には直接関係ありません。
省略すると古い表示モードになる場合があります（推奨されません）。

つまり、すべてのHTMLファイルの先頭に必ず書くのが基本ルールです。

<html>タグとは？

<html> タグは、HTML文書の全体を囲むタグです。

<html>
  ...（中身）...
</html>

HTMLは「木構造（ツリー構造）」で組まれるため、
<html> が最上位にあり、その中に <head> と <body> が入ります。

<head>とは？

<head> は、ページの「見えない情報（設定）」をまとめる部分です。
ブラウザにページのタイトルや文字コード、説明などを伝える役割があります。

<head>
  <meta charset="UTF-8">
  <title>HTMLの基本構造</title>
  <meta name="description" content="HTMLの基本構造（DOCTYPE、head、body）の意味と書き方を解説。">
</head>

headの中に書く主な要素

タグ	役割
`<title>`	ページのタイトル（ブラウザタブに表示）
`<meta charset="UTF-8">`	文字コードの指定（日本語化に必須）
`<meta name="description">`	検索結果に表示される説明文
`<link>`	CSSなど外部ファイルの読み込み
`<script>`	JavaScriptの読み込み

head部分はページの“設定エリア”と覚えておくと分かりやすいです。

<body>とは？

<body> は、Webページに実際に表示される部分を記述するタグです。

<body>
  <h1>HTMLの基本構造を学ぼう</h1>
  <p>ここに本文が入ります。</p>
</body>

文章（pタグ）
画像（imgタグ）
リンク（aタグ）
表（tableタグ）

など、ユーザーが目にする要素はすべて<body>の中に書きます。

HTMLの階層構造をイメージしよう

HTMLは入れ子（ネスト）構造になっています。
図で表すと次のようになります。

<html>
 ├─ <head> …設定情報
 └─ <body> …実際に表示される部分

この構造を意識して書くことで、タグの意味と範囲が明確になります。

headとbodyの違いを簡単にまとめると

項目	head	body
表示されるか	表示されない	表示される
役割	ページ設定・情報	ページ内容
主なタグ	title, meta, link, script	h1, p, img, a, table
書く場所	HTMLの最初	headの後

完成したHTMLテンプレート

最後に、すぐ使えるHTMLテンプレートを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLの基本構造</title>
  <meta name="description" content="HTMLの基本構造（DOCTYPE、head、body）の意味と使い方を解説。">
</head>
<body>
  <h1>HTMLの基本構造を理解しよう</h1>
  <p>このページでは、HTMLの基礎となる構造を解説しています。</p>
</body>
</html>

これが、最もシンプルで正しいHTMLの基本形です。
HTMLを書くときは、まずこの形からスタートすると間違いありません。

よくある間違いと注意点

<head>の外に<title>を書いてしまう
→ 正しくは<head>の中に書きます。
<body>の外に要素を置く
→ すべての表示内容は<body>内に書くのがルールです。
<!DOCTYPE>を忘れる
→ 古いモードで表示され、デザインが崩れることがあります。

まとめ

要素	役割	補足
`<!DOCTYPE html>`	HTML5であることを宣言	必ず先頭に書く
`<head>`	ページ情報（設定）	titleやmetaなどを含む
`<body>`	ページの内容	表示される部分