「プログラミング学習を始めたいけど、HTMLのタグが多すぎて覚えきれない…」
そんな悩みを持っていませんか？
実は、プロのエンジニアも全てのタグを暗記しているわけではありません。
大切なのは、「Webサイトの骨組みを作るための、たった5つの基本パターン」を理解することです。
この記事では、初心者が最短で「Webサイトを作れた！」という実感を味わえる、HTML学習の黄金ルートを解説します。難しい専門用語は使わず、日常の「例え話」で解説するので、リラックスして読み進めてくださいね。
ステップ1：魔法の定型文と「サンドイッチの法則」
まずは、HTMLを書くための準備です。VS Codeなどのエディタを使っているなら、「！」と入力して「Tabキー」を押してみてください。
一瞬でズラッと英語のコードが出てきませんでしたか？
これがWebサイトの雛形です。プロはいちいち手書きしません。便利な機能はどんどん使いましょう。
ここで覚えるべきルールはたった1つ。「サンドイッチの法則」です。
<タグ名> ここに中身を入れる </タグ名>HTMLは基本的に、<開始タグ> と </終了タグ> で中身を挟みます。具材をパンで挟むイメージですね。
そして、このサンドイッチを置く場所は <body>（ボディ）の中です。
- head： 脳みそ（設定などを書く場所。画面には出ない）
- body： 体（画面に表示される場所）
これから書くコードは、全てこの <body>〜</body> の間に書いていきます！
ステップ2：文字を表示して「見出し」をつける
画面に文字を出してみましょう。
ただ文字を書くだけでなく、「これは見出しだよ」「これは文章だよ」とコンピュータに教えてあげます。
- h1タグ（Heading）： 大見出し。本のタイトルです。
- pタグ（Paragraph）： 段落。普通の文章です。
<h1>私のプロフィール</h1>
<p>こんにちは！今日からWebクリエイターの仲間入りです。</p>これをブラウザで見ると、h1 の文字はドーンと大きく太く表示されますよね？
「文字を大きくしたいから h1 を使う」のではなく、「ここが一番重要だから h1 を使う」という意識がポイントです。
ステップ3：世界とつながる「リンク」と「画像」
文字だけでは寂しいので、Webサイトらしさを出していきましょう。
1. リンク（aタグ）
別のページへ移動するためのタグです。「Anchor（船の錨）」の略で、情報の海に錨を投げて繋ぐイメージです。
<a href="https://google.com">Googleへジャンプ！</a>href（エイチレフ）という場所に、行きたい場所の住所（URL）を書きます。これはいわば「どこでもドア」を作るようなものです。
2. 画像（imgタグ）
画像を表示します。このタグは例外で、中身を挟まないので「終了タグ（パンの裏側）」がいりません。
<img src="画像のURL" alt="写真の説明">src（ソース）に画像の場所を指定すればOKです！
記入例↓↓
<img src=”http://yzumming.com/wp-content/uploads/2026/01/0589B8DA-895C-44F6-824A-ED81B8786136.png” alt=”rice”>
ステップ4：情報を整理する「リスト」
情報を箇条書きにする時は、リストを使います。ここで大事なのは「親ガメ・子ガメ」の関係です。
- ul（Unordered List）： リスト全体をまとめる親玉（順序なし）
- li（List Item）： 具体的な項目（子供）
<ul>
<li>好きな食べ物：カレー</li>
<li>好きな言語：HTML</li>
</ul>必ず ul（親）の中に li（子）が入ります。この「タグの中にタグを入れる（入れ子）」という感覚は、Web開発でずっと使うので慣れておきましょう！
ステップ5：透明な箱「div」【最重要】
最後にして最大の重要ポイント。それが div（ディブ）タグです。
実はこのタグ、「特に意味がない」んです。
「え？ 意味がないのに使うの？」と思いますよね。
div は「透明な整理箱」や「スーパーの買い物袋」のようなものです。
バラバラの「見出し」や「文章」を、グループごとにまとめておくために使います。
<!-- プロフィール用の袋 -->
<div>
<h1>名前</h1>
<p>自己紹介...</p>
</div>
<!-- 好きなものリスト用の袋 -->
<div>
<h2>好きなもの</h2>
<ul>...</ul>
</div>こうやって箱に入れて整理しておくと、後でデザインをする（CSSを書く）時に、「この箱の中身だけ背景をピンクにする！」といった指定ができるようになります。
今のうちに「関連するものは div で囲む」クセをつけておくと、未来の自分がとっても楽になりますよ。
完成したコード
ここまでの内容をまとめると、こんなコードになります。これをコピペしてブラウザで開けば、立派なWebページの完成です！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのWebサイト</title>
</head>
<body>
<!-- プロフィールのグループ -->
<div class="profile-box">
<h1>私の好きなもの紹介</h1>
<p>こんにちは！Web開発の勉強を始めました。</p>
</div>
<!-- リストのグループ -->
<div class="list-box">
<h2>好きな食べ物ランキング</h2>
<ol>
<li>ラーメン</li>
<li>カレーライス</li>
<li>寿司</li>
</ol>
</div>
<!-- リンクと画像のグループ -->
<div class="link-box">
<h2>好きな場所</h2>
<p>
もっと知りたい人は
<a href="https://google.com" target="_blank">ここをクリック</a>
</p>
</div>
</body>
</html>まとめ：暗記よりも「慣れ」が大事！
いかがでしたか？
HTMLは「プログラミング」というより、「マークアップ（印をつける）」言語です。
「ここが見出し！」「ここからここまでがグループ！」と印をつけていくだけの作業だと考えると、少し気が楽になりませんか？
まずはこの5ステップを使って、自分の自己紹介ページを作ってみてください。
それができたら、次はWebサイトをカラフルにお化粧する「CSS」の世界が待っていますよ！