HTMLタグ一覧【カテゴリ別・使用例付きリファレンス】

HTMLタグ（HTML要素）とは、文書のその部分が何であるかをブラウザ・支援技術・検索エンジンに伝えるための印です。見た目を決めるものではありません。

この記事は「どのタグがあるか」を並べた索引ではなく、いま自分が書いた要素の選択がHTML Living Standardに適合しているか、非適合の要素を踏んでいないかを、この記事の中だけで判定できるリファレンスとして作っています。全13分類・114要素の表に「使いどころ（○使う／×避ける）」の列を置き、末尾には仕様が「作者は使ってはならない」と明記した非適合要素29個の一覧と代替を載せました。

規範（何が適合で何が非適合か）はWHATWG HTML Living Standardを正とし、日本語の解説とブラウザ実装状況（Baseline）はMDN Web Docs の HTML 要素リファレンスを併用しています。本記事の仕様の記述は、2026年7月20日更新版のHTML Living Standardを直接参照して確認したものです。

最後に、書いたタグが実際に効いているかをブラウザだけで判定する手順を用意しました。表を読むだけで終わらせず、自分のページで1回動かしてみてください。

この一覧の使い方｜「廃止」ではなく「適合／非適合」で見る

タグ一覧を読むときにいちばん事故が起きるのは、「このタグはHTML5で廃止された」という説明を鵜呑みにすることです。まずこの前提から整理します。

「HTML5で廃止」という言い方をこの記事が使わない理由

HTMLには「HTML5」で止まったバージョン番号がありません。現在のHTMLはWHATWGが継続的に更新するLiving Standard（生きた標準）で、版番号ではなく更新日で管理されています。そのため「HTML5で廃止された」という表現は、指している対象も時点も曖昧になります。

仕様が実際に書いているのは「廃止」ではなく、非適合（non-conforming）です。HTML Living Standard §16.2 は該当する要素を列挙したうえで、「完全に旧式であり、作者は使用してはならない（entirely obsolete, and must not be used by authors）」と規定しています。対象は29個です。

そして重要なのは、「作者は使ってはならない」と「ブラウザから消える」は別の話だということです。同じ仕様の§16.3は、ブラウザ側に対して marquee の動作や frameset のインターフェイスを実装するよう求めていますし、§15（描画）には center や big の既定スタイルが今も書かれています。互換性のために動き続けるだけで、書いてよい根拠にはなりません。

この記事では、この2つを混ぜないために「廃止」という語を使わず、「非適合（作者は使用禁止）」と「ブラウザ実装は残る」を分けて表記します。

規範はWHATWG、実装状況はMDNで確認する

HTMLの情報源は複数あり、書いてあることが食い違って見えることがあります。役割が違うだけなので、次のように使い分けると迷いません。

「仕様では適合だが、まだ全ブラウザには届いていない」という要素もあります。適合かどうかはWHATWG、いま実戦投入してよいかはMDNのBaseline、と二段で確認するのが安全です。

文書の骨格をつくるタグ

ページの外枠と、ページを意味のある区画に分けるためのタグです。ここを間違えると、後半の検証で扱うランドマーク（支援技術がページを移動するための目印）が1つも生成されません。

文書構造・メタデータ

HTML文書の基本構造と、ブラウザや検索エンジンへ情報を渡すタグです。

セクション・ページ構造

ページを意味のある区画に分けるタグです。この分類のタグは、正しく置かれるとアクセシビリティツリーにランドマークとして現れます。div で代用すると現れません。後半の検証はここを見ます。

<search> は比較的新しい要素ですが、MDNのBaselineは2023年10月から Widely available（広く利用可能）です。これまで <form role="search"> と書いていた箇所は、<search> で囲むだけで同じランドマークが得られます。

<address> の限定条件は見落とされがちです。仕様は「address 要素は任意の住所（例えば郵便の住所）を表すために使ってはならない。ただしその住所が実際に該当する連絡先情報である場合を除く」と書いています。会社概要ページの所在地は、多くの場合 p が正解です。

見出し（h1〜h6）

コンテンツの階層を示すタグです。ここは通説と仕様がずれている代表格なので、先に事実を置きます。

「h1はページに1つ」は仕様の規定ではありません。HTML Living Standard §4.3.11 は「文書は複数のトップレベル見出しを含むことができる（A document can contain multiple top-level headings）」として、h1 を3つ並べた例を適合として示しています。仕様が求めているのは、①見出しが1つ以上あるなら、そのうち少なくとも1つはレベル1であること、②直前の見出しに対してレベルの飛び降りをしないこと（前の見出しより小さいか、同じか、1だけ大きいレベルであること）の2点です。

実務でh1を1つに絞る運用自体は妥当ですが、その根拠はSEOではなく、目次としての読みやすさと運用のしやすさにあります。この判断の裏付けはGoogle公式ドキュメントを含めて別記事で扱っています。

▶ h1の数・見出しの階層について、Google公式が実際に書いていることを確認する

文章を組み立てるタグ

本文の中身を作るタグです。ここは「見た目が同じでも意味が違う」ペアが多く、選択を間違えても画面上は気付けません。

テキスト・インライン

文章の一部に意味を与えるタグです。b と strong、i と em のように、表示は似ていて意味が異なる組み合わせに注意してください。

ルビ・編集履歴・書字方向

日本語のページで必要になるのに、タグ一覧から抜け落ちやすい分類です。特にふりがな（ルビ）は日本語特有の要件で、CSSでは代替できません。

なお、ルビ関連で古い記事に出てくる <rb> と <rtc> は非適合です。仕様は「ルビのベーステキストは ruby 要素の中に直接置くか、ruby を入れ子にすれば足りる」としています。

引用・コード

他人の文章とプログラムコードを、地の文と区別するためのタグです。

リスト

並列・順序・定義の3種類を表すタグです。menu の位置づけがよく誤解されています。

<menu> の実態は押さえておく価値があります。MDNは「仕様上は <ul> のセマンティックな代替として説明されているが、ブラウザからは（そしてアクセシビリティツリー上でも）<ul> と何ら変わらないものとして扱われる」と明記しています。つまり menu に置き換えても支援技術への伝わり方は1ミリも変わりません。かつての「コンテキストメニューを作るタグ」という用途は仕様から削除されており、その名残の menuitem は非適合要素29個のひとつです。

データと入力を扱うタグ

表とフォームです。どちらも「見た目を作る道具」として誤用されやすい分類で、誤用するとキーボード操作と読み上げが同時に壊れます。

テーブル

データを表形式で示すタグです。レイアウト目的での使用は仕様上も認められていません。

フォーム

ユーザー入力を受け取るタグです。label の関連付けだけは省略しないでください。

メディア・描画・対話のタグ

画像・動画・図形・対話UIのタグです。この分類はブラウザ側の実装状況が結果を左右するため、適合かどうかに加えてBaselineの確認が要ります。

画像・メディア

画像・動画・音声・外部コンテンツの埋め込みです。

グラフィック・描画

図形と数式です。svg と math はHTMLとは別の仕様の要素ですが、HTML文書に直接書けます。

インタラクティブ要素とWebコンポーネント

ユーザー操作に応答するタグと、カスタム要素のためのタグです。

<dialog> は「JavaScriptと組み合わせて使うもの」と説明されることが多いのですが、現在は宣言的な開閉手段が用意されています。<form method="dialog"> による閉じる操作は当初からの機能で、加えてボタンの command・commandfor 属性（Invoker Commands API）で開閉を書けます。ただし後者のMDN Baselineは2025年12月からの Newly available（新しく利用可能）で、古い端末やブラウザでは動きません。2026年8月時点で本番投入するなら、JavaScriptのフォールバックを併記するのが安全です。

汎用コンテナ

意味を持たない箱です。これまでに挙げた分類のどれにも当てはまらないときにだけ使います。

使ってはいけない非適合要素29個

ここまでが適合する要素です。対して、仕様が「作者は使用してはならない」と名指ししている要素が29個あります。古い教材やテンプレートから紛れ込むのはほぼこの一覧の中からです。

非適合要素の一覧と代替

代替の欄は、HTML Living Standard §16.2 が示している置き換え先をそのまま日本語にしたものです。「ブラウザでの扱い」は、同じ仕様の §15（描画）または §16.3（実装要件）に規定が残っているかを示します。

「ブラウザで動く」は「使ってよい」ではない

上の表で「仕様に残る」となっている18個は、いま書いても画面上は動いてしまいます。これが混乱のもとです。仕様が実装側に互換動作を求めているのは、過去に公開された膨大なページを壊さないためであって、これから書くページのためではありません。

判断は単純です。29個のどれかを書いていたら、動いていても直す。逆に、この一覧に載っていない要素であれば、たとえ古めかしく見えても適合です（b・i・small・u は非適合ではなく、意味が再定義されて残っています）。

なお、非適合なのは要素だけではありません。table の border・cellpadding・bgcolor、img の align・hspace、a の rev など、属性側にも同じ「使用してはならない」の指定が並んでいます。原文の一覧はHTML Living Standard §16.2で確認できます。

よくあるタグ選びのミス

実務で頻出する誤用と、その置き換え先です。左の書き方を見つけたら、右の判断に従って直せます。

この表の左側に心当たりがあるなら、次の検証で実際にどう出ているかを確かめてください。

検証｜ランドマークの数で、タグ選択の正否を判定する

ここまでの表を読んでも、自分のページで選んだタグが効いているかどうかは分かりません。判定できる場所がひとつあります。アクセシビリティツリーのランドマークです。

header・main・nav・aside・footer・search は、正しい位置に置かれると暗黙のARIAロールを持ち、ランドマークとしてツリーに現れます。div で代用していると1つも現れません。つまりランドマークの数を数えれば、セクション系のタグ選択が効いているかを一発で判定できます。所要3分です。

手順｜ページのランドマークを数える

対象のページをブラウザで開き、開発者ツールのコンソールに次のコードを貼り付けて実行します。要素と暗黙のロールの対応は W3C「ARIA in HTML」の定義に合わせています。

(() => {
  const SCOPED = 'article, aside, main, nav, section';
  const LANDMARKS = new Set(['banner','contentinfo','main','navigation','complementary','search','form','region']);
  const named = (el) => !!(el.getAttribute('aria-label') || el.getAttribute('aria-labelledby'));
  const implicitRole = (el) => {
    const t = el.tagName.toLowerCase();
    if (t === 'header')  return el.closest(SCOPED) ? null : 'banner';
    if (t === 'footer')  return el.closest(SCOPED) ? null : 'contentinfo';
    if (t === 'main')    return 'main';
    if (t === 'nav')     return 'navigation';
    if (t === 'aside')   return 'complementary';
    if (t === 'search')  return 'search';
    if (t === 'form')    return named(el) ? 'form' : null;
    if (t === 'section') return named(el) ? 'region' : null;
    return null;
  };
  const rows = [];
  document.querySelectorAll('header,footer,main,nav,aside,search,form,section,[role]').forEach((el) => {
    const role = el.getAttribute('role') || implicitRole(el);
    if (!role || !LANDMARKS.has(role)) return;
    rows.push({ role, tag: el.tagName.toLowerCase(), name: el.getAttribute('aria-label') || '' });
  });
  const count = {};
  rows.forEach((r) => { count[r.role] = (count[r.role] || 0) + 1; });
  console.table(rows);
  console.log(count);
})();

実行すると、ランドマークの一覧と、ロールごとの個数が表示されます。参考までに、2026年8月時点のこのページで実行した実測値は banner: 1 / navigation: 3 / main: 1 / complementary: 1 / search: 1 / contentinfo: 1 でした。

同じことは開発者ツールのアクセシビリティ関連の表示からも確認できますが、パネルの名称と場所はブラウザのバージョンで変わります。ここではバージョンに依存しないコンソール実行を手順としました。

合否ライン

実行結果を次の表と突き合わせてください。すべての行が「合」であれば、セクション系のタグ選択は成立しています。

ちなみに、2026年8月時点のこのページで実測したところ search ランドマークは <form role="search"> によって出ていました。<search> で囲めば、この role 属性は不要になります。表2で触れた話が、そのまま実測に現れる箇所です。

外れたときに見る場所

合否ラインを外れたときは、次の表で原因を切り分けてください。戻る先はこの記事の中にあります。

最後の1行だけはこの記事の範囲外です。ランドマークが揃っていて、それでも構造がおかしいと感じる場合は、見出しの並びを別に点検してください。ここで検証を止め、それ以上は追いません。

▶ 見出し構造をブラウザだけで点検する方法を見る

▶ HTMLアウトラインチェッカーで見出しの階層を確認する

▶ ランドマークと支援技術の関係をもう少し詳しく知る

よくある質問（FAQ）

Q. HTMLタグは全部覚える必要がありますか？

暗記は不要です。この記事にまとめた適合要素は13分類・114個ありますが、1ページを組むのに実際に登場するのはそのうちのごく一部です。覚えておく価値があるのは個々のタグ名ではなく、「作者が使ってはならない要素が29個あり、それはHTML Living Standard §16.2 に列挙されている」という所在のほうです。判断に迷ったら、まず非適合の一覧に載っていないかを確認し、次にMDNでBaselineを見る、という順番が最短になります。

Q. 「HTML5で廃止されたタグ」とは結局どれのことですか？

HTMLにはバージョン番号がないため、正確には「廃止」ではなく「非適合（作者は使用してはならない）」です。対象は29個で、applet・acronym・bgsound・basefont・big・blink・center・dir・font・frame・frameset・isindex・keygen・listing・marquee・menuitem・multicol・nextid・nobr・noembed・noframes・param・plaintext・rb・rtc・spacer・strike・tt・xmp が該当します。このうち18個はブラウザ互換のために仕様側にも描画や動作の規定が残っており、書けば動いてしまいますが、それは使ってよい根拠にはなりません。

Q. セマンティックHTMLとは何ですか？なぜ重要ですか？

コンテンツの意味に合ったHTML要素を選ぶマークアップのことです。重要である理由は、効果が測定できる形で現れるからです。header・main・nav・aside・footer・search を正しく置くとアクセシビリティツリーにランドマークが生成され、支援技術の利用者はそこを目印にページ内を移動できます。div で代用するとランドマークは1つも生成されません。この記事の後半にある手順で、自分のページに実際にいくつ出ているかを数えられます。

Q. h1はページに1つだけにしなければいけませんか？

仕様上の要求ではありません。HTML Living Standard は「文書は複数のトップレベル見出しを含むことができる」として、h1 を3つ並べた例を適合として示しています。仕様が求めているのは、見出しが1つ以上あるならそのうち少なくとも1つがレベル1であること、そして直前の見出しに対してレベルを飛び降りないことの2点です。実務でh1を1つに絞る運用には別の合理性がありますが、それは仕様やSEOの規定ではなく設計上の判断です。

Q. menuタグはulと何が違いますか？

結論から言うと、支援技術への伝わり方は変わりません。MDNは menu について「仕様上は ul のセマンティックな代替として説明されているが、ブラウザからは、そしてアクセシビリティツリー上でも ul と何ら変わらないものとして扱われる」と明記しています。仕様上はツールバー（コマンドの並び）を表す意図がありますが、実効的な違いはありません。かつての「右クリックメニューを作る」用途は仕様から削除され、その名残の menuitem は非適合要素のひとつです。

Q. searchタグは今から使って大丈夫ですか？

問題ありません。MDNのBaselineでは2023年10月から Widely available（広く利用可能）です。最大の利点は、暗黙のARIAロールが search であるため、これまで <form role="search"> と書いていた role 属性の付与が不要になることです。検索欄と絞り込みUIをまとめて囲む用途に使い、検索結果そのものを囲む用途には使いません。

Q. ふりがな（ルビ）を付けるにはどのタグを使いますか？

ruby・rt・rp の3つです。ruby で全体を囲み、読みを rt に入れ、ルビ非対応環境のために括弧を rp で挟みます。仕様はこの用途を「日本語では振り仮名としても知られる」と明記しており、CSSでは代替できません。古い記事に出てくる rb と rtc は非適合で、ベーステキストは ruby の中に直接書くか ruby を入れ子にすれば足ります。

まとめ｜迷ったら「非適合でないか」「ランドマークが出るか」の2点で見る

タグ選びで本当に判断が要るのは、次の2点だけです。

• 書こうとしている要素が非適合29個に入っていないか（入っていれば、動いていても直す）
• セクション系のタグがランドマークとして出ているか（出ていなければ div で代用している）

残りは、この記事の表で「使いどころ」の列を見れば選べます。表を眺めて終わりにせず、いま作っているページで一度コンソールを開き、ランドマークを数えてみてください。banner・main・contentinfo の3つが1ずつ出ていれば、骨格は成立しています。

HTMLの規範は更新され続けます。この記事の内容は2026年8月2日時点でHTML Living StandardとMDNを直接参照して確認したものですが、判断に迷ったときは一次情報に当たってください。

• 仕様の原文（適合／非適合の判断）: HTML Living Standard §16 Obsolete features
• 見出しとアウトラインの規定: HTML Living Standard §4.3 Sections
• 日本語の要素リファレンスとBaseline: MDN Web Docs｜HTML 要素リファレンス
• 要素と暗黙のARIAロールの対応: W3C｜ARIA in HTML

同じ形式のリファレンスと、手を動かして確認できる練習問題も用意しています。

▶ CSSプロパティ一覧【カテゴリ別・使用例付きリファレンス】

▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】

▶ HTMLの練習問題で、タグ選択を実際に手で確かめる

▶ rel属性の指定はどう書き分けるかを確認する

コードの新旧を比べたいときは Diff Checker（コード比較ツール） も利用できます。ページのHTML構造やメタ情報をまとめて診断したい場合は、SEO診断ツールのDirebase（ディレベース）で1ページずつ確認できます。

▶ Direbaseでページの構造を1回診断してみる