【保存版】これだけ覚えればWebサイトは作れる！頻出HTMLタグ一覧チートシート

「HTMLタグ、種類が多すぎて覚えられない…」と悩んでいませんか？

安心してください。プロのエンジニアでも、全てのタグを暗記しているわけではありません。
実際によく使うタグは、全体の2〜3割程度です。

この記事では、Web制作の現場で「息をするように使う」超・重要タグだけを厳選してまとめました。
読み方も載せているので、ぜひブックマークして辞書代わりに使ってください！

1. サイトの骨組み・構成

Webページの「エリア」を定義するタグです。SEO（検索エンジン対策）にも関わります。

タグ	読み方	役割・意味
<html>	エイチティーエムエル	この文書がHTMLであることを宣言する大外の箱。
<head>	ヘッド	脳みそ。設定やタイトルなどを書く場所。（画面には表示されない）
<body>	ボディ	体。画面に表示される中身を書く場所。
<header>	ヘッダー	ページ上部の帯。ロゴやナビゲーションを入れる。
<footer>	フッター	ページ下部の帯。コピーライトなどを入れる。
<main>	メイン	ページの主要コンテンツ。1ページに1回しか使えない。
<nav>	ナブ	ナビゲーション（メニューバー）を作るエリア。
<section>	セクション	意味のまとまり（章）。見出しとセットで使うことが多い。
<div>	ディブ	意味を持たないグループ化用の箱。デザインのためにCSSを当てたい時によく使う。

文字を表示するための基本タグです。

タグ	読み方	役割・意味
<h1> 〜 <h6>	エイチワン〜シックス	見出し。数字が小さいほど重要。 `h1` はページの大見出し（タイトル）。
<p>	ピー	Paragraph（パラグラフ）。段落を作る。
<br>	ブレイク	Break。改行する。 ※文章の途中で強制的に改行したい時だけ使う。
<span>	スパン	文章の一部分だけ（赤色にする等）囲みたい時に使う。 `div` の文字バージョン（意味を持たない）。
<small>	スモール	注釈やコピーライトなどの「小さな文字」を表す。

項目を並べる時に使います。親タグと子タグのセットで使います。

外部リソースを表示したり、ページ移動したりします。

タグ	読み方	役割・意味
<a>	アンカー	リンクを作成する。 `href="URL"` 属性とセットで使う。
<img>	イメージ	画像を表示する。 `src="画像の場所"` 属性とセットで使う。閉じタグがいらない（空要素）。
<iframe>	アイフレーム	YouTubeやGoogleマップなど、外部サイトを埋め込む。

Excelのような表組みを作ります。構造が少し複雑です。

タグ	読み方	役割・意味
<table>	テーブル	表全体を囲む大枠。
<tr>	ティーアール	Table Row。表の「横一行」を作る。
<th>	ティーエイチ	Table Header。「見出しセル」。文字が太字・中央寄せになる。
<td>	ティーディー	Table Data。「データセル（中身）」。

ユーザーからの入力を受け付けるパーツです。

タグ	読み方	役割・意味
<form>	フォーム	入力フォーム全体を囲む枠。送信先などを指定する。
<label>	ラベル	項目名。「名前」などの文字。 `input` と紐付けるとクリックしやすくなる。
<input>	インプット	1行の入力欄。 `type="text"` や `type="checkbox"` で形が変わる。
<textarea>	テキストエリア	複数行の入力欄。お問い合わせ内容などに使う。
<button>	ボタン	クリックできるボタン。 `type="submit"` で送信ボタンになる。
<select>	セレクト	プルダウンメニュー（ドロップダウン）の親枠。
<option>	オプション	プルダウンの中の選択肢。

これらがHTMLの「一軍選手」たちです。
最初は div や span、ul と ol の違いなどで迷うかもしれませんが、使っているうちに自然と手が動くようになります。

このページをブックマークして、コードを書くときにチラッと確認してみてくださいね！