タグの仕組みを理解しよう
ストーリー
先輩「HTMLの基本構造は分かったね。次はタグの仕組みを詳しく見ていこう」
タグって
<h1>とか<p>のことですよね？先輩「そう。HTMLはすべてタグで成り立っているんだ。タグのルールをしっかり覚えよう」
タグとは
タグは、テキストに 意味や役割 を与えるためのしるしです。
html
<p>これは段落です。</p><p>が 開始タグ（ここから段落が始まる）</p>が 終了タグ（ここで段落が終わる）- 間のテキストが コンテンツ
開始タグと終了タグ
ほとんどのタグは 開始タグと終了タグのペア で使います。
html
<タグ名>コンテンツ</タグ名>例
html
<h1>見出し</h1>
<p>段落のテキスト</p>
<strong>太字のテキスト</strong>
<em>斜体のテキスト</em>| 開始タグ | 終了タグ | 役割 |
|---|---|---|
<h1> | </h1> | 見出し |
<p> | </p> | 段落 |
<strong> | </strong> | 重要なテキスト（太字） |
<em> | </em> | 強調テキスト（斜体） |
先輩「終了タグには必ず
/が付くよ。これを忘れるとバグの原因になる」
自己閉じタグ（空要素）
一部のタグは、コンテンツを持たず 単体で使います。
html
<br>
<hr>
<img src="photo.jpg" alt="写真">
<input type="text">| タグ | 役割 |
|---|---|
<br> | 改行 |
<hr> | 水平線 |
<img> | 画像 |
<input> | 入力フォーム |
これらは終了タグが不要です。
タグのネスト（入れ子）
タグの中にタグを入れることを ネスト（入れ子） と言います。
正しいネスト
html
<p>これは<strong>重要な</strong>テキストです。</p>タグは 開いた順番と逆の順番で閉じます。
開く順: <p> → <strong>
閉じる順: </strong> → </p>
間違ったネスト
html
<!-- これは間違い！ -->
<p>これは<strong>重要な</p>テキストです。</strong>先輩「ネストは箱の中に箱を入れるイメージ。外側の箱を先に閉じちゃダメだよ」
ネストの視覚化
<p>
├── テキスト: "これは"
├── <strong>
│ └── テキスト: "重要な"
└── テキスト: "テキストです。"
属性（Attributes）
タグに 追加情報 を付けるのが属性です。
html
<タグ名 属性名="属性値">コンテンツ</タグ名>例
html
<a href="https://example.com">リンク</a>
<img src="photo.jpg" alt="写真の説明">
<p class="intro">紹介文</p>| タグ | 属性名 | 属性値 | 役割 |
|---|---|---|---|
<a> | href | URL | リンク先の指定 |
<img> | src | ファイルパス | 画像ファイルの指定 |
<img> | alt | テキスト | 画像の代替テキスト |
<p> | class | クラス名 | CSSでのスタイル指定用 |
属性のルール
- 属性は 開始タグの中 に書く
- 属性値は ダブルクォート
""で囲む - 複数の属性は スペースで区切る
html
<img src="photo.jpg" alt="写真" width="300" height="200">インデント（字下げ）
ネストしたタグは インデント（字下げ） して、構造を見やすくします。
見づらいコード
html
<html><head><title>タイトル</title></head><body><h1>見出し</h1><p>段落</p></body></html>見やすいコード
html
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>段落</p>
</body>
</html>先輩「インデントは半角スペース2つが一般的。見やすさが全然違うでしょ？」
コメント
HTMLにはメモを残すための コメント が書けます。
html
<!-- これはコメントです。画面には表示されません -->
<p>表示されるテキスト</p>
<!-- TODO: あとで画像を追加する --><!--で始まり-->で終わる- ブラウザには表示されない
- コードの説明やメモに使う
実践：タグの仕組みを確認しよう
以下のコードを hello.html に書いて、ブラウザで確認してみましょう。
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分