HTML html/head/bodyタグの役割｜文書構造の基本を整理
生徒
「HTMLファイルには、htmlタグ、headタグ、bodyタグが必ず必要って聞きました。それぞれどんな役割があるんですか？」
先生
「それぞれに明確な役割があります。htmlタグは文書全体の容器、headタグは設定情報を書く場所、bodyタグは実際に表示される内容を書く場所です。」
生徒
「この3つのタグは、どんなページでも必ず書かないといけないんですか？」
先生
「はい、HTML文書の基本構造として、この3つのタグは必須です。これらを理解することで、HTMLの全体像が見えてきますよ。詳しく見ていきましょう！」
1. HTMLの基本構造｜3つの必須タグとは
HTMLファイルは、必ず決まった構造で作成します。その構造の中心となるのが、htmlタグ、headタグ、bodyタグの3つです。これらは、どのHTMLファイルにも必ず含まれる基本的なタグであり、それぞれが明確な役割を持っています。htmlタグはHTML文書全体を囲む最も外側のタグで、文書のルート要素と呼ばれます。headタグは、ページのタイトルや文字コード、CSSファイルの読み込みなど、ページの設定情報を記述する場所です。bodyタグは、実際にブラウザに表示される内容を記述する場所で、見出しや段落、画像、リンクなど、目に見えるすべての要素をこの中に書きます。この3つのタグを正しく使うことで、ブラウザはHTMLファイルを正確に解釈し、意図した通りにWebページを表示することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>基本構造のサンプル</title>
</head>
<body>
<h1>Webページのタイトル</h1>
<p>ここに本文を書きます。</p>
</body>
</html>
このように、HTMLファイルはDOCTYPE宣言から始まり、htmlタグですべてを囲み、その中にheadタグとbodyタグを配置します。これがHTMLの基本的な骨組みです。
2. htmlタグの役割｜文書全体を包む容器
htmlタグは、HTML文書全体を囲む最も外側のタグです。このタグは、ブラウザに対して「ここからここまでがHTML文書ですよ」と伝える役割があります。htmlタグは、DOCTYPE宣言の直後に開始タグを書き、ファイルの最後に終了タグを書きます。htmlタグには、lang属性を指定することが推奨されています。lang属性は、このページがどの言語で書かれているかを示す属性で、日本語のページでは「ja」、英語のページでは「en」と指定します。この属性を指定することで、検索エンジンや音声読み上げソフトが、ページの言語を正しく認識できるようになります。また、htmlタグの中には、必ずheadタグとbodyタグの2つを配置します。これ以外のタグを直接htmlタグの中に書くことは基本的にありません。
3. headタグの役割｜ページの設定情報を記述する場所
headタグは、Webページの設定情報やメタデータを記述する場所です。メタデータとは、データについてのデータという意味で、ページの内容そのものではなく、ページに関する情報のことを指します。headタグの中には、ページのタイトル、文字コード、CSSファイルの読み込み、JavaScriptファイルの読み込み、検索エンジン向けの説明文などを記述します。headタグの中に書いた内容は、基本的にブラウザの画面には直接表示されません。ただし、titleタグで指定した内容は、ブラウザのタブや、検索結果のページタイトルとして表示されます。headタグは、目に見えない部分ですが、Webページが正しく動作するために非常に重要な役割を果たしています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTMLの基本構造を学ぶページです">
<title>HTMLの基本構造 - 初心者向けガイド</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>headタグの中身の例</h1>
<p>この上にあるheadタグには、様々な設定情報が書かれています。</p>
</body>
</html>
headタグの中には、meta、title、link、scriptなどのタグを配置します。これらのタグは、ページが正しく表示され、検索エンジンに適切に認識されるために重要です。
4. bodyタグの役割｜実際に表示される内容を書く場所
bodyタグは、ブラウザに実際に表示される内容を記述する場所です。見出し、段落、画像、リンク、表、リスト、動画など、Webページとして目に見えるすべての要素は、このbodyタグの中に書きます。bodyタグは、headタグの直後に配置します。bodyタグの開始タグと終了タグの間に、ページの本文を自由に記述できます。例えば、ブログ記事なら記事の本文、ショッピングサイトなら商品の一覧や説明、企業サイトなら会社概要やサービス紹介などを記述します。bodyタグの中に書いた内容が、訪問者が実際に目にするWebページの内容となります。そのため、HTMLを学ぶ上で最も多くの時間を使って学習するのが、このbodyタグの中に書く内容です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>bodyタグの例</title>
</head>
<body>
<header>
<h1>私のブログ</h1>
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">自己紹介</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>今日の記事</h2>
<p>今日は天気が良かったので、散歩に行きました。</p>
<img src="/img/sample150-100.jpg" alt="散歩の写真">
</article>
</main>
<footer>
<p>© 2025 私のブログ</p>
</footer>
</body>
</html>
このように、bodyタグの中には、ページの内容を構成するすべての要素を配置します。header、nav、main、article、footerなどのセマンティックタグを使うことで、より意味のある構造を作ることができます。
5. 3つのタグの関係性｜入れ子構造を理解する
htmlタグ、headタグ、bodyタグの3つは、入れ子構造になっています。入れ子構造とは、箱の中に箱を入れるように、タグの中に別のタグを配置する構造のことです。最も外側にhtmlタグがあり、その中にheadタグとbodyタグが並んで配置されます。headタグとbodyタグは兄弟関係にあり、htmlタグの子要素と呼ばれます。この関係性を理解することは、HTMLの構造を把握する上で非常に重要です。htmlタグの中に直接、見出しや段落を書くことはできません。必ずbodyタグの中に書く必要があります。同様に、ページのタイトルを設定するtitleタグは、headタグの中に書く必要があります。この構造を守ることで、ブラウザはHTMLを正しく解釈できます。
6. headタグ内でよく使うタグ一覧
headタグの中には、様々な設定用のタグを配置できます。最も基本的なのがtitleタグで、ページのタイトルを指定します。metaタグは、文字コードやビューポート、ページの説明文などを設定します。文字コードを指定するmeta charsetは、文字化けを防ぐために必須です。linkタグは、外部のCSSファイルを読み込むために使用します。scriptタグは、JavaScriptファイルを読み込むために使用します。また、styleタグを使えば、CSSを直接headタグの中に書くこともできます。これらのタグを適切に配置することで、Webページの機能や見た目を制御できます。特に、検索エンジン最適化（SEO）のためには、titleタグやmeta descriptionタグを適切に設定することが重要です。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- ビューポート設定（スマホ対応） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページの説明文（検索結果に表示される） -->
<meta name="description" content="HTMLの基本構造について初心者向けに解説します">
<!-- ページのキーワード -->
<meta name="keywords" content="HTML, 初心者, 基本構造, htmlタグ, headタグ, bodyタグ">
<!-- ページのタイトル（ブラウザのタブに表示） -->
<title>HTMLの基本構造を学ぼう</title>
<!-- 外部CSSファイルの読み込み -->
<link rel="stylesheet" href="style.css">
<!-- ファビコン（タブのアイコン）の設定 -->
<link rel="icon" href="favicon.ico">
</head>
<body>
<h1>headタグの中によく書く要素</h1>
<p>上記のheadタグには、様々な設定が含まれています。</p>
</body>
</html>
このように、headタグの中には多くの設定を記述できます。これらの設定は、ページの品質や検索エンジンでの表示に大きく影響します。
7. bodyタグ内でよく使うタグ一覧
bodyタグの中には、実際にページに表示される内容を記述します。よく使われるタグには、見出しを表すh1からh6タグ、段落を表すpタグ、リンクを作るaタグ、画像を表示するimgタグ、リストを作るulタグとliタグ、表を作るtableタグなどがあります。HTML5からは、セマンティックタグと呼ばれる意味のあるタグが追加されました。headerタグはページの上部（ヘッダー）、navタグはナビゲーションメニュー、mainタグは主要なコンテンツ、articleタグは記事、sectionタグはセクション、asideタグは補足情報、footerタグはページの下部（フッター）を表します。これらのタグを適切に使い分けることで、検索エンジンやスクリーンリーダー（視覚障害者向けの読み上げソフト）が、ページの構造を正しく理解できるようになります。
8. 初心者が間違えやすいポイントと注意点
HTMLの基本構造について、初心者の方がよく間違えるポイントがあります。一つ目は、headタグとbodyタグの順番を逆にしてしまうことです。必ずheadタグが先で、bodyタグが後です。二つ目は、表示したい内容をheadタグの中に書いてしまうことです。見出しや段落など、表示したい内容は必ずbodyタグの中に書く必要があります。三つ目は、htmlタグの中にheadタグやbodyタグ以外のタグを直接書いてしまうことです。htmlタグの直下には、基本的にheadタグとbodyタグしか配置しません。四つ目は、終了タグを書き忘れることです。htmlタグ、headタグ、bodyタグには、必ず終了タグが必要です。これらの基本ルールを守ることで、ブラウザが正しくページを表示できるようになります。また、インデント（字下げ）を使ってコードを整理すると、構造が視覚的に分かりやすくなり、間違いも見つけやすくなります。
まとめ
HTMLでWebページを作成するときに最初に理解しておきたいのが、htmlタグ、headタグ、bodyタグの役割と基本的な文書構造です。この三つはHTML文書の骨組みとなる重要なタグで、それぞれ担当する役割が異なります。htmlタグはHTML文書全体を包む最も外側の要素で、headタグはページに関する設定情報を記述する場所、bodyタグはブラウザの画面に表示する本文を記述する場所です。HTML初心者は、まずこの三つの役割と配置する順番を理解すると、その後に学ぶ見出し、段落、画像、リンク、表、リストなどのHTMLタグも整理して覚えやすくなります。
HTMLファイルでは、最初にDOCTYPE宣言を書き、その後にhtmlタグを配置します。htmlタグの中にはheadタグとbodyタグがあり、headタグを先に、bodyタグを後に記述するのが基本構造です。箱に例えるなら、htmlタグが一番大きな箱で、その中に設定情報を入れるheadという箱と、実際に見せる内容を入れるbodyという箱があると考えると分かりやすいでしょう。
HTML文書の基本構造を確認しよう
HTMLの基本構造を実際のコードで確認すると、htmlタグ、headタグ、bodyタグの関係が分かりやすくなります。日本語で作成するWebページでは、htmlタグにlang属性を指定して日本語のページであることを示します。headタグには文字コードやページタイトルなどの設定を書き、bodyタグには訪問者が実際に読む見出しや文章を書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML初心者向けページ</title>
</head>
<body>
<h1>HTMLの基本を学ぼう</h1>
<p>ここにWebページの本文を書きます。</p>
</body>
</html>
このHTMLコードを見ると、htmlタグの中にheadタグとbodyタグが入っていることが確認できます。このようにタグの中へ別のタグを配置する構造を入れ子構造と呼びます。HTMLでは入れ子構造が何度も登場するため、どのタグの中に何が入っているのかを意識してコードを書くことが大切です。インデントを使って字下げすると、親となるタグとその中にある子のタグの関係も確認しやすくなります。
htmlタグはHTML文書全体を囲む役割を持つ
htmlタグはHTML文書全体を囲む最も外側のタグです。DOCTYPE宣言の直後からHTML文書の最後までを囲み、そのページがHTMLとして構成されていることを表します。htmlタグはHTML文書におけるルート要素とも呼ばれます。ルートとは木の根という意味があり、HTML文書全体の出発点となる一番上の要素と考えると理解しやすくなります。
htmlタグではlang属性も重要です。日本語で作成されたページならja、英語で作成されたページならenのように指定します。lang属性によって文書で使われている言語を示すことができ、検索エンジンや音声読み上げソフトなどがページの言語を判断するための情報になります。日本語サイトを作成するときは、htmlタグの役割だけでなくlang属性についても一緒に覚えておくとよいでしょう。
htmlタグの直下には、基本的にheadタグとbodyタグを配置します。ページに表示したいh1タグやpタグをhtmlタグの直下へそのまま書くのではなく、表示する内容はbodyタグの中に配置するという基本構造を覚えることが重要です。
headタグにはページの設定情報を書く
headタグは、Webページそのものに関する設定情報を記述する場所です。headタグに記述する代表的なものには、文字コードを設定するmetaタグ、ページタイトルを指定するtitleタグ、画面幅に関する設定、ページの説明文、CSSファイルの読み込みなどがあります。これらの情報はWebページを正しく表示したり、ページについてブラウザや検索エンジンへ伝えたりするために利用されます。
特に初心者が覚えておきたいのが、meta charsetとtitleタグです。文字コードを適切に指定することで日本語などの文字化けを防ぎやすくなります。titleタグには、そのページが何について書かれているのか分かるタイトルを指定します。titleタグの内容は本文の見出しとして表示されるのではなく、ブラウザのタブなどで利用されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTMLの基本構造を初心者向けに解説します">
<title>HTMLの基本構造を初心者向けに解説</title>
</head>
<body>
<h1>HTMLの基本構造</h1>
<p>htmlタグ、headタグ、bodyタグについて学びます。</p>
</body>
</html>
headタグは画面に見える本文を書く場所ではありません。ページの見出しや説明文、画像など、訪問者に表示したい内容はbodyタグへ記述します。headタグは見えないから重要ではないということではなく、HTML文書の設定を行う大切な場所として理解しておきましょう。
bodyタグにはブラウザに表示する内容を書く
bodyタグは、Webページを開いた人が実際に目にする内容を記述する場所です。h1からh6までの見出しタグ、文章の段落を作るpタグ、リンクを作成するaタグ、画像を表示するimgタグ、リストを作るulタグやliタグ、表を作るtableタグなど、多くのHTMLタグをbodyタグの中で使用します。
ブログであれば記事のタイトルや本文、企業サイトであれば会社情報やサービス紹介、ショッピングサイトであれば商品名や商品画像、商品説明などがbodyタグの中に入ります。HTMLを学習するときに書くコードの多くはbodyタグの中に配置することになるため、headタグとの違いを明確にしておくことが重要です。
bodyタグの中では、headerタグ、navタグ、mainタグ、articleタグ、sectionタグ、asideタグ、footerタグなど、内容の意味を表すHTMLタグを組み合わせることもできます。例えばheaderはページ上部の情報、navはナビゲーション、mainはページの主要な内容、articleは記事、footerはページ下部の情報というように、それぞれ異なる役割を持っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私のブログ</title>
</head>
<body>
<header>
<h1>私のブログ</h1>
</header>
<main>
<article>
<h2>今日の記事</h2>
<p>HTMLの基本構造について勉強しました。</p>
</article>
</main>
<footer>
<p>ブログのフッターです。</p>
</footer>
</body>
</html>
この例では、bodyタグの中にheader、main、article、footerを配置しています。すべてブラウザに表示するページ内容なのでbodyタグの中に書かれています。HTMLでは、このように大きな構造から小さな構造へ順番に組み立てていくと、コード全体の関係を理解しやすくなります。
headタグとbodyタグの違いを整理しよう
headタグとbodyタグを混同しないためには、設定と内容という二つの言葉で区別すると分かりやすくなります。headタグはページについての設定を書く場所で、bodyタグはページとして見せたい内容を書く場所です。例えばページタイトルを設定するtitleタグはheadタグに書きますが、画面上に大きな見出しとして表示するh1タグはbodyタグに書きます。
同じように、文字コードの指定やページの説明などはheadタグに記述します。一方で、文章、画像、リンク、表、リストなど、Webページの訪問者が読む情報はbodyタグに記述します。何をどこに書けばよいか分からなくなったときは、それがページに関する設定なのか、訪問者に見せる本文なのかを考えると判断しやすくなります。
htmlタグ、headタグ、bodyタグには親子関係もあります。最も外側のhtmlタグが親となり、その中にheadタグとbodyタグが配置されます。さらにbodyタグの中にheaderタグやmainタグがあり、mainタグの中にarticleタグやsectionタグが入るというように、HTML文書は複数の入れ子構造によって作られていきます。この関係を意識すると、終了タグの位置を間違えるようなミスも見つけやすくなります。
HTML初心者が覚えておきたい基本的な注意点
HTMLの基本構造で初心者が間違えやすいのが、headタグとbodyタグの順番です。基本的にはhtmlタグの中でheadタグを先に書き、その後にbodyタグを書きます。また、画面に表示したい見出しや文章をheadタグへ書かないように注意しましょう。表示する内容はbodyタグにまとめます。
タグの開始と終了の関係にも注意が必要です。あるタグの中に別のタグを入れた場合は、内側にあるタグから順番に閉じていきます。例えばbodyタグの中にmainタグがあり、その中にarticleタグがある場合は、article、main、bodyという順番で終了します。箱を開いて、その中にさらに小さな箱を開いた場合、最後に開いた小さな箱から閉じていくと考えると分かりやすくなります。
また、HTMLコードを書くときはインデントを利用すると、どのタグがどのタグの中にあるのかを視覚的に確認できます。ブラウザが表示できれば書き方は何でもよいと考えるのではなく、人が読んでも構造を理解しやすいHTMLコードを意識することが大切です。
HTML文書の基本は、DOCTYPE宣言、htmlタグ、headタグ、bodyタグという大きな構造から始まります。そのうえでheadタグにはページの設定情報を記述し、bodyタグには実際のWebページの内容を記述します。この基本的な役割を理解しておけば、HTMLファイルを見たときにも、どこが設定部分で、どこからが画面に表示する本文なのかを判断できるようになります。
HTML初心者にとって、htmlタグ、headタグ、bodyタグは最初に覚える基本的な文書構造です。個別のHTMLタグだけを暗記するのではなく、Webページ全体が大きな入れ子構造になっていることを意識すると理解しやすくなります。htmlタグが文書全体を包み、headタグがページの設定を担当し、bodyタグが訪問者に見せる内容を担当するという三つの役割を整理して覚えておきましょう。
生徒
「htmlタグ、headタグ、bodyタグは、それぞれ役割が違うことが分かりました。」
先生
「htmlタグはHTML文書全体を囲み、headタグはページの設定情報、bodyタグはブラウザに表示する内容を担当します。この三つを区別することがHTMLの基本です。」
生徒
「headタグには、どんなものを書けばいいですか？」
先生
「文字コードの設定、ページタイトル、ページの説明、画面幅の設定などを書きます。CSSファイルなどを読み込む設定もheadタグに記述できます。」
生徒
「h1タグやpタグ、画像などはbodyタグですね。」
先生
「その通りです。訪問者に見せたい見出し、文章、画像、リンク、表、リストなどはbodyタグの中に配置します。」
生徒
「htmlタグの中にheadタグとbodyタグが入っている形を入れ子構造というんですよね。」
先生
「はい。さらにbodyタグの中にもmainタグやarticleタグなどが入るので、HTMLでは入れ子構造を理解することがとても大切です。」
生徒
「迷ったら、設定ならhead、画面に見せる内容ならbodyと考えればよさそうですね。」
先生
「その考え方で整理すると分かりやすいです。htmlタグが文書全体、headタグが設定、bodyタグが本文という基本を押さえておけば、HTMLファイル全体の構造を理解しやすくなります。」
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
HTMLのhtmlタグとheadタグとbodyタグの違いが初心者でも分かるように知りたいです
htmlタグはHTML文書全体を囲むタグで、Webページ全体の土台となる要素です。headタグはページタイトルやmetaタグ、CSSやJavaScriptの読み込みなど設定情報を書く場所です。bodyタグはブラウザに表示される本文を書く場所で、見出しや画像やリンクなどを配置します。HTML初心者は、この3つの役割を覚えることでHTMLの基本構造を理解しやすくなります。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
