HTMLタグ一覧｜用途別の逆引きと使い分け・非推奨タグまで整理
HTMLのタグは100種類以上ありますが、実際のWeb制作で使うのは30〜40種類です。残りは「必要になったときに調べる」で足ります。
この記事では、まず用途別にタグを整理し、そのうえで迷いやすい使い分けと使ってはいけない古いタグを扱います。暗記のための一覧ではなく、書きながら引ける形にまとめました。
タグ・要素・属性の関係
先に用語を整理します。混同したまま説明を読むと分かりにくくなります。
- タグ：
<p>のような山かっこで囲んだ記号。開始タグと終了タグがあります - 要素：開始タグから終了タグまでを含めた全体。
<p>本文</p>がp要素です - 属性：タグの中に書く追加情報。
<a href="...">のhrefが属性です
「HTMLタグ一覧」と検索されることが多いのですが、正確には要素の一覧です。実務ではどちらの言い方も通じます。
用途別タグ一覧
1. 文書の骨格
<!DOCTYPE html>：HTMLであることの宣言。1行目に必ず書きます<html>：全体を囲みます。lang="ja"を付けます<head>：ページの設定。画面には表示されません<body>：画面に表示される中身
2. メタデータ（head の中）
<title>：ページのタイトル。タブと検索結果に出ます<meta charset="UTF-8">：文字コード。抜けると文字化けします<meta name="viewport">：スマートフォン表示の設定。抜けると拡大縮小がおかしくなります<meta name="description">：ページの説明。検索結果に出ることがあります<link>：CSSファイルやファビコンの読み込み（ファビコンの設定方法はこちら）<style>：CSSを直接書く<script>：JavaScriptの読み込みや記述
3. 構造（セクショニング）
<header>：ページや区画の上部<nav>：ナビゲーション（メニュー）<main>：主要な内容。1ページに1つだけ<article>：それだけで独立して成立する内容<section>：見出しを持つひとまとまりの区画<aside>：補足・サイドバー<footer>：ページや区画の下部<div>：意味を持たない箱。他に適切なタグがないときに使います
4. テキスト
<h1>〜<h6>：見出し。数字は重要度で、飛ばさず順に使います<p>：段落<br>：改行。レイアウト調整に使わないでください<hr>：話題の区切り<strong>：重要であることを示す（太字になる）<em>：強調（斜体になる）<span>：意味を持たない範囲指定。文中の一部だけCSSを当てたいときに使います<code>：プログラムのコード<pre>：改行や空白をそのまま表示<blockquote>：引用（ブロック）<q>：引用（文中）<small>：注釈・細目<mark>：ハイライト<time>：日時<abbr>：略語。title属性で正式名称を示します<sub>/<sup>：下付き / 上付き文字<ruby>/<rt>：ふりがな
5. リスト
<ul>：順序なしリスト（黒丸）<ol>：順序付きリスト（番号）<li>：リストの項目。ulかolの直下に置きます<dl>/<dt>/<dd>：用語と説明の組み合わせ
6. テーブル
<table>：表全体<thead>/<tbody>/<tfoot>：ヘッダ・本体・フッタ<tr>：行<th>：見出しセル<td>：データセル<caption>：表のタイトル<colgroup>/<col>：列単位の指定
結合にはcolspan（横）とrowspan（縦）属性を使います。
7. フォーム
<form>：フォーム全体。送信先をaction属性で指定します<input>：入力欄。type属性で種類が変わります（text、email、password、number、date、checkbox、radio、file、hidden、submitなど）<textarea>：複数行の入力欄<select>/<option>：選択メニュー<button>：ボタン<label>：入力欄の見出し。for属性で入力欄と結びつけます<fieldset>/<legend>：関連する項目のグループ化
8. 画像・動画・音声
<img>：画像。alt属性は必須です<picture>/<source>：画面幅などで画像を切り替える<figure>/<figcaption>：図と、その説明文<video>/<audio>：動画・音声<canvas>：JavaScriptで描画する領域<svg>：ベクター画像<iframe>：他のページを埋め込む
9. リンク
<a href="...">：リンク。target="_blank"で別タブに開きます
別タブで開く場合、rel="noopener"を付けるのが安全側の書き方です。
覚えておくと迷わないグローバル属性
ほぼすべてのタグで使える属性です。
id：ページ内で一意の名前。同じidを2回使わないでくださいclass：CSSやJavaScriptから指定するための名前。何度でも使えますstyle：CSSを直接書く。多用しないでくださいtitle：マウスを乗せたときに出る説明data-*：独自のデータを持たせるhidden：非表示にする
class名の付け方やCSSの当て方はCSSプロパティ一覧｜用途別の逆引きで扱っています。
やりたいこと別の逆引き
スマートフォンで表示が崩れる
head内の<meta name="viewport" content="width=device-width, initial-scale=1">が抜けていないか確認してください。最も多い原因です。
文字化けする
<meta charset="UTF-8">を、head内のできるだけ上に書いてください。
フォームの項目名をクリックしたら入力欄に移動させたい
<label for="name">と<input id="name">のように、forとidを一致させます。操作しやすくなるだけでなく、読み上げソフトでも正しく扱われます。
画像が表示されないときに説明を出したい
alt属性に画像の内容を書きます。装飾目的の画像ならalt=""と空にします。省略ではなく空文字にするのが正しい書き方です。
表で複数のセルをつなげたい
横方向はcolspan="2"、縦方向はrowspan="2"をth・tdに付けます。
改行したい
段落が変わるなら<p>を分けてください。<br>は住所や詩など、改行そのものに意味がある場合だけ使います。余白の調整はCSSの仕事です。
使い分けで迷うタグ
div と section
見出しがあり、内容がひとまとまりならsection。単にCSSを当てるための箱ならdivです。迷ったらdivで構いません。意味のないところにsectionを使うほうが問題になります。
section と article
切り出して単体で成立するならarticle（ブログ記事、商品カード、コメント）。ページの一部としてのみ意味を持つならsectionです。
strong と b、em と i
strongとemは意味を表し、bとiは見た目を表します。重要だから太字にしたいならstrong、単にデザイン上太くしたいだけならCSSで指定してください。読み上げソフトの扱いが変わります。
ul と ol
順序に意味があるならol、なければulです。手順の説明にulを使うと、読み上げ時に順番が伝わりません。
button と a
ページを移動するならa、その場で何かを実行するならbuttonです。aにJavaScriptを付けてボタン代わりにするのは避けてください。
使ってはいけない非推奨タグ
古い解説サイトに残っていますが、現在は使いません。見た目の指定はすべてCSSで行います。
<font>：文字色・サイズ → CSSのcolor、font-size<center>：中央寄せ → CSSのtext-align、margin<big>：大きい文字 → CSSのfont-size<strike>：打ち消し線 →<del>またはCSS<marquee>：文字を流す → CSSのアニメーション<frame>/<frameset>：画面分割 → CSSのレイアウト<tt>：等幅フォント →<code>またはCSS
また、tableでページ全体のレイアウトを組む書き方も現在は使いません。表は表のためのものです。レイアウトはFlexboxかGridで組みます。
終了タグが不要なタグ
中身を持たないため、閉じタグを書きません。
<br>、<hr>、<img>、<input>、<meta>、<link>、<source>、<col>
古い書き方では<br />のように末尾にスラッシュを入れていました。現在は不要ですが、書いてもエラーにはなりません。
初心者がやりがちな書き方と改善案
1. すべてdivで組む
動きはしますが、後から読みにくくなり、読み上げソフトや検索エンジンにも構造が伝わりません。header、nav、main、footerだけでも使い分けると、大きく改善します。
2. 見出しの数字をデザインで選ぶ
「小さくしたいからh4」という選び方をすると、文書構造が壊れます。大きさはCSSで変えてください。h1から順に使うのが原則です。
3. altを空にするか省略するか迷って省略する
装飾画像ならalt=""、意味のある画像なら内容を書く。省略は「どちらでもない」状態なので避けてください。
4. idを使い回す
同じidが複数あると、JavaScriptが最初の1つしか見つけられません。複数に使うならclassです。
5. インデントを付けない
入れ子が深くなると、閉じタグの対応が追えなくなります。階層ごとに字下げしてください。
覚え方のコツ
1. 全部を覚えようとしない
実務で頻繁に使うのは30種類ほどです。まずはdiv、p、a、img、ul、li、h1〜h3、form周りを確実にしてください。
2. 開発者ツールで実物を見る
ブラウザで既存のサイトを右クリックして「検証」を開くと、実際のHTMLが見えます。教材より早く身につきます。
3. 古い情報に注意する
HTMLは解説記事の寿命が長く、10年前の書き方が検索上位に残っていることがあります。fontタグやcenterタグが出てきたら、その記事は古いと判断してください。
よくある質問
タグは暗記すべきですか
いいえ。よく使うものは書いているうちに覚えます。それ以外は「そういうタグがある」と知っていれば十分で、書き方は調べればわかります。
HTMLはプログラミング言語ですか
厳密には違います。HTMLは文書の構造を示すマークアップ言語で、条件分岐や繰り返しといった処理は書けません。ただしWeb制作の入り口としては必須です。詳しくはHTML/CSSとは？初心者にもわかりやすく基礎から解説で扱っています。
HTMLとCSSはどちらを先に学ぶべきですか
HTMLが先です。構造がないと、CSSで指定する対象がありません。ただし実際には行き来しながら学ぶことになります。
HTMLの次は何を学べばいいですか
CSSで見た目を整えられるようになったら、JavaScriptで動きをつける段階に進みます。順序はJavaScript入門ガイドにまとめています。
タグの正しい仕様はどこで確認できますか
HTMLの仕様はHTML Living Standardとして継続的に更新されています。日本語で確認するならMDN Web Docsが実務でも広く参照されています。個人ブログより、こちらを一次情報として当たってください。
独学で身につきますか
HTMLは独学しやすい部類です。書いたものがすぐブラウザで確認でき、エラーで止まることも少ないためです。つまずきやすいのはHTMLではなく、CSSのレイアウトとJavaScriptの段階です。判断の軸はプログラミング教室の選び方完全ガイドにまとめています。
まとめ
HTMLのタグは数が多く見えますが、実務で使うのは30〜40種類です。用途別に把握しておき、必要になったら調べる形で十分に足ります。
押さえるべきは3点です。見た目ではなく意味でタグを選ぶこと、fontやcenterなど古いタグを使わないこと、そしてdivに逃げすぎないこと。この3つを守るだけで、後から読めるHTMLになります。
プログラミング学習に興味がある方は、まずは無料体験会へ
