「自分でホームページを作ってみたい！」と HTML の学習を始めると、最初に英語ばかりのコードが並んでいて、「難しそう…」と感じる方も多いのではないでしょうか。
「<!DOCTYPE html>って何？」
「head と body は何が違うの？」
このように、見慣れないタグや記号を前に戸惑ってしまうのは珍しいことではありません。
しかし、どんなに複雑に見える企業サイトや有名な Webサイト でも、最初はすべて同じ基本構造から始まっています。
HTML には、ページを作成するための「お決まりの型」があり、この構造を理解することで HTMLコード の意味が少しずつ分かるようになります。
ここでは、HTML の基本構造である以下4つの要素について、初心者向けにわかりやすく解説します。
・<!DOCTYPE html>（DOCTYPE宣言）
・<html>タグ
・<head>タグ
・<body>タグ
まずは HTML 全体の仕組みを理解して、ホームページ制作の第一歩を踏み出してください。
【コピペOK】これがHTMLの基本構造（テンプレート）
HTMLファイルを作成するときは、まず以下のテンプレートを用意します。
この形が、すべてのホームページの土台になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私のホームページ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>初めてのHTMLページです。</p>
</body>
</html>一見すると複雑に見えるかもしれません。
しかし、このコードは大きく分けると、
・HTMLの種類を伝える部分
・ページ全体を囲む部分
・ページ設定を書く部分
・実際に表示する内容を書く部分
という4つの役割に分かれています。
HTMLの基本構造を構成する4つの要素
HTMLの基本構造は、主に以下4つの要素で作られています。
| 要素 | 役割 |
|---|---|
| DOCTYPE宣言 | HTML仕様をブラウザへ伝える |
| htmlタグ | HTML全体を囲む |
| headタグ | ページの設定情報を書く |
| bodyタグ | 画面に表示する内容を書く |
① <!DOCTYPE html>（DOCTYPE宣言）
DOCTYPE宣言の役割｜ブラウザにHTML仕様を伝える
<!DOCTYPE html> は、ブラウザに「このファイルは現行の HTML仕様 に従って記述されています」と伝える宣言です。
<!DOCTYPE html>この宣言があることで、ブラウザは HTML や CSS を標準的なルールで解釈し、ページを正しく表示できます。
DOCTYPE宣言を書く場所
DOCTYPE宣言は、HTMLファイルの一番最初に配置します。
<!DOCTYPE html>
<html lang="ja">「HTML5」との違い
以前は、<!DOCTYPE html> を「HTML5 で作成されたページであることを示す宣言」と説明されることが一般的でした。
しかし現在の HTML 仕様は、WHATWG が策定・更新している HTML Living Standard が標準となっています。
そのため現在では、
「現行のHTML仕様で正しく表示するための宣言」
と理解するのが正確です。
ただし、現在でも「HTML5対応のDOCTYPE」という表現が使われることがあります。
DOCTYPE宣言を書くときの注意点
・必ずHTMLファイルの先頭に書く
・1ページにつき1回だけ記述する
・現在は <!DOCTYPE html> だけ覚えればよい
② <html lang=”ja”> ～ </html>（html要素）
htmlタグの役割｜HTML全体を囲む一番外側の枠組み
htmlタグ は、HTML文書全体を囲む一番外側の枠組みです。
ホームページ全体を包み込む「一番大きな箱」のような役割があります。
HTMLファイル内に書く内容は、基本的にすべて <html> と </html> の中に入ります。
<html lang="ja">
</html>head や body も、この中に配置します。
lang=”ja”とは？ページの言語を指定する属性
lang=”ja” は、ページで使用している言語を示す設定です。
<html lang="ja">これは、
「このページは日本語で書かれています」
という意味になります。
lang属性を設定するメリット
ブラウザや翻訳機能が適切に動作しやすくなる
ページの言語情報をブラウザへ伝えることで、自動翻訳や読み上げ機能が適切に動作しやすくなります。
検索エンジンがページの言語を理解しやすくなる
検索エンジンへページの言語情報を伝える補助的な役割があります。
ただし、lang属性 だけで検索順位が決まるわけではありません。
日本語サイトでは lang=”ja” が一般的
日本語サイトでは、
<html lang="ja">を設定することが一般的です。
③ <head> ～ </head>（head要素）
headタグの役割｜ページの設定情報を書く場所
headタグには、ホームページの設定情報を記述します。
ここに書いた内容は、基本的に画面上には表示されません。
headタグに記述する主な情報
代表的なものには以下があります。
・ページタイトル（title）
・文字コード（meta charset）
・スマホ表示設定（viewport）
・CSSファイルの読み込み
・SEO関連情報
titleタグ
<head>
<title>HTMLの基本構造</title>
</head>ブラウザのタブや検索結果に表示されるタイトルです。
SEOにも重要なタグです。
metaタグ
charset
<head>
<meta charset="UTF-8">
</head>日本語が文字化けしないように設定します。
viewport
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>スマートフォンでも見やすく表示するための設定です。
④ <body> ～ </body>（body要素）
bodyタグの役割｜画面に表示される内容を書く場所
<body> タグには、ユーザーが実際に見るページ内容を記述します。
bodyタグに記述する主な内容
例えば以下のようなものです。
・見出し
・文章
・画像
・リンク
・ボタン
・表
ホームページとして表示される部分は、基本的に body の中に書きます。
HTMLは「箱の入れ子構造」でできている
HTML の基本構造を理解したら、次に必ず覚えておきたいのが「ネスト（入れ子構造）」という考え方です。
ネストとは、タグの中に別のタグを書くことを意味します。
HTML では、タグをただ横に並べるだけではなく、「大きな箱の中に、小さな箱を入れていく」という形でホームページを組み立てていきます。
この「箱の入れ子構造」を理解すると、HTMLコード がぐっと読みやすくなり、自分でホームページを作成するときにも迷いにくくなります。
ネスト（入れ子構造）とは？
HTML は、1つのタグだけで作られているわけではありません。
例えば、ホームページ全体を表す htmlタグ の中には、ページの設定情報を書く headタグ と、実際に画面へ表示する内容を書く bodyタグ があります。
さらに、bodyタグ の中には見出しや文章、画像、リンクなどのタグを書いていきます。
このように、タグの中へ別のタグを書いていく構造をネスト（入れ子構造）と呼びます。
マトリョーシカや収納ボックスのように、「大きな箱の中へ小さな箱を入れていく」というイメージを持つと理解しやすくなります。
HTMLの基本構造を図で見てみよう
言葉だけではイメージしにくいため、HTML全体の構造を図で見てみましょう。
html（一番外側）
├── head（ページの設定情報）
│ └── タイトル・文字コードなど
│
└── body（画面に表示される内容）
├── h1（見出し）
├── p（文章）
└── ul（箇条書き）
├── li（リスト項目）
└── li（リスト項目）一番外側には htmlタグ があり、その中に headタグ と bodyタグ があります。
さらに、bodyタグ の中へ見出しや文章、画像、リストなどを追加することで、1つのホームページが完成します。
HTML は、このようにタグを入れ子にしながら、パズルを組み立てるようにページを作っていく言語です。
実際のコードで確認してみよう
本文の中へ見出しと文章を書く場合は、次のように記述します。
<body>
<h1>ホームページ制作</h1>
<p>HTMLを学びましょう。</p>
</body>このコードでは、bodyタグ の中に h1タグ と pタグ が入っています。
つまり、大きな bodyタグ の中に、小さな h1タグ と pタグ が入っている状態です。これがネスト（入れ子構造）の基本です。
なお、コードでは内側のタグを少し右へ下げて記述しています。これをインデントと呼びます。
インデントは必須ではありませんが、コードの構造が分かりやすくなるため、多くの Web制作 の現場でも採用されています。
リストもネスト（入れ子構造）で作られる
ネストは見出しや文章だけでなく、箇条書きを作るときにも使われます。
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>このコードでは、箇条書き全体を表す ulタグ の中に、リスト項目を表す liタグ が2つ入っています。
このように、HTML ではさまざまなタグを入れ子にしながらページ全体を組み立てています。
「大きな要素の中へ小さな要素を書いていく」というイメージを持つことが、HTML を理解する近道です。
初心者が間違えやすいポイント
HTML を書き始めたばかりの頃は、誰でも一度は同じようなミスを経験します。
ここでは、初心者が特に間違えやすい3つのポイントを紹介します。
タグを閉じ忘れる
HTML では、開始タグと終了タグをセットで使用します。
間違った例
<h1>タイトル正しい例
<h1>タイトル</h1>終了タグを書き忘れると、ブラウザが HTML の構造を正しく解釈できず、レイアウトや文字サイズが崩れる原因になります。
bodyタグの外へ書いてしまう
ホームページに表示したい内容は、必ず bodyタグ の中へ記述します。
間違った例
<body>
</body>
<p>こんにちは！</p>正しい例
<body>
<p>こんにちは！</p>
</body>見出しや文章、画像、リンクなど、画面へ表示する内容はすべて bodyタグ の中へ記述しましょう。
headタグに本文を書いてしまう
headタグ にはページタイトルや文字コードなどの設定情報を記述します。
一方、読者へ表示する文章や画像は bodyタグ へ記述します。
間違った例
<head>
<p>ホームページへようこそ！</p>
</head>正しい例
<head>
<title>ホームページ制作</title>
</head>
<body>
<p>ホームページへようこそ！</p>
</body>head はページの設定情報を書く場所、body はホームページに表示する内容を書く場所です。
この役割の違いを理解することで、初心者によくあるミスを防ぐことができます。
