HTMLのタグの種類と使い方、使い分けについて

HTMLタグはたくさんありますが、**基本的な役割や目的別にグループ分け**して覚えると使いやすくなります。

---

## 🧱 1. **構造・レイアウトを作るタグ**

| タグ名         | 用途                 | 使い方例                               |
| ----------- | ------------------ | ---------------------------------- |
| `<div>`     | **汎用的な箱**（特に意味はない） | `<div class="box">内容</div>`        |
| `<section>` | セクション（意味あるグループ）    | `<section><h2>お知らせ</h2></section>` |
| `<article>` | 独立した記事（ブログなど）      | `<article>ブログ本文</article>`         |
| `<header>`  | ページやセクションのヘッダー部分   | `<header>ナビやロゴ</header>`           |
| `<footer>`  | フッター（コピーライトやリンクなど） | `<footer>© 2025</footer>`          |
| `<main>`    | ページのメインコンテンツ       | `<main>ここが中心の内容</main>`            |
| `<nav>`     | ナビゲーション用（リンク集）     | `<nav><a href="/">HOME</a></nav>`  |

🟡 **使い分けポイント**：

* `div` は意味がないが汎用性が高い（CSS用に便利）
* `section`, `article`, `header` などは **意味があるグルーピング** に使う

---

## 📝 2. **テキストを表示するタグ**

| タグ名           | 意味                  | 使い方例                           |
| ------------- | ------------------- | ------------------------------ |
| `<h1>`〜`<h6>` | 見出し（数字が小さいほど大きくて重要） | `<h1>タイトル</h1>`                |
| `<p>`         | 段落                  | `<p>本文です。</p>`                 |
| `<br>`        | 改行（空タグ）             | `1行目<br>2行目`                   |
| `<strong>`    | 強調（太字・意味あり）         | `<strong>重要</strong>`          |
| `<em>`        | 強調（斜体）              | `<em>注意</em>`                  |
| `<span>`      | 特定のテキストだけ装飾したいとき    | `<span class="red">赤文字</span>` |

🟡 **使い分けポイント**：

* 見出しは`h1`は1ページ1個が基本
* 太字なら意味あり → `strong`、ただの装飾ならCSSと`span`

---

## 📋 3. **リスト（箇条書き）タグ**

| タグ名    | 用途                 | 使い方例                                |
| ------ | ------------------ | ----------------------------------- |
| `<ul>` | 順序なしリスト            | `<ul><li>項目1</li><li>項目2</li></ul>` |
| `<ol>` | 順序ありリスト            | `<ol><li>手順1</li><li>手順2</li></ol>` |
| `<li>` | リスト項目（ul, olの中で使う） | 上に同じ                                |

---

## 🔗 4. **リンク・画像・メディアタグ**

| タグ名       | 用途      | 使い方例                                       |
| --------- | ------- | ------------------------------------------ |
| `<a>`     | リンクを作る  | `<a href="https://example.com">サイトへ</a>`   |
| `<img>`   | 画像を表示する | `<img src="photo.jpg" alt="説明" />`         |
| `<video>` | 動画を表示   | `<video src="movie.mp4" controls></video>` |
| `<audio>` | 音声を表示   | `<audio src="music.mp3" controls></audio>` |

---

## 🧾 5. **フォーム関連タグ**

| タグ名          | 用途                    | 使い方例                                    |
| ------------ | --------------------- | --------------------------------------- |
| `<form>`     | フォーム全体の囲い             | `<form action="/submit">...</form>`     |
| `<input>`    | 入力欄（text, checkboxなど） | `<input type="text" />`                 |
| `<textarea>` | 複数行の入力欄               | `<textarea></textarea>`                 |
| `<select>`   | ドロップダウン               | `<select><option>選択肢</option></select>` |
| `<button>`   | ボタン                   | `<button>送信</button>`                   |

---

## 🎨 6. **表（テーブル）タグ**

| タグ名       | 用途     | 使い方例                 |
| --------- | ------ | -------------------- |
| `<table>` | 表全体の囲い | `<table>...</table>` |
| `<tr>`    | 行（row） | `<tr>...</tr>`       |
| `<th>`    | ヘッダーセル | `<th>見出し</th>`       |
| `<td>`    | 通常のセル  | `<td>内容</td>`        |

---

## 🧠 まとめ：どう使い分ける？

| タイプ    | 主に使うタグ                                        |
| ------ | --------------------------------------------- |
| 構造・区切り | `div`, `section`, `article`, `header`, `main` |
| テキスト表示 | `p`, `h1`, `strong`, `span`                   |
| ナビ・リンク | `a`, `nav`                                    |
| 入力     | `form`, `input`, `button`                     |
| メディア   | `img`, `video`, `audio`                       |
| 表      | `table`, `tr`, `td`, `th`                     |

---

タグの意味を理解して使い分けることで、**アクセシビリティ**や\*\*SEO（検索エンジン評価）\*\*も良くなります。