CURRICULUM / LAYER 01 / CHAPTER 02

HTMLを読む

タグは「見た目」を決めるものではありません。

「意味」を伝えるラベルです。

この一行を腹落ちさせるだけで、HTMLの世界が一変します。

タグは「装飾」ではなく「ラベル」である

HTMLを学び始めた人の多くが、最初にこう誤解します。

「<h1>は文字を大きくするタグ。<p>は段落っぽく表示するタグ。<strong>は太字にするタグ」と。

間違ってはいません。

実際、ブラウザはそう表示します。

でも、これはタグの結果であって、本来の役割ではないのです。

HTMLのタグは、もっと根本的に言えば「この部分は何なのか」を機械に伝えるためのラベルです。

<h1>は「ここは最も重要な見出しですよ」というラベル。

<p>は「ここは一つの段落ですよ」というラベル。

<strong>は「ここは特に重要ですよ」というラベル。

たまたまブラウザがそれを「大きく」「段落っぽく」「太く」表示してくれているだけで、ラベル自体は見た目について何も言っていません。

— Key Concept

HTMLは「文書の意味」を記述する言語であって、「見た目」を記述する言語ではありません。

見た目を担当するのはCSSです。

この役割分担が分かっていないと、後々ややこしいバグやアクセシビリティの問題に必ずぶつかります。

なぜ「ラベル」だと考えると得をするのか

タグを「ラベル」だと捉えると、何が嬉しいのでしょうか。

3つあります。

一つ目は、検索エンジンが内容を理解できること。

Googleのクローラーは<h1>を見て「このページの中心テーマはこれだな」と判断します。

<article>を見て「ここが本文だな」と理解します。

ラベルが正しく付いていれば、検索結果での扱いが良くなる。

これがいわゆるSEOの土台です。

二つ目は、スクリーンリーダーが正しく読み上げられること。

視覚に障がいのある方が使う読み上げソフトは、<h1>〜<h6>の構造を頼りにページを巡ります。

見た目だけ大きく作っても、ラベルが付いていなければ「ここが見出し」と認識してもらえません。

三つ目は、後で自分が読み返したときに分かること。

3ヶ月後の自分は、他人だと思った方が安全です。

タグが意味のラベルとして付いていれば、コードを読み返したときに「ああ、ここは見出しだったな」と一目で分かります。

最低限おさえておきたいタグ

タグは100種類以上ありますが、最初に覚えるべきは10個もありません。

次のものを「ラベルとして」読めるようになれば、HTMLの大半は読めるようになります。

<!-- 文書全体の骨組み -->
<!DOCTYPE html>           <!-- 「これはHTML5の文書です」という宣言 -->
<html>                    <!-- 文書全体を包む大きな箱 -->
  <head>                  <!-- ページの「裏方」情報(画面には出ない) -->
    <title>                <!-- ブラウザのタブに出るタイトル -->
  <body>                  <!-- 画面に表示される本体 -->

<!-- 本体の中で使う代表的なラベル -->
<h1> 〜 <h6>             <!-- 見出し。h1が一番重要、h6が一番細かい -->
<p>                      <!-- 段落 -->
<a href="...">           <!-- リンク。hrefが「飛び先」を指定 -->
<img src="..." alt="..."> <!-- 画像。altは「代わりの文字説明」 -->
<ul> <ol> <li>          <!-- ul=順序なしリスト ol=順序ありリスト li=各項目 -->
<strong>                 <!-- 「ここは特に重要」という強調 -->
<em>                     <!-- 「ここを強調して読んで」という意味の強調 -->

これだけです。

本当にこれだけ知っていれば、世の中のHTMLの8割は読めます。

残り2割は、必要になったときに調べれば足りる。

— Note

<div>と<span>という汎用タグもよく出てきますが、これらは「特に意味のないただの箱」です。

意味のあるタグで表現できないときの最終手段として使うもので、なんでもかんでも<div>で囲うのは「ラベルを貼る」というHTMLの本来の役割を放棄していることになります。

AIが書いたコードでもよく見る悪い癖の一つです。

属性 ─ タグに「補足情報」を持たせる

タグの中にはよく見ると、href="..." や src="..." といった追加の情報が書かれているものがあります。

これを属性(attribute)と呼びます。

タグというラベルに対して、「もう少し詳しい情報」を添えるためのものです。

たとえばリンクのタグ。

<a>だけでは「ここはリンクですよ」と言っているだけで、どこに飛ぶのかが分かりません。

そこで<a href="https://example.com">と書くことで、「ここはリンクで、飛び先はexample.comですよ」という完全な情報になります。

<!-- 属性の読み方 -->
<a href="https://example.com">example.comへ</a>
   ↑   ↑                 ↑
   タグ 属性名             属性値

<!-- 一つのタグに複数の属性を付けられる -->
<img src="cat.jpg" alt="昼寝中の三毛猫" width="400">

属性は、原則として「属性名="属性値"」というセットで書きます。

値はダブルクォーテーションで囲うのが標準的なお作法です。

HTMLは「入れ子」でできている

HTMLのもう一つの大事な性質は、タグが入れ子(nest)になることです。

タグの中にタグを入れて、その中にまたタグを入れて……というように、マトリョーシカのような構造を作ります。

<body>
  <article>
    <h1>記事のタイトル</h1>
    <p>本文の一段落目です。<strong>ここは重要</strong>です。</p>
    <p>本文の二段落目です。</p>
  </article>
</body>

この例では、<body>の中に<article>があり、その中に<h1>と2つの<p>があり、最初の<p>の中には<strong>が入っています。

入れ子の深さに制限はありませんが、深くなりすぎると人間が読めなくなるので、ほどほどに。

入れ子で大事なのは、開いた順番と逆の順番で閉じること。

<p><strong>...</p></strong> のように交差させると、ブラウザは混乱します(古いブラウザは無理に解釈してくれましたが、新しい標準では正しくない書き方です)。

解読演習

では、いつもの解読タイムです。

今回は3問用意しました。

タグを一つひとつ「ラベル」として読んでみてください。

— EXERCISE 01-02-A

この記事の構造を、言葉で説明してください

次のHTMLは、ある記事ページの本体部分です。

この記事には何が書かれていて、どんな構造になっていますか? タグを順番に見ていき、自分の言葉で説明してみてください。

<article>
  <h1>はじめてのパン作り</h1>
  <p>休日に思い立って、人生初のパンを焼いてみました。</p>

  <h2>必要な材料</h2>
  <ul>
    <li>強力粉 250g</li>
    <li>ドライイースト 3g</li>
    <li>砂糖 大さじ1</li>
    <li>塩 小さじ1</li>
  </ul>

  <h2>感想</h2>
  <p>思ったより<strong>こねる作業が大変</strong>でした。
     でも焼きたての香りは格別です。</p>
</article>

解答例を見る

これは「はじめてのパン作り」というタイトルの記事です。

記事全体が<article>という箱で囲まれていて、「ここは一つのまとまった記事ですよ」と示されています。

中身は3つのブロックに分かれています。

まず<h1>でタイトル(=記事の中心テーマ)があり、そのすぐ下に<p>で導入の一文。

次に<h2>の「必要な材料」という小見出しがあって、その下に<ul>(順序なしリスト)で4つの材料が<li>として並んでいます。

最後にもう一つ<h2>の「感想」があって、その下の<p>の中で「こねる作業が大変」という部分が<strong>で重要マークされています。

ポイントは、<h1>が記事タイトル、<h2>がその下のセクション見出し、という階層関係を読み取れること。

タグを「大きな文字」と読むのではなく「見出しのレベル」として読めると、構造が立体的に見えてきます。

— EXERCISE 01-02-B

このコードのおかしな点を3つ挙げてください

AIが書いてきた、というていのHTMLです。

動くには動きますが、「タグはラベルである」という観点から見ると、いくつか不適切な点があります。

少なくとも3つ見つけてみてください。

<div>
  <div style="font-size:32px;font-weight:bold">新着情報</div>
  <div>
    <div>2026年4月 サービス開始しました</div>
    <div>2026年3月 サイトを公開しました</div>
  </div>
  <img src="logo.png">
</div>

解答例を見る

少なくとも次の3つが指摘できます。

(1) 「新着情報」が見出しなのに<div>で書かれている ── 本来は<h1>〜<h2>のいずれかを使うべき場面です。

styleで文字を大きくして「見た目だけ見出し」にしていますが、検索エンジンにも読み上げソフトにも「これは見出しです」と伝わりません。

(2) リスト項目が<div>の羅列になっている ── 「2026年4月…」「2026年3月…」は明らかに項目の並び(リスト)です。

<ul>と<li>で書くのが正しい姿です。

今のままだと「これは項目の列挙だ」という意味が一切伝わっていません。

(3) <img>にalt属性がない ── 画像には必ずalt(代わりの文字説明)を付けるのがHTMLのお約束です。

読み上げソフトはaltを読み上げるので、これがないと視覚障がいのある方には何の画像かまったく分かりません。

装飾用の画像なら alt="" と空にして「これは飾りです」と明示するのが作法です。

総じて、このコードは「タグを意味のラベルとして使う」という発想がなく、すべてを<div>で済ませて見た目だけCSSで整えようとしています。

AIが出してくるコードで非常によく見るパターンなので、見抜けるようになっておきましょう。

— EXERCISE 01-02-C

このリンクは、押すとどこに飛ぶか

次のHTMLには3つのリンクがあります。

それぞれをクリックすると、どこに飛びますか? 属性を読み取って答えてください。

<p><a href="https://yzumming.com/">トップへ</a></p>
<p><a href="about.html">このサイトについて</a></p>
<p><a href="#contact">お問い合わせ</a></p>

解答例を見る

1つ目は https://yzumming.com/ へ飛びます。

https://から始まる完全なURLが書かれているので、別のサイト(あるいは同じサイトのトップ)に直接ジャンプします。

2つ目は、今いるページと同じフォルダにある about.html に飛びます。

スラッシュもhttpsも付いていない指定は「相対パス」と呼ばれ、現在地からの相対位置を示します。

3つ目は #contact なので、外には飛びません。

同じページ内で id="contact" が付いた要素まで画面がスクロールします。

<a>タグは「ページ間の移動」だけでなく「同じページ内の移動」にも使える、という小ネタです。

この章のまとめ

HTMLのタグは「見た目」ではなく「意味のラベル」を貼るためのもの
正しいラベルを貼ると、検索エンジン・読み上げソフト・将来の自分が助かる
覚えるべき基本タグは10個もない。<h1>〜<h6>、<p>、<a>、<img>、<ul><ol><li>、<strong><em>
タグには属性で補足情報を付けられる(href、src、alt など)
タグは 入れ子 にできる。開いた順と逆の順で閉じる
なんでも<div>で済ませるのは、HTMLの役割を放棄している悪い癖

次の章では、こうしてラベルが貼られたHTMLに対して、CSSで「見た目」を与えていく話に入ります。

ラベルと装飾を分けて考えることが、なぜ強力なのか。

それを実感できる章になります。