目次
はじめに：タグが多すぎて、何から覚えればいい？
「html タグ 一覧」で検索すると、ずらっと並んだ大量のタグ。
正直、最初は圧倒されます。
でも安心してください。
実務でよく使うタグは限られています。
私も学び始めたころ、すべて覚えようとして挫折しかけました。
今振り返ると、使うタグはだいたい決まっています。
ここでは、本当に使うHTMLタグだけを用途別に整理します。
HTMLタグとは何か（まずここを整理）
HTMLタグは、Webページの「構造」と「意味」を伝えるためのマークです。
<p>これは段落です</p>このタグがあることで、
- これは段落
- これは見出し
- これはリンク
という意味をブラウザや検索エンジンに伝えられます。
見た目はCSSの役割。
意味はHTMLの役割です。
HTMLの基本構造タグ一覧
まずは土台になるタグ。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>| タグ | 役割 |
|---|---|
<!DOCTYPE html> |
HTML5宣言 |
html |
文書全体 |
head |
設定情報（タイトル・文字コードなど） |
body |
実際に表示される内容 |
ここが崩れると、ページ全体が壊れます。
見出しタグ（h1〜h6）
<h1>ページタイトル</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>ポイント
- h1は原則1ページに1つ
- 数字順に使う（h2の次にh4は飛ばさない）
- デザイン目的で使わない
見出しは「構造」です。
文字を大きくしたいだけならCSSを使います。
文章系タグ一覧
<p>段落</p>
<br>
<strong>重要</strong>
<em>強調</em>| タグ | 役割 |
|---|---|
p |
段落 |
br |
改行 |
strong |
重要 |
em |
強調 |
よくある失敗
- pタグを使わずdivで文章を書く
- 余白目的でbrを連打する
文章はpで囲みます。
リンクタグ（a）
<a href="https://example.com">リンク</a>よく使う属性
- href（リンク先）
- target="_blank"（別タブ）
- rel="noopener"
よくあるミス
hrefを書き忘れる。
これ、かなり多いです。
DevToolsでaタグを確認するとすぐ分かります。
画像タグ（img）
<img src="image.jpg" alt="商品の写真">必須属性
- src（画像パス）
- alt（説明文）
altは必ず書きます。
SEOだけでなく、画面読み上げにも使われます。
リストタグ（ul / ol / li）
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>| タグ | 役割 |
|---|---|
ul |
箇条書き |
ol |
番号付き |
li |
項目 |
ナビゲーションメニューも内部的にはリストで作られます。
tableタグ（表）
<table>
<tr>
<th>項目</th>
<td>内容</td>
</tr>
</table>| タグ | 役割 |
|---|---|
table |
表全体 |
tr |
行 |
th |
見出し |
td |
データ |
レイアウト目的では使いません。
データの表だけに使います。
スマホでは横スクロール対策が必要です。
フォームタグ一覧
<form>
<label>名前</label>
<input type="text">
<textarea></textarea>
<button>送信</button>
</form>| タグ | 役割 |
|---|---|
form |
フォーム全体 |
input |
入力欄 |
textarea |
複数行入力 |
button |
ボタン |
label |
入力説明 |
labelとinputを関連付けると、使いやすさが向上します。
divとspanの違い
<div>ブロック</div>
<span>インライン</span>| タグ | 特徴 |
|---|---|
| div | ブロック要素 |
| span | インライン要素 |
意味は持ちません。
レイアウトや装飾のために使います。
よくあるHTMLタグの誤解
見た目が変わるから使う？
それは危険です。
例えば、
<h1>大きくしたいから使う</h1>これは間違い。
見出しとして意味があるときだけ使います。
DevToolsで構造を確認する方法
タグが正しく書けているか不安なときは、
- 右クリック → 検証
- Elementsタブを見る
- 入れ子構造を確認
閉じタグ忘れはここで一瞬で見つかります。
実務でよく使うHTMLタグまとめ
まず覚えるのはこのセット。
- html / head / body
- h1〜h3
- p
- a
- img
- ul / li
- div / span
- table
- form
これでほとんどのページは作れます。
チェックリスト
✔ 見出しは順番通りか
✔ 文章はpで囲んでいるか
✔ 画像にaltがあるか
✔ tableをレイアウトに使っていないか
✔ DevToolsで構造確認したか
まとめ：タグは全部覚えなくていい
HTMLタグはたくさんあります。
でも、毎日使うのは一部です。
大事なのは、
- 意味で選ぶ
- 見た目と混同しない
- 実際に書いて確認する
「html タグ 一覧」で迷ったら、
まずはここにある基本タグを使いこなすところから始めてみてください。
そこがWeb制作の土台になります。