なぜ「正しいタグ」で書く必要があるのか
HTMLは「文章に意味のラベルを貼る」言語だとWeek 01で学びました。でも、「見出しっぽく見えればいいんでしょ？」「太字にすればいいんでしょ？」と思うかもしれません。
全然違います。
あなたが書いたHTMLは、人間だけでなく 3つの「読者」 に読まれます。
- ブラウザ — タグに基づいて画面に表示する
- Google（検索エンジン） — タグに基づいてページの内容を理解し、検索順位を決める
- スクリーンリーダー — 視覚障害者のために、タグに基づいて音声で読み上げる
<h1>タグを使って書いた見出しは、Googleに「このページで最も重要なトピックはこれだ」と伝えます。CSSで見た目を大きくしただけの文字は、Googleには「ただの段落」にしか見えません。
つまり、正しいタグで書くことは SEO（検索エンジン最適化）とアクセシビリティの基礎 です。今週これを身につければ、あなたの作るページは最初から「検索に強く、誰にでも使いやすい」ものになります。
見出しタグ h1〜h6 完全ガイド
HTMLには6段階の見出しタグがあります。h1が最も大きく重要で、h6が最も小さく細かい見出しです。
<h1>ページのメインタイトル</h1>
<h2>大きなセクションの見出し</h2>
<h3>セクション内の小見出し</h3>
<h4>さらに細かい見出し</h4>
<h5>めったに使わない</h5>
<h6>ほぼ使わない</h6>ルール1: h1 は1ページに1つだけ
<h1>はそのページの「タイトル」です。本で言えば「書名」。1冊の本に書名が2つあったらおかしいですよね。同様に、1ページに<h1>は1つだけにしてください。
<!-- ✅ 正しい: h1 は1つだけ -->
<h1>カレーライスの作り方</h1>
<h2>材料</h2>
<h2>手順</h2>
<!-- ❌ 間違い: h1 が2つある -->
<h1>カレーライスの作り方</h1>
<h1>必要な材料</h1>ルール2: 階層を飛ばさない
h1 → h2 → h3 の順番で使います。h1 の次にいきなり h3 を使うのはNGです。本の目次で「第1章」の下にいきなり「第1章第3節」が来たら違和感がありますよね。
<!-- ✅ 正しい: 階層が順序通り -->
<h1>カレーライスの作り方</h1>
<h2>材料（4人分）</h2>
<h3>具材</h3>
<h3>調味料</h3>
<h2>手順</h2>
<h3>下ごしらえ</h3>
<h3>煮込み</h3>
<!-- ❌ 間違い: h1 の直後に h3 -->
<h1>カレーライスの作り方</h1>
<h3>具材</h3>ルール3: 見出しは「本の目次」のように構造化する
良いHTMLの見出しは、そのまま目次になります。あなたのページのh1〜h3だけを抜き出したとき、読者がページの内容を理解できるなら、見出しの使い方は正しいです。
プロのテクニック: 見出しを書くとき、まずh1〜h3だけで「目次」を先に作ってから、中身を書き始める。これは実際のWeb制作でもプロがよくやる方法です。この記事自体も同じ方法で書いています。
現実の使用頻度
| タグ | 使用頻度 | 用途 |
|---|---|---|
h1 | ★★★★★ | ページタイトル。1ページ1つ |
h2 | ★★★★★ | 大セクション。1ページに3〜8個 |
h3 | ★★★★ | 小セクション。h2の中に2〜5個 |
h4 | ★★ | 詳細見出し。長い記事でたまに使う |
h5 | ★ | ほぼ使わない |
h6 | — | まず使わない |
段落タグ p と改行 br の違い
<p>は「段落」を意味するタグです。文章のまとまりをひとつの段落として囲みます。
<p>カレーは日本の国民食のひとつです。家庭ごとに味が違い、それぞれの「うちのカレー」があります。</p>
<p>今回は、市販のルーを使わない本格的なスパイスカレーの作り方を紹介します。</p>改行 br は「やむを得ないとき」だけ
<br>は「改行」です。ただし、段落を分けるために<br>を連打するのは 完全にNG です。
<!-- ❌ 絶対にやってはいけない -->
<p>
カレーは日本の国民食のひとつです。<br>
<br>
今回は本格的なスパイスカレーの作り方を紹介します。<br>
<br>
材料はこちらです。
</p>
<!-- ✅ 正しい -->
<p>カレーは日本の国民食のひとつです。</p>
<p>今回は本格的なスパイスカレーの作り方を紹介します。</p>
<p>材料はこちらです。</p>
<br>を使ってよい場面は 住所や詩のように、1つの意味のかたまり内で改行が必要な場合 だけです。
<!-- ✅ br が適切な場面: 住所 -->
<p>
東京都渋谷区神宮前1-2-3<br>
〇〇ビル 5階<br>
ToolShare Lab
</p>リスト ul / ol / li
リストはWebページで最も多く使われる構造のひとつです。メニュー、手順、箇条書き——ありとあらゆる場面でリストを使います。
順序なしリスト（ul: unordered list）
「順番は関係ない」項目の一覧には<ul>を使います。
<h3>カレーの材料</h3>
<ul>
<li>鶏もも肉 300g</li>
<li>玉ねぎ 2個</li>
<li>にんじん 1本</li>
<li>じゃがいも 2個</li>
<li>カレー粉 大さじ2</li>
</ul>
ブラウザでは各項目の前に「・」（ビュレット）が表示されます。材料は入れる順番が決まっていないのでulが適切です。
順序ありリスト（ol: ordered list）
「順番がある」手順や手順には<ol>を使います。
<h3>カレーの手順</h3>
<ol>
<li>玉ねぎをみじん切りにする</li>
<li>鍋にオリーブオイルを熱し、玉ねぎを15分炒める</li>
<li>鶏肉を加えて表面に焼き色をつける</li>
<li>カレー粉を加えて1分炒める</li>
<li>水500mlを加えて20分煮込む</li>
<li>塩で味を調えて完成</li>
</ol>
ブラウザでは各項目に「1. 2. 3.」と番号が自動的に振られます。手順は順番が大事なのでolが適切です。
リストのネスト（入れ子）
リストの中にリストを入れることもできます。
<ul>
<li>具材
<ul>
<li>鶏もも肉 300g</li>
<li>玉ねぎ 2個</li>
<li>にんじん 1本</li>
</ul>
</li>
<li>調味料
<ul>
<li>カレー粉 大さじ2</li>
<li>塩 小さじ1</li>
<li>黒こしょう 少々</li>
</ul>
</li>
</ul>判断基準: 「項目を入れ替えても意味が変わらない」→ ul。「入れ替えたら意味が変わる（手順など）」→ ol。迷ったらulでOKです。
強調 strong と em の違い
テキストを「強調」したいとき、HTMLには2つのタグがあります。
strong — 重要性を示す（太字で表示）
<p>このカレーの最大のポイントは<strong>玉ねぎを15分炒めること</strong>です。</p>
<strong>は「この部分は重要」という意味です。スクリーンリーダーはstrongの部分を「強調して」読み上げます。ブラウザは太字で表示します。
em — 意味の強調（イタリック体で表示）
<p>カレーは<em>日本の</em>国民食です。</p>
<em>は「ここに力点がある」という意味です。上の例では「インドではなく日本の」というニュアンスを強調しています。ブラウザはイタリック体で表示しますが、日本語ではほぼ太字と同じに見えることが多いです。
b / i は使うな
古いHTMLの参考書には<b>（太字）や<i>（イタリック）が載っていることがあります。これらは「見た目だけ」を変えるタグで、意味を持ちません。
<!-- ❌ 見た目だけ変える（意味がない）-->
<b>重要なテキスト</b>
<!-- ✅ 「重要」という意味を持つ -->
<strong>重要なテキスト</strong>
2026年の現場では、<b>と<i>は使いません。strongとemを使ってください。
知っておくと便利なインライン要素
| タグ | 意味 | 使い方 |
|---|---|---|
<a> |
リンク | <a href="https://example.com">リンクテキスト</a> |
<code> |
コード（プログラム） | <code>console.log()</code> |
<mark> |
ハイライト（蛍光ペン） | <mark>注目テキスト</mark> |
<small> |
注釈・免責 | <small>※価格は税込みです</small> |
<del> |
取り消し線 | <del>旧価格 ¥1,000</del> |
<time> |
日時 | <time datetime="2026-04-09">2026年4月9日</time> |
<abbr> |
略語 | <abbr title="HyperText Markup Language">HTML</abbr> |
<blockquote> |
引用 | <blockquote>引用文</blockquote> |
すべてを今すぐ覚える必要はありません。<a>（リンク）は来週の Week 03 で詳しく学びます。今は「こういうタグがあるんだ」と頭の片隅に入れておくだけでOKです。
区切り線 hr
<hr>は「話題の区切り」を表す水平線です。閉じタグは不要です。
<p>ここまでが材料の説明です。</p>
<hr>
<p>ここからは手順を説明します。</p>見た目の装飾としてではなく、「ここで話題が切り替わる」というセマンティックな意味で使います。
実践: 料理レシピページを作ろう
ここまで学んだ要素を全部使って、1ページ作ります。あなたの好きな料理のレシピページを作ってください。以下は「スパイスカレー」の例です。
完成イメージ（コード全文）
まずはこのコードをAIに作らせてみましょう。できあがったコードを一行ずつ読んで、見出し・リスト・強調がどう使われているかを確かめてください。意味がわかったら、自分の手で書き直してみると理解がさらに深まります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スパイスカレーのレシピ | 本格派チキンカレー</title>
</head>
<body>
<h1>本格スパイスカレーの作り方</h1>
<p>市販のルーを使わない、スパイスから作る本格チキンカレー。<br>
一度作ったら<strong>もう市販のルーには戻れなくなる</strong>レシピです。</p>
<h2>材料（4人分）</h2>
<h3>具材</h3>
<ul>
<li>鶏もも肉 300g（一口大に切る）</li>
<li>玉ねぎ 2個（みじん切り）</li>
<li>トマト缶 1缶（400g）</li>
<li>にんにく 2片（すりおろし）</li>
<li>しょうが 1片（すりおろし）</li>
</ul>
<h3>スパイス</h3>
<ul>
<li>クミンシード 小さじ1</li>
<li>ターメリック 小さじ1</li>
<li>コリアンダーパウダー 大さじ1</li>
<li>カイエンペッパー 小さじ1/2（辛さ調整）</li>
<li>ガラムマサラ 小さじ1（仕上げ用）</li>
</ul>
<h3>調味料</h3>
<ul>
<li>オリーブオイル 大さじ2</li>
<li>塩 小さじ1〜</li>
<li>水 300ml</li>
</ul>
<hr>
<h2>作り方</h2>
<ol>
<li>鍋にオリーブオイルとクミンシードを入れ、<strong>弱火</strong>で加熱する。パチパチと音がしたらOK。</li>
<li>みじん切りの玉ねぎを加え、<strong>15分以上</strong>じっくり炒める。<em>ここが最重要ポイント</em>。飴色になるまで根気よく。</li>
<li>にんにく、しょうがを加えて1分炒める。</li>
<li>ターメリック、コリアンダー、カイエンペッパーを加えて30秒炒める。焦がさないように注意。</li>
<li>トマト缶を加え、トマトの形が崩れるまで5分煮る。</li>
<li>鶏肉を加えて表面に色がつくまで炒める。</li>
<li>水300mlを加え、蓋をして<strong>弱火で20分</strong>煮込む。</li>
<li>ガラムマサラを加え、塩で味を調えたら完成。</li>
</ol>
<hr>
<h2>ポイント</h2>
<ul>
<li>玉ねぎは<strong>絶対に手を抜かない</strong>。15分炒めるのと5分で終わらせるのでは味が全く違います。</li>
<li>スパイスは<em>入れすぎより少なめ</em>がコツ。足りなければ後から足せますが、入れすぎは取り返せません。</li>
<li>一晩寝かせると<mark>さらに美味しくなります</mark>。</li>
</ul>
<h2>参考にしたレシピ</h2>
<blockquote>
<p>スパイスカレーの基本は「玉ねぎ・トマト・スパイス」の3つだけ。この3つがあれば、世界中のカレーが作れる。</p>
</blockquote>
<p><small>※ 分量はお好みで調整してください。</small></p>
</body>
</html>
上のコードをrecipe.htmlというファイル名で保存して、ブラウザで開いてみてください。
確認ポイント: h1が1つ、h2が3つ（材料・作り方・ポイント）、h3が3つ（具材・スパイス・調味料）。ulとolの使い分け。strong, em, mark, blockquote, small の使い分け。全部意味があって使っています。
今週のよくある間違い
ミス1: 見出しを「見た目」で選ぶ
<!-- ❌ 「h3 のサイズがちょうどいいから」で選んではいけない -->
<h3>ページのメインタイトル</h3>
<!-- ✅ 意味で選ぶ。見た目はCSSで後から変えられる -->
<h1>ページのメインタイトル</h1>見出しの見た目（大きさ）が気に入らなくても、意味的に正しいタグを選ぶ。見た目は来月学ぶCSS で自由に変えられます。今は「正しい構造」だけに集中してください。
ミス2: リストを使うべき場所で p + br を使う
<!-- ❌ -->
<p>材料:<br>
玉ねぎ 2個<br>
にんじん 1本<br>
じゃがいも 2個</p>
<!-- ✅ -->
<h3>材料</h3>
<ul>
<li>玉ねぎ 2個</li>
<li>にんじん 1本</li>
<li>じゃがいも 2個</li>
</ul>ミス3: strong を乱用する
全部太字にしたら、何も強調されていないのと同じです。本当に重要な部分だけに使ってください。1段落に1〜2箇所が目安。
今週の課題
課題
あなたの好きな料理のレシピページを1ページ作成してください。
必須要件
h1にレシピ名（1つだけ）h2で「材料」「手順」「コツ」の3セクション以上h3で材料をさらに分類（メイン材料 / 調味料 等）ulで材料一覧（順番関係ない）olで手順（順番がある）strongで最重要ポイントを2〜3箇所emで補足的な強調を1〜2箇所hrでセクション間の区切りblockquoteで何かを引用（料理本からでも、おばあちゃんの言葉でも）smallで注釈を1箇所
ボーナス課題（余裕がある人向け）
- リストをネスト（入れ子）にしてみる
markで「特に覚えてほしい部分」をハイライトするtimeタグで調理時間を書いてみる（例:<time datetime="PT30M">約30分</time>）
カレーでもパスタでも味噌汁でも何でもOK。自分が好きな料理を選ぶと楽しく書けます。AIに全部任せきりにしないでください。使うならまずAIに叩き台を作らせて、見出しの階層やリストの使い分けが正しいか出力を読んで確認し、自分の手で直してください。間違いに気づいて直せることが、この土台を身につけたという証拠です。
提出前に、AIが作ったコードでよくある間違いも確認しておきましょう。
自己診断テスト
h1とh2の正しい使い分けを説明できますか？h1はなぜ1ページに1つだけにすべきですか？（3つの読者の観点で）pとbrの違いは何ですか？brを連打してはいけない理由を説明できますか？ulとolをどう使い分けますか？判断基準を1文で言えますか？strongとemの違いは？bとiを使わない理由は？blockquoteはどういう場面で使いますか？- HTMLの見出しだけを抜き出したとき「目次」として成立していれば、構造が正しいと言える理由を説明できますか？
来週の予告 — Week 03: 画像・リンク・テーブル・フォーム入門
来週はいよいよ「テキスト以外の要素」に入ります。画像を表示する<img>、別のページに飛ぶ<a>、データを表にする<table>、ユーザーに入力してもらう<form>。
これら4つが使えるようになると、「ちゃんとしたWebページ」を作れるようになります。今週のうちに課題のレシピページを完成させて、来週に備えましょう。
Week 02 完了おめでとうございます。「正しいタグで書く」感覚、掴めましたか？ 今日学んだことは、これから先ずっと使う土台になります。「見た目」ではなく「意味」で書く。これがプロのHTMLです。