LESSON 25分

ストーリー

先
先輩
HTMLの基本構造は分かったね。次はタグの仕組みを詳しく見ていこう

タグって <h1> とか <p> のことですよね？

先
先輩
そう。HTMLはすべてタグで成り立っているんだ。タグのルールをしっかり覚えよう

タグとは

タグは、テキストに 意味や役割 を与えるためのしるしです。

<p>これは段落です。</p>
  • <p> が 開始タグ（ここから段落が始まる）
  • </p> が 終了タグ（ここで段落が終わる）
  • 間のテキストが コンテンツ

開始タグと終了タグ

ほとんどのタグは 開始タグと終了タグのペア で使います。

<タグ名>コンテンツ</タグ名>

例

<h1>見出し</h1>
<p>段落のテキスト</p>
<strong>太字のテキスト</strong>
<em>斜体のテキスト</em>
開始タグ終了タグ役割
<h1></h1>見出し
<p></p>段落
<strong></strong>重要なテキスト（太字）
<em></em>強調テキスト（斜体）

先輩「終了タグには必ず / が付くよ。これを忘れるとバグの原因になる」

自己閉じタグ（空要素）

一部のタグは、コンテンツを持たず 単体で使います。

<br />
<hr />
<img src="photo.jpg" alt="写真" />
<input type="text" />
タグ役割
<br>改行
<hr>水平線
<img>画像
<input>入力フォーム

これらは終了タグが不要です。

タグのネスト（入れ子）

タグの中にタグを入れることを ネスト（入れ子） と言います。

正しいネスト

<p>これは<strong>重要な</strong>テキストです。</p>

タグは 開いた順番と逆の順番で閉じます。

開く順: <p> → <strong>
閉じる順: </strong> → </p>

間違ったネスト

<!-- これは間違い！ -->
<p>これは<strong>重要な</p>テキストです。</strong>

先輩「ネストは箱の中に箱を入れるイメージ。外側の箱を先に閉じちゃダメだよ」

ネストの視覚化

graph TD
    A["&lt;p&gt;"] --> B["テキスト: これは"]
    A --> C["&lt;strong&gt;"]
    A --> D["テキスト: テキストです。"]
    C --> E["テキスト: 重要な"]

    style A fill:#dbeafe,stroke:#2563eb
    style C fill:#d1fae5,stroke:#059669
    style B fill:#f3f4f6,stroke:#9ca3af
    style D fill:#f3f4f6,stroke:#9ca3af
    style E fill:#fef3c7,stroke:#d97706

属性（Attributes）

タグに 追加情報 を付けるのが属性です。

<タグ名 属性名="属性値">コンテンツ</タグ名>

例

<a href="https://example.com">リンク</a>
<img src="photo.jpg" alt="写真の説明" />
<p class="intro">紹介文</p>
タグ属性名属性値役割
<a>hrefURLリンク先の指定
<img>srcファイルパス画像ファイルの指定
<img>altテキスト画像の代替テキスト
<p>classクラス名CSSでのスタイル指定用

属性のルール

  1. 属性は 開始タグの中 に書く
  2. 属性値は ダブルクォート "" で囲む
  3. 複数の属性は スペースで区切る
<img src="photo.jpg" alt="写真" width="300" height="200" />

インデント（字下げ）

ネストしたタグは インデント（字下げ） して、構造を見やすくします。

見づらいコード

<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落</p>
  </body>
</html>

見やすいコード

<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落</p>
  </body>
</html>

先輩「インデントは半角スペース2つが一般的。見やすさが全然違うでしょ？」

コメント

HTMLにはメモを残すための コメント が書けます。

<!-- これはコメントです。画面には表示されません -->
<p>表示されるテキスト</p>

<!-- TODO: あとで画像を追加する -->
  • <!-- で始まり --> で終わる
  • ブラウザには表示されない
  • コードの説明やメモに使う

実践：タグの仕組みを確認しよう

以下のコードを hello.html に書いて、ブラウザで確認してみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>タグの練習</title>
  </head>
  <body>
    <!-- 見出し -->
    <h1>タグの練習ページ</h1>

    <!-- 段落と装飾 -->
    <p>これは<strong>太字</strong>と<em>斜体</em>の練習です。</p>

    <!-- 水平線 -->
    <hr />

    <!-- リンク -->
    <p><a href="https://example.com">サンプルリンク</a></p>
  </body>
</html>

まとめ

ポイント内容
タグの基本開始タグ + コンテンツ + 終了タグ
自己閉じタグ<br>, <hr>, <img> など終了タグ不要
ネストタグの中にタグを入れる（順番に注意）
属性タグに追加情報を与える（属性名="値"）
インデントネストに合わせて字下げし、見やすく書く
コメント<!-- --> で画面に表示されないメモを書く

チェックリスト

  • 開始タグと終了タグの違いが分かる
  • 自己閉じタグの例を3つ挙げられる
  • 正しいネスト（入れ子）のルールを理解した
  • 属性の書き方（属性名=“値”）を理解した
  • インデントを使ってコードを書ける

次のステップへ

タグの仕組みが分かりました。次は、ブラウザに搭載されている「開発者ツール」を使って、実際のWebページのHTMLを覗いてみましょう。

推定読了時間: 25分