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（検索エンジン評価）**も良くなります。
