HTMLの基本はこの「箱」の考え方だけ｜独学で最初に覚えるタグ10選と学ぶ順番

HTML CSS 独学 2026年4月 WEBSAURS
「HTMLって、タグが多すぎて何から覚えればいいかわからない……」という悩み、わたしも最初はそうでした。 でも、最初に覚えるべきタグは10個だけ。そしてその10個を理解するための考え方も、たった一つです。 それが「箱の入れ子」という概念。Webデザイナーとしての実体験をもとに、初心者がつまずかない順番でお伝えします。

📋 目次

  1. Webサイトの構造は「箱の入れ子」で全部わかる
    1. ページ全体が箱でできている｜HTMLの構造を図で理解する
    2. 箱の中に箱を入れる感覚がわかれば、レイアウトは怖くない
  2. HTML独学で最初に覚えるべきタグはこの10個だけ
    1. 構造を作る5つのタグ｜まずここだけ覚えれば骨格が作れる
    2. 意味を持たせる5つのタグ｜SEOにも効く、知っておくべき基本
  3. HTMLの「箱」とタグ10選を押さえたら次にやること
    1. CSSとセットで学ぶと「箱」の理解が一気に深まる
    2. 独学の順番はHTML→CSS→実際に作る、この流れが最短

① Webサイトの構造は「箱の入れ子」で全部わかる

ページ全体が箱でできている｜HTMLの構造を図で理解する

突然ですが、HTMLをコードとして見ると難しく感じませんか？

でも「箱の積み重ね」として見ると、急にシンプルになります。

Webページって、実はこんな構造になっています。

┌─────────────────────────────┐
│         ページ全体（html）        │
│                               │
│  ┌────────────────────────┐  │
│  │     ヘッダー（header）      │  │
│  └────────────────────────┘  │
│                               │
│  ┌────────────────────────┐  │
│  │      本文エリア（main）      │  │
│  │                          │  │
│  │  ┌──────────────────┐  │  │
│  │  │  記事（article）      │  │  │
│  │  │                    │  │  │
│  │  │  ┌────────────┐  │  │  │
│  │  │  │  見出し（h1）  │  │  │  │
│  │  │  └────────────┘  │  │  │
│  │  │  ┌────────────┐  │  │  │
│  │  │  │  段落（p）    │  │  │  │
│  │  │  └────────────┘  │  │  │
│  │  └──────────────────┘  │  │
│  └────────────────────────┘  │
│                               │
│  ┌────────────────────────┐  │
│  │     フッター（footer）      │  │
│  └────────────────────────┘  │
└─────────────────────────────┘

全体が一つの大きな箱で、その中にヘッダー・メインエリア・フッターという箱が入っている。

さらにメインエリアの中には記事という箱があって、その中に見出しや段落という小さな箱がある。

これがHTMLの構造の全てです。

「タグ」というのは、その箱の「種類」を示すラベルのようなもの。

たとえば <p>ここが段落です</p> と書いたら、「この箱は段落ですよ」とブラウザに伝えているわけです。

HTMLの基本的な書き方のルール

箱には必ず「開始タグ」と「終了タグ」があります。

<p>ここが箱の中身です</p>
  ↑ 開始タグ         ↑ 終了タグ（/ がつく）

この「開始タグと終了タグで囲む」というルールさえ覚えておけば、HTMLの記法の9割は理解できます。

最初はこれだけ頭に入れておいてください。

箱の中に箱を入れる感覚がわかれば、レイアウトは怖くない

わたしが初めてHTMLを書いたとき、一番困ったのはレイアウトでした。

「この要素をここに配置したいのに、なんでこんなところに表示されるんだ……」って、本当に苦しかった。

でも、あるとき気づいたんです。

「レイアウトが崩れるのは、箱の入れ子の順番を間違えているからだ」と。

「入れ子」のルールを体感するための例

たとえば、こんなHTMLを見てください。

<div>
  <h2>見出しです</h2>
  <p>本文がここに入ります。</p>
</div>

<div> という箱の中に、<h2> と <p> という箱が入っています。

入れ子になっているものを「親要素・子要素」と呼びます。

親（div）がどこに置かれるかで、子（h2やp）の表示位置も決まる。

これが体感としてわかった瞬間、CSSで装飾するときの見通しも一気に良くなりました。

「箱の中に箱を入れる」という感覚、最初はふんわりでいいです。

コードを書いていくうちに、じわじわと腑に落ちてきます。

よくある失敗：箱をちゃんと閉じ忘れる問題

初心者のころ、わたしは終了タグを書き忘れてページが崩れることが多かったです。

❌ 間違い例
<div>
  <p>段落です
</div>    ← </p> を閉じ忘れ！

✅ 正しい例
<div>
  <p>段落です</p>
</div>

この「閉じ忘れ」が原因で、レイアウトが謎の崩れ方をするんです。

最初のうちは、一つ開いたら必ず閉じる、この習慣を徹底するだけで挫折率がかなり下がります。

② HTML独学で最初に覚えるべきタグはこの10個だけ

「全部のタグを覚えなきゃ」という思い込みが、独学の最大の敵です。

断言しますが、最初に覚えるべきタグは10個で十分。

これだけで、シンプルなWebページの骨格は作れます。

構造を作る5つのタグ｜まずここだけ覚えれば骨格が作れる

まず最初に覚えてほしいのは、「ページの骨格を作る」タグです。

内容（テキストや画像）を入れる前に、まずこの5つでページの器を作るイメージです。

① <html>｜ページ全体を包む大きな箱

<html lang="ja">
  ※ページ全体のコンテンツはここに入る
</html>

HTMLファイルの一番外側の箱です。

「このファイルはHTMLですよ」とブラウザに宣言する役割を持ちます。

lang="ja" は「このページは日本語です」という意味。

SEO的にも大切な属性なので、必ず書く習慣をつけてください。

情報源：[MDN Web Docs - html要素]

② <head>｜ページの設定情報を入れる箱

<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>

<head> の中身は、ブラウザには表示されません。

でも「ページの文字コード」「タイトル」「CSSの読み込み」など、ページを動かすための設定がここに入ります。

特に <title> はGoogleの検索結果に表示されるので、SEO上とても重要です。

情報源：[MDN Web Docs - head要素]

③ <body>｜ブラウザに表示される内容を入れる箱

<body>
  ※ここに書いたものがブラウザに表示される
</body>

「ユーザーが見るもの」はすべてここに書きます。

テキスト、画像、リンク、フォーム……全部 <body> の中に入ります。

HTMLを書くときの作業の大半は、この <body> の中身を埋めていく作業です。

④ <div>｜汎用の箱（レイアウトの要）

<div class="card">
  <p>カードの中身です</p>
</div>

<div> は「何でもない箱」です。

意味を持たない代わりに、CSSと組み合わせてレイアウトを作るときに大活躍します。

わたしの実務でも、一番使う頻度が高いタグのひとつです。

最初は「なんのためにあるのか？」と思うかもしれませんが、CSSを学び始めると「なるほどこれのためか！」と腑に落ちます。

⑤ <header> / <main> / <footer>｜ページの区画を示す箱

<header>ロゴやナビゲーション</header>
<main>メインコンテンツ</main>
<footer>著作権情報など</footer>

これらは「セマンティックタグ」と呼ばれます。

<div> と同じく箱ですが、それぞれ意味を持っています。

Googleのクローラーはこのタグを読んで「ここがヘッダーだ」「ここが本文だ」と判断するので、SEOにも直結します。

<div> で全部作ることも技術的にはできますが、これらのタグを使う方がGoogleに評価されやすい構造になります。

情報源：[Google 検索セントラル - HTMLページの基礎]

意味を持たせる5つのタグ｜SEOにも効く、知っておくべき基本

次は、コンテンツそのものを書くときに使うタグです。

これらは「内容の意味」を伝えるタグで、SEOにも直接関わります。

⑥ <h1>〜<h6>｜見出しを作るタグ

<h1>ページのメインタイトル（1ページに1つだけ）</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>

<h1> が一番大きな見出しで、数字が増えるほど小さくなります。

Googleはこの見出し構造を「ページのアウトライン」として読みます。

なのでキーワードを自然な形で見出しに含めることが、SEO上の重要な施策になります。

注意点として、<h1> は1ページに1つだけが原則です。

わたしも最初、「大きく目立たせたいから」という理由で複数の <h1> を使っていましたが、これはSEO的にNGだと後から知りました。

情報源：[Google 検索セントラル - 見出しタグの使い方]

⑦ <p>｜段落（テキスト本文）を作るタグ

<p>これが段落です。文章をここに書きます。</p>

「paragraph（段落）」の頭文字から来ています。

文章を書くときは基本的にこの <p> タグの中に入れます。

<body> の中にそのままテキストを書いても表示はされますが、意味のある構造にするために <p> を使うことが基本です。

⑧ <a>｜リンクを作るタグ

<a href="https://example.com">リンクのテキスト</a>

「anchor（錨）」の頭文字から来ています。

href="" の中にリンク先のURLを書きます。

内部リンク（同じサイト内のページへのリンク）はSEO的に重要で、Googleがサイト全体を認識する助けになります。

Webページの基本的な機能の一つなので、早いうちに使い方を覚えておくと良いです。

⑨ <img>｜画像を表示するタグ

<img src="photo.jpg" alt="写真の説明文">

終了タグが不要な「空要素」です。

src="" に画像ファイルのパスを、alt="" に画像の説明テキストを入れます。

この alt 属性（代替テキスト）はGoogleが画像の内容を理解するために使うので、省略せずに書くことがSEO対策になります。

アクセシビリティ（視覚障害のある方がスクリーンリーダーで読む場合）にも関わるので、必ず書く習慣をつけてください。

情報源：[Google 検索セントラル - 画像のベストプラクティス]

⑩ <ul> / <ol> / <li>｜リストを作るタグ

<!-- 順序なしリスト（箇条書き） -->
<ul>
  <li>りんご</li>
  <li>みかん</li>
</ul>

<!-- 順序ありリスト（番号つき） -->
<ol>
  <li>まず水を沸かす</li>
  <li>次に野菜を切る</li>
</ol>

<ul> は「unordered list（順序なしリスト）」、<ol> は「ordered list（順序ありリスト）」です。

リスト形式のコンテンツはGoogleに「整理された情報」として評価されやすく、強調スニペット（検索結果の上部に表示される枠）に選ばれることもあります。

手順や比較など、「並べて見せたい情報」にはぜひ活用してください。

【まとめ】最初に覚えるタグ10選 一覧

タグ 役割 SEO関連
<html> ページ全体の箱 lang属性で言語を明示
<head> ページ設定情報 titleタグなどを格納
<body> 表示コンテンツ全体 コンテンツの器
<div> 汎用の箱（レイアウト用） CSS連携で構造整理
<header> / <main> / <footer> 区画の明示 セマンティックでSEO効果あり
<h1>〜<h6> 見出し キーワード配置に直結
<p> 段落・本文テキスト テキストコンテンツの基本
<a> リンク 内部・外部リンク構造
<img> 画像表示 alt属性でSEO・アクセシビリティ
<ul> / <ol> / <li> リスト 強調スニペット獲得に有効

③ HTMLの「箱」とタグ10選を押さえたら次にやること【まとめ】

CSSとセットで学ぶと「箱」の理解が一気に深まる

HTMLだけを学んでいると、「これで何ができるの？」という感覚がずっとつきまといます。

正直、HTMLだけで作ったページはデザインがまったくない、殺風景なものになります。

そこで登場するのが CSS（スタイルシート）です。

HTMLが「箱を作る言語」だとすれば、CSSは「箱の色・サイズ・配置を決める言語」。

この2つはセットで学ぶことで、初めて「Webページらしいもの」が完成します。

CSSで「箱の意味」がさらにわかる

たとえば、こんなCSSを書いたとします。

div {
  width: 300px;        /* 箱の横幅 */
  height: 200px;       /* 箱の高さ */
  background: #f0f0f0; /* 箱の背景色 */
  padding: 20px;       /* 箱の内側の余白 */
  margin: 10px;        /* 箱の外側の余白 */
}

HTMLで「箱を作る」→CSSで「箱を整える」という流れが体感できると、「ああ、HTMLはこういうものか」と理解がぐっと深まります。

わたしも、CSSを触り始めてから初めてHTMLの構造の意味がわかった気がしました。

「HTML単体で全部わかろう」とするより、CSSとセットで学ぶ方が断然早いです。

特に最初に覚えたいCSSのプロパティ3つ

CSSの全体像は後でいいので、まずこの3つだけ覚えてください。

この3つをHTMLと組み合わせて動かすだけで、「自分でページを変えられた！」という成功体験が得られます。

その感覚が、学習を続けるいちばんの原動力になります。

独学の順番はHTML→CSS→実際に作る、この流れが最短

わたしが独学でWebデザインを学んだ経験からいうと、「学ぶ順番」は本当に大切です。

順番を間違えると、わかったようでわからない状態がずっと続いて、どこかで詰まります。

おすすめの学習ステップ

  1. STEP1：HTMLの基本構造と今回紹介した10タグを覚える（本記事の内容）
  2. STEP2：CSSで見た目を整える（色・サイズ・余白）
  3. STEP3：HTMLとCSSを使って、簡単な1ページサイトを作る
  4. STEP4：FlexboxやGridレイアウトでより複雑なレイアウトに挑戦
  5. STEP5：JavaScriptで動きをつける（この段階ではまだ先でOK）

STEP3の「実際に作る」が最も大事です。

知識をインプットするだけでは、いつまでたっても「わかった気がする」止まりです。

手を動かして、自分で作ったものが画面に表示されたときの感動は、本当に格別です。

わたし自身、最初に作った1ページサイトが完成したとき、家の中で一人でガッツポーズしていました（笑）

「完璧に理解してから次へ」は罠です

独学でよくある失敗が、「このタグを完璧に理解してから次へ進もう」という考え方です。

これをやると、永遠に次へ進めません。

HTMLもCSSも、「なんとなくわかった」くらいで手を動かし始める方が、結果的に早く理解できます。

「7割理解したら次へ進む」。これが独学の鉄則です。

📌 この記事のまとめ

最後に：「難しい」と感じたときに思い出してほしいこと

HTMLを学び始めると、必ず「わからない」と感じる瞬間があります。

でも、それは頭が悪いのではありません。

「初めて見るもの」に直面しているだけです。

わたしも何度も壁にぶつかりながら、少しずつできることが増えていきました。

箱の入れ子という考え方を軸に、10個のタグを少しずつ使っていく。

それだけで、HTMLへの理解は確実に深まっていきます。

まず今日、テキストエディタを開いて <html> から書いてみてください。

その一歩が、すべての始まりです。

関連記事

🌐

Webデザイン

Webデザイン独学ロードマップ｜初心者の5ステップ

何から始めるか、本の選び方、資格、ポートフォリオまで経験をもとに正直に紹介します。
💻

Webデザイン

WordPressとHTMLサイト、どっちでサイトを作るべきか

両方を使ってきたWebデザイナーが、用途・スキル別にどっちがいいかを正直に解説します。

【参考情報源】

・MDN Web Docs - HTML要素リファレンス（https://developer.mozilla.org/ja/docs/Web/HTML/Element）

・Google 検索セントラル - HTMLページの基礎（https://developers.google.com/search/docs/fundamentals/creating-helpful-content）

・Google 検索セントラル - 画像のベストプラクティス（https://developers.google.com/search/docs/appearance/google-images）