HTMLの基本構造とは？
どんなに複雑なWebページも、HTMLの基本構造は共通しています。この構造を理解することが、Web制作の第一歩です。
HTMLファイルは必ず以下の4つの要素で構成されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- メタ情報 -->
</head>
<body>
<!-- 表示コンテンツ -->
</body>
</html>
それぞれの役割を詳しく見ていきましょう。
1. <!DOCTYPE html> — DOCTYPE宣言
<!DOCTYPE html>
役割
「このファイルはHTML5で書かれています」とブラウザに伝えるための宣言文です。タグではなく宣言なので、終了タグはありません。
必ず書く理由
DOCTYPE宣言がないと、ブラウザが「互換モード（Quirks Mode）」で動作します。互換モードでは、CSSのレイアウトが意図どおりに表示されないなどの問題が起きます。
すべてのHTMLファイルの1行目に必ず書きましょう。
ポイント:
<!DOCTYPE html>の大文字・小文字はどちらでも動作しますが、慣習的に大文字で書くことが多いです。
2. <html> — HTML文書のルート要素
<html lang="ja">
...
</html>
役割
HTML文書全体を囲むルート（root＝根）要素です。すべての内容はこのタグの中に書きます。
lang 属性
lang="ja" は言語コードの指定です。
| 値 | 言語 |
|---|---|
ja |
日本語 |
en |
英語 |
zh |
中国語 |
lang属性が重要な理由
– スクリーンリーダー（視覚障がい者向け読み上げツール）が正しい言語で読み上げる
– 検索エンジンがページの対象言語を認識する
– ブラウザの自動翻訳機能が正確に動作する
日本語サイトでは必ず lang="ja" を設定しましょう。
3. <head> — メタ情報の格納エリア
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ページの説明文">
<title>ページタイトル | サイト名</title>
<link rel="stylesheet" href="style.css">
</head>
役割
ブラウザに伝える情報を書くエリアです。<head> 内の内容は画面に表示されません。
headに書く主な要素
<meta charset="UTF-8">
文字コードの指定です。UTF-8 を指定することで日本語が正しく表示されます。必ず <head> の最初のほうに書きます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
スマートフォンでの表示を最適化するビューポート設定です。これがないとスマホでページが縮小表示されます。
<title>ページタイトル</title>
ブラウザのタブ・Googleの検索結果に表示されるタイトルです。SEOに直結するため、キーワードを含めた30〜35文字が理想です。
<meta name="description" content="説明文">
Googleの検索結果に表示されるページの説明文（メタディスクリプション）です。80〜90文字が目安です。直接的なランキング要因ではありませんが、クリック率（CTR）に影響します。
<link rel="stylesheet" href="style.css">
外部CSSファイルの読み込みです。HTMLとCSSを別ファイルに分けて管理するのが一般的です。
4. <body> — 表示コンテンツのエリア
<body>
<header>
<h1>サイト名</h1>
<nav>...</nav>
</header>
<main>
<article>
<h2>記事タイトル</h2>
<p>本文テキスト</p>
</article>
</main>
<footer>
<p>© 2026 サイト名</p>
</footer>
</body>
役割
ブラウザに実際に表示されるすべての内容をここに書きます。テキスト・画像・リンク・フォームなど、ユーザーが見るコンテンツはすべて <body> 内です。
bodyの中のセマンティック構造
HTML5以降、ページ内の役割に応じたセマンティックタグを使うことが推奨されています。
| タグ | 役割 |
|---|---|
<header> |
ページ上部（ロゴ・ナビゲーション） |
<nav> |
ナビゲーションリンク |
<main> |
ページのメインコンテンツ（1ページに1つ） |
<article> |
独立したコンテンツ（記事・投稿） |
<section> |
テーマでまとまったセクション |
<aside> |
補足情報・サイドバー |
<footer> |
ページ下部（コピーライト・サイトマップ） |
HTMLの基本構造テンプレート
実際の制作で使えるテンプレートです。コピーして活用してください。
<!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="ここにページの説明文を書く（80〜90文字）">
<title>ページタイトル | サイト名</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-inner">
<a href="/" class="logo">サイト名</a>
<nav>
<ul>
<li><a href="/about/">サービスについて</a></li>
<li><a href="/blog/">ブログ</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
<main>
<article>
<h1>ページのメインタイトル</h1>
<p>ここに本文を書きます。</p>
</article>
</main>
<footer>
<p>© 2026 サイト名. All rights reserved.</p>
</footer>
</body>
</html>
よくある構造の間違い
bodyの外にコンテンツを書く
<!-- × -->
<html>
<head>...</head>
<body>...</body>
<p>これはbodyの外</p> ← 無効
</html>
<!-- ○ -->
<body>
<p>コンテンツはすべてbody内に</p>
</body>
headとbodyを入れ子にする
<!-- × -->
<head>
<body>...</body> ← bodyをheadの中に入れてはNG
</head>
<!-- ○ headとbodyは並列 -->
<html>
<head>...</head>
<body>...</body>
</html>
まとめ
HTMLの基本構造は4つの要素で成り立っています。
| 要素 | 役割 |
|---|---|
<!DOCTYPE html> |
HTML5文書の宣言 |
<html lang="ja"> |
文書全体のルート・言語指定 |
<head> |
ブラウザへのメタ情報（title・charset・viewport・CSS） |
<body> |
画面に表示されるすべてのコンテンツ |
この構造を覚えたら、次は各タグの詳しい使い方をHTMLタグ一覧で確認してみましょう。
