HTML文書の基本構造と必須タグを徹底解説 【2026年版・初心者向け】

/ コラム / By

この記事でわかること：

✅ HTMLファイルの基本構造（5つの必須パーツ）
✅ DOCTYPE・html・head・body それぞれの役割
✅ headに書くべきmeta・title・linkタグの意味
✅ 文字化けを防ぐcharset設定の理由
✅ コピペで使えるHTMLテンプレート

📖 読了時間：約9分 ／ 対象：HTML初心者・学習中の方
📌 前の記事：#01 HTMLとは何か？Webページの仕組みを完全初心者向けに解説

前回の記事でHTMLとは何かを学びました。今回はいよいよ実際にHTMLファイルを書くための「基本構造」を徹底解説します。

「なんとなくコードを書いているけど、タグの意味がわかっていない」という方も多いはず。それぞれのタグになぜ必要なのか、省略するとどうなるのかまで含めて、丁寧に解説していきます。

HTMLの基本構造とは？全体像を図解で理解しよう

どんなWebページも、HTMLファイルは以下の5つのパーツで構成されています。

<!DOCTYPE html>　← ①ブラウザへの宣言
<html lang=”ja”>　← ②HTMLファイル全体の親
<head>　← ③見えない設定情報
<meta charset=”UTF-8″>
<meta name=”viewport” …>
<title>ページタイトル</title>
<link rel=”stylesheet” …>
<body>　← ④画面に表示される内容
<h1>見出し</h1>
<p>本文</p>
<img src=”…”>
<a href=”…”>リンク</a>

▲ HTMLファイルの基本構造。headは「設定情報」、bodyは「表示内容」を担う。

この構造はすべてのHTMLファイルで共通です。まるで「お決まりの型」のようなもので、これを覚えればどんなWebページも書き始めることができます。

📋 コピペで使えるHTMLテンプレート

以下のコードをそのままコピーして index.html として保存すれば、すぐ使えます。

index.html — HTMLの基本テンプレート（完全版）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ページのタイトルをここに書く</title> <meta name="description" content="ページの説明文（120文字程度）"> <link rel="stylesheet" href="style.css"> </head> <body> <!-- ここに表示したい内容を書く --> <h1>見出し（ページに1つだけ）</h1> <p>本文のテキストをここに書きます。</p> </body> </html>

① <!DOCTYPE html>とは？省略するとどうなるか

<!DOCTYPE html>は、HTMLファイルの必ず1行目に書く宣言文です。

これは「このファイルはHTML5という最新の仕様で書かれています」とブラウザに伝えるための記述です。タグではなく「宣言（Declaration）」と呼ばれます。

項目内容
正式名称Document Type Declaration（文書型宣言）
書く場所HTMLファイルの1行目（必須）
役割ブラウザに「HTML5で書かれている」と伝える
省略した場合ブラウザが「互換モード（Quirks Mode）」で動作し、CSSが意図通りに効かなくなることがある
⚠️ 昔のHTMLとの違い

HTML4の時代はDOCTYPEが非常に長い記述でしたが、HTML5からは <!DOCTYPE html> のみのシンプルな形になりました。現在はこれ一択でOKです。

② <html lang=”ja”>とは？lang属性の重要性

<html>タグはHTMLファイル全体を囲む「親タグ」です。すべてのHTMLコンテンツはこのタグの中に書きます。

重要なのは lang 属性です。

lang属性の書き方
<!-- 日本語サイトの場合 --> <html lang="ja"> <!-- 英語サイトの場合 --> <html lang="en">
lang属性の効果説明
🔍 SEO効果検索エンジンがページの言語を正しく認識し、適切な地域・言語に検索結果を表示できる
♿ アクセシビリティスクリーンリーダー（視覚障害者向けツール）が正しい言語で読み上げてくれる
🌐 翻訳ツールブラウザの自動翻訳機能が適切に動作する
✅ ベストプラクティス

日本語サイトには必ず lang="ja" を記述しましょう。たった1つの属性ですがSEO・アクセシビリティ両方に効果があります。

③ <head>タグとは？書くべき内容を全部解説

<head>タグは、画面には表示されないブラウザへの設定情報を書く場所です。「見えない情報」と覚えてください。

headに書く主要タグ一覧

タグ役割必須度
<meta charset="UTF-8"> 文字コードをUTF-8に設定。日本語の文字化け防止に必須。 ⭐ 必須
<meta name="viewport" ...> スマートフォンで正しく表示するために必須。省略するとスマホで崩れる。 ⭐ 必須
<title> ブラウザのタブ・検索結果に表示されるタイトル。SEOに直結する。 ⭐ 必須
<meta name="description"> 検索結果に表示される説明文（メタディスクリプション）。120文字以内が目安。 📌 推奨
<link rel="stylesheet"> 外部CSSファイルを読み込む。デザインを分離して管理するために使う。 📌 推奨
<link rel="icon"> ブラウザのタブに表示されるファビコン（小さいアイコン）を設定する。 💡 任意

charsetをUTF-8にする理由

charsetとは文字コード（文字の符号化方式）のことです。省略または別の文字コードを指定すると、日本語が文字化けして読めなくなります。

❌ charset未指定（文字化けする）
<head> <!-- charsetなし --> <title>こんにちは</title> </head> <!-- 表示結果 --> ã?"ã‚"ã?«ã?¡ã?¯
✅ charset指定あり（正しく表示）
<head> <meta charset="UTF-8"> <title>こんにちは</title> </head> <!-- 表示結果 --> こんにちは ✓

viewportメタタグはなぜ必要か

viewportメタタグはスマートフォンでの表示を制御します。省略するとスマホで開いたとき、ページ全体が縮小されて文字が極端に小さくなります。

viewportの正しい書き方
<meta name="viewport" content="width=device-width, initial-scale=1.0"> width=device-width → 画面幅をデバイスの幅に合わせる initial-scale=1.0 → 初期ズーム倍率を1倍（等倍）にする

titleタグはSEOに直結する

<title>タグに書いた内容は、Googleの検索結果に表示されるページタイトルになります。

💡 SEOに効くtitleの書き方
  • 文字数は32文字前後が目安（長すぎると検索結果で切れる）
  • ページの内容を表すキーワードを含める
  • 各ページで重複しないタイトルをつける
  • サイト名を末尾に入れるのが一般的（例：「HTMLとは | サイト名」）

④ <body>タグとは？画面に表示される内容をすべてここに書く

<body>タグは、ブラウザの画面に実際に表示されるすべての内容を書く場所です。

見出し・文章・画像・リンク・ボタンなど、ユーザーが目にするコンテンツはすべて <body> の中に書きます。

bodyに書く内容の例
<body> <!-- 見出し --> <h1>HTMLを学ぼう</h1> <!-- 段落 --> <p>HTMLはWebページの骨格を作る言語です。</p> <!-- 画像 --> <img src="image.jpg" alt="説明文"> <!-- リンク --> <a href="https://example.com">リンクテキスト</a> <!-- リスト --> <ul> <li>項目1</li> <li>項目2</li> </ul> </body>
❌ よくある間違い：bodyの外に書いてしまう

本文や画像を </html> の外に書いてしまうミスがよくあります。すべての表示コンテンツは必ず <body>〜</body> の中に書きましょう。

HTMLコメントの書き方と活用法

HTMLにはコメントという機能があります。コメントはブラウザに表示されない「メモ書き」です。コードの整理や説明に使います。

コメントの書き方
<!-- これはコメントです。ブラウザには表示されません --> <!-- ナビゲーションここから --> <nav> <a href="/">ホーム</a> </nav> <!-- ナビゲーションここまで --> <!-- TODO: あとで画像を追加する -->
✅ コメントを上手に使うコツ
  • 大きなセクションの始まりと終わりにコメントを入れるとコードが読みやすくなる
  • あとで修正が必要な箇所に <!-- TODO: --> とメモしておく
  • 本番公開時は不要なコメントを削除するとページが軽くなる

初心者がよくやるHTML構造のミスと直し方

ミス① タグの閉じ忘れ

❌ 閉じタグ忘れ
<p>1つ目の段落 <p>2つ目の段落 <!-- </p>が抜けている -->
✅ 正しい書き方
<p>1つ目の段落</p> <p>2つ目の段落</p>

ミス② headとbodyの混在

❌ headに本文を書いてしまう
<head> <title>タイトル</title> <h1>見出し</h1> <!-- NG --> </head>
✅ bodyに本文を書く
<head> <title>タイトル</title> </head> <body> <h1>見出し</h1> <!-- OK --> </body>

ミス③ DOCTYPEの位置が間違っている

❌ DOCTYPEが1行目にない
<!-- コメント --> <!DOCTYPE html> <!-- NG --> <html>
✅ 必ず1行目に書く
<!DOCTYPE html> <!-- 1行目 OK --> <html lang="ja"> <head>

よくある質問（FAQ）

DOCTYPE htmlとは何ですか？
DOCTYPEとは「このファイルはHTML5で書かれています」とブラウザに伝える宣言文です。HTMLファイルの必ず1行目に書く必要があります。省略するとブラウザが古い互換モードで動作し、CSSが意図通りに効かなくなることがあります。
headタグとbodyタグの違いは何ですか？
headタグはブラウザへの設定情報（タイトル・文字コード・CSSの読み込みなど）を書く場所で、画面には表示されません。bodyタグは実際に画面に表示される内容（見出し・文章・画像など）をすべて書く場所です。
charsetをUTF-8にしないとどうなりますか？
文字コードを正しく指定しないと、日本語が文字化けして読めなくなります。現在のWeb標準ではUTF-8が推奨されており、meta charset="UTF-8"をheadの最初に書くのが基本です。
viewportメタタグはなぜ必要ですか？
viewportメタタグはスマートフォンやタブレットでの表示を最適化するために必要です。省略するとスマホでページが縮小表示され、文字が極端に小さくなります。レスポンシブデザインの土台となる必須の記述です。
HTMLファイルの拡張子は何にすればいいですか？
HTMLファイルの拡張子は .html または .htm を使います。どちらでも動作しますが、現在は .html が一般的です。最初のファイルは慣習的に index.html という名前にします。

📌 まとめ：HTML基本構造のポイント

  • HTMLは <!DOCTYPE html>・<html>・<head>・<body> の4つが骨格
  • <!DOCTYPE html> は必ず1行目に書く
  • lang="ja" はSEO・アクセシビリティ両方に効く
  • <head>は「見えない設定情報」、<body>は「表示される内容」
  • meta charset="UTF-8" は日本語の文字化け防止に必須
  • meta name="viewport" はスマホ表示に必須
  • <title>はSEOに直結するため、キーワードを含めた32文字前後が目安
✦ 講座のご案内

「書き方は覚えた。でも
どう組み合わせるかわからない」

HTMLの基本構造を覚えても、実際のWebサイトをどう作るか迷う方は多いです。
講座ではHTML・CSS・JavaScriptを体系的に学び、
実際に動くWebページを作りながらスキルを身につけられます。

✅ 完全初心者歓迎 ✅ HTML/CSS/JS を体系的に学べる ✅ 実践的なWebデザインも習得 ✅ 現役エンジニアが直接サポート
🚀 講座の詳細をみる（無料）

※ リンク先は外部サイト（kitceo.com）に移動します