HTMLタグ一覧：現行の全要素と使い方、廃止タグまで解説

この記事でわかること

現行HTML要素113種類を用途別に一覧化。各タグの個別記事へ進み、属性・コード例・活用事例・ブラウザー互換性を確認できます。廃止タグの代替も整理します。

HTMLは文章の意味と構造を伝える言語です。この一覧は、2026年9月21日に確認したWHATWG HTML Living Standardの要素索引を基準に、現行のHTML要素をすべて用途別に整理しています。CSSで見た目を決める前に、内容に合う要素を選びましょう。

タグ・要素・属性の違い

開始タグと終了タグ

<p class="lead">こんにちは</p> では、<p class="lead"> が開始タグ、</p> が終了タグ、内容を含む全体が要素です。class は属性で、CSSやJavaScriptから対象を選ぶために利用できます。以下の一覧はタグ名ごとに要素の役割を説明します。

空要素と宣言

area・base・br・col・embed・hr・img・input・link・meta・source・track・wbr は空要素で、終了タグを付けません。<!doctype html> はHTMLの要素ではなく、標準モードを指定する宣言です。コメントの  も要素ではありません。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTMLタグの練習</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <main>
    <h1>HTMLタグの練習</h1>
    <p class="lead">意味に合うタグを選びます。</p>
  </main>
</body>
</html>

現行HTML要素の一覧

一覧にあることと、すべてのブラウザーで同じように使えることは別です。特に新しい機能は、リンク先の互換性情報と対象ブラウザーを確認してください。名前のリンクから、各タグの属性・コード例・活用事例・互換性を解説する個別記事へ進めます。

文書の土台と設定

<html>：文書全体のルート。日本語のページでは lang="ja" を指定し、読み上げの言語も伝えます。
<head>：タイトルやCSSの読み込みなど、本文の表示を支える情報をまとめます。
<body>：見出し、文章、画像、フォームなど、利用者が読むページ本体を置きます。
<title>：ブラウザーのタブや検索結果のタイトル候補になる文書名。本文の見出しとは別に設定します。
<meta>：文字コード、概要、viewportなどを属性で指定します。終了タグはありません。
<link>：外部CSSやアイコンとの関係を宣言します。ページ内の移動リンクには a を使います。
<style>：HTML内にCSSを書きます。複数ページで共通にするなら外部CSSへ分けると管理しやすくなります。
<base>：相対URLの基準を変えます。画像やページ内リンクにも影響するため、導入時は全リンクを確認します。

ページの構造と見出し

<header>：ページや記事の導入部分。ロゴ、タイトル、案内などをまとめます。
<footer>：ページや記事の末尾に、著作権や関連情報を置きます。
<main>：そのページの中心となる内容。通常は表示中の main を1つにします。
<nav>：主要な移動リンクのまとまり。すべてのリンク集を nav にする必要はありません。
<article>：単独でも意味が通じる記事や投稿。内容の独立性を基準に選びます。
<section>：見出しのある主題別のまとまり。装飾だけの箱なら div を使います。
<aside>：本文を補足する関連情報。横に配置すること自体を意味するタグではありません。
<search>：検索や絞り込みに関係する操作をまとめます。検索結果を取得する処理は別に実装します。
<address>：ページや記事の著者・組織への連絡先。単なる住所表記をすべて囲む用途ではありません。
<h1>：最上位の見出し。この教材ではページタイトルに1つ使います。
<h2>：h1 の下にある大きな章の見出しです。
<h3>：h2 の章をさらに分ける小見出しです。
<h4>：h3 の下の節を表します。文字サイズの好みで見出しレベルを選ばないようにします。
<h5>：h4 の下の節を表します。深くなりすぎたら文書の分割も検討します。
<h6>：6段階の見出しで最も深いレベルです。
<hgroup>：1つの見出しと、その副題などの p をまとめます。複数の章見出しを束ねるものではありません。

段落・リスト・引用・図

<p>：1つの段落。中に section や別の p を入れず、文章の区切りとして使います。
<div>：特別な意味を持たないブロックのまとまり。適切な意味のある要素がない場合に選びます。
<br>：詩や住所など、内容として必要な改行。段落間の余白はCSSで指定します。
<hr>：話題の転換を表します。見た目だけの罫線ならCSSの border を検討します。
<ul>：順番に意味がないリスト。項目を li に入れます。
<ol>：手順や順位など、順番に意味があるリスト。start で開始番号も変えられます。
<li>：ul・ol・menu の中の1項目です。
<menu>：操作項目などのリスト。各項目を li にし、動作には button などを使います。
<dl>：用語と説明など、名前と値の組をまとめます。
<dt>：dl の中で用語や名前を示します。
<dd>：直前の dt に対応する説明や値を示します。
<blockquote>：まとまった引用。出典URLを cite 属性に設定でき、読者向けの出典リンクは本文にも置きます。
<pre>：改行や空白を保って表示。コード例では code と組み合わせ、HTMLの記号はエスケープします。
<figure>：図、画像、コード例など、本文から参照できるまとまりです。
<figcaption>：figure の説明文。figure の最初か最後に置きます。

文字の意味とリンク

<a>：href を指定して移動先へリンク。操作を実行するだけなら button を選びます。
<abbr>：略語。title に正式名称を補えますが、重要な説明は本文にも書きます。
<b>：重要性の強調ではなく、キーワードなど読者の注意を向けたい文字です。
<strong>：重要、重大、緊急であることを示します。太字にするだけならCSSを使います。
<em>：文の意味に関わる強勢。強調する位置で意味が変わる箇所に使います。
<i>：専門用語や思考など、通常の本文と性質が異なる文字を表します。
<u>：綴りの指摘など、文字に注釈があることを示します。リンクに見える装飾には注意します。
<s>：もはや正確でない情報。文書の編集による削除には del を使います。
<small>：免責や著作権などの付記。小さい文字すべてに使うものではありません。
<mark>：検索語への一致など、その文脈で注目する部分です。
<span>：特別な意味を持たない文字範囲。部分的なCSSやスクリプトの対象にします。
<cite>：作品の題名。人物の名前そのものを示すためのタグではありません。
<q>：文中の短い引用。長い引用は blockquote に分けます。
<dfn>：その用語を定義している箇所。説明を周辺の文章に書きます。
<code>：ソースコードやファイル名など、コンピューター上の表記です。
<kbd>：利用者が入力するキーやコマンド。例は Ctrl + S です。
<samp>：プログラムから返された出力。入力と区別して示せます。
<var>：数式やプログラムの変数。長いコード全体には code を使います。
<data>：表示内容に機械処理用の value を対応させます。日時なら time が適しています。
<time>：日付や時刻。datetime に機械が読み取れる値を指定します。
<sub>：化学式などの下付き文字。単なる位置調整にはCSSを使います。
<sup>：指数などの上付き文字。脚注リンクにも利用できます。
<ruby>：漢字と読み仮名などのルビの組をまとめます。
<rt>：ruby の中に読み仮名を記述します。
<rp>：ルビを表示できない環境向けの括弧などを置きます。
<bdi>：外から来た名前などの文字方向を、周囲から独立させます。
<bdo>：dir で文字方向を明示的に上書きします。通常の文章では必要ありません。
<wbr>：長い文字列で、必要なら折り返してよい位置を示します。
<ins>：文書に追加された部分。datetime で編集日時を補足できます。
<del>：文書から削除された部分。古い価格などの単なる無効情報とは区別します。

画像・動画・埋め込み

<img>：画像を表示。内容を伝える alt、寸法の width・height を設定します。装飾画像は alt="" にします。
<picture>：画面条件や画像形式に応じて画像を選択。最後に必ず img を置きます。
<source>：picture・audio・video の候補ソース。親により srcset と src の使い分けが変わります。
<video>：動画を再生。controls、字幕、poster を検討し、自動再生だけに依存しない構成にします。
<audio>：音声を再生。controls を付け、内容を読める文字起こしも検討します。
<track>：動画の字幕などのテキストトラック。WebVTTファイルを src で指定します。
<iframe>：別の文書を埋め込みます。title で内容を説明し、必要に応じ sandbox や allow を絞ります。
<embed>：外部コンテンツを埋め込む空要素。表示対応に依存するため代替リンクも用意します。
<object>：外部リソースを埋め込み、利用できない場合の代替内容を内側に置けます。
<map>：画像上のクリック領域をまとめ、img の usemap と名前で対応付けます。
<area>：map 内の領域と移動先。shape・coords と、リンクの説明となる alt を指定します。
<canvas>：JavaScriptなどで描画する領域。図の意味は代替内容や周囲の説明でも伝えます。

表

<table>：行と列の関係を持つデータの表。ページの配置目的には使いません。
<caption>：表の題名。table の先頭に置いて何の表か説明します。
<colgroup>：列のまとまり。列単位の設定に使いますが、すべてのCSSが列に効くわけではありません。
<col>：colgroup 内の列を表し、span で対象列数を指定できます。
<thead>：表の見出し行をまとめます。
<tbody>：表のデータ行をまとめます。
<tfoot>：合計など、表を締めくくる行をまとめます。
<tr>：表の1行。その中に th または td を置きます。
<th>：見出しセル。scope="col" や scope="row" で対応を明確にします。
<td>：通常のデータセル。colspan・rowspan による複雑な結合は読みやすさも確認します。

フォームと状態

<form>：入力項目をまとめます。action と method で送信先・方式を設定し、受け取り側でも検証します。
<label>：入力欄の説明。for と入力要素の id を一致させるとクリックでも選択できます。
<input>：type によって文字・メール・チェック・ファイルなどの入力欄になります。name は送信時の項目名です。
<textarea>：複数行の入力欄。初期値は value 属性ではなく開始・終了タグの間に書きます。
<button>：クリックやキーで実行する操作。送信しないボタンには type="button" を指定します。
<select>：候補から選ぶ入力。option を子に置き、label で目的を伝えます。
<option>：選択肢。表示名と送信する value を分けられます。
<optgroup>：select の選択肢を label 属性の名前でグループ化します。
<datalist>：input の list と id を対応させ、入力候補を出します。候補以外の値を禁止する機能ではありません。
<fieldset>：関連する入力項目をまとめます。ラジオボタンなどのグループに適しています。
<legend>：fieldset の題名。グループ全体で何を尋ねているか伝えます。
<output>：計算や操作による結果を示します。計算処理そのものはJavaScriptなどで実装します。
<progress>：処理の進捗。value と max を設定し、進捗不明なら value を省きます。
<meter>：既知の範囲内の測定値。容量や評価などに使い、処理の進捗とは区別します。
<selectedcontent>：カスタマイズ可能な select で、選択された option の内容を表示する仕組みです。新しい機能のため対応状況と代替表示を確認します。

開閉・スクリプト・部品

<details>：利用者が開閉できる補足情報。open 属性で初期状態を開けます。
<summary>：details の最初の子に置く開閉見出し。操作内容が分かる文章にします。
<dialog>：ダイアログ。showModal() でモーダル表示し、閉じる手段やフォーカスを確認します。
<script>：JavaScriptやデータを記述。外部スクリプトには src、モジュールには type="module" を使います。
<noscript>：スクリプトが無効な場合などの代替内容。配置場所によって書ける内容が変わります。
<template>：通常はそのまま表示されないHTMLのひな型。JavaScriptで複製するなどして利用します。
<slot>：主にShadow DOMで外から渡す内容の差し込み位置。name で複数の位置を区別します。

組み合わせて使う実例

見出し・図・リンクを備えた記事

<article>
  <h2>学習会のお知らせ</h2>
  <p><time datetime="2026-10-01">10月1日</time>に開催します。</p>
  <figure>
    <img src="./workshop.svg" alt="HTMLからCSS、JavaScriptへ進む学習順" width="640" height="480">
    <figcaption>1つのサイトを段階的に作ります。</figcaption>
  </figure>
  <p><a href="/html-css/">学習の順番を見る</a></p>
</article>

article は独立したお知らせ、time は開催日、figure は説明付きの図です。画像ファイルは連載の完成コードに含まれています。見出しはこの断片を置く文書全体の階層に合わせます。

入力欄と説明を関連付ける

<form>
  <fieldset>
    <legend>参加情報</legend>
    <label for="visitor">名前</label>
    <input id="visitor" name="visitor" autocomplete="name" required>
  </fieldset>
  <button type="button">入力を確認する</button>
</form>

この断片だけでは確認処理は動きません。button にイベント処理を追加する手順はJavaScriptとの連携記事で説明しています。placeholder は label の代わりにはなりません。ブラウザーの入力検証だけを信用せず、実際に送信する場合はサーバーでも検証してください。

HTML以外の要素と拡張機能

SVG・MathML・カスタム要素

<svg> はベクター画像、<math> は数式の別の名前空間のルートです。HTML内に埋め込めますが、上のHTML要素数には含めていません。<my-card> のようにハイフンを含む名前は、条件を満たせばカスタム要素として定義できます。アプリ固有の名前まで含めた有限の「全タグ一覧」はありません。

実験的な提案

<fencedframe> など実験中の要素やブラウザー独自機能は、現行標準の一覧とは分けて扱います。仕様にある機能も実装が追い付いていない場合があるため、新しいタグを使う際はフォールバックを用意してください。

廃止・非推奨タグを見つけたら

新規のページで以下を採用するのは避けます。古いコードを読むための一覧で、過去の全ブラウザーの独自拡張を網羅するものではありません。

装飾や配置のために使われていたタグ

acronym：略語を表した旧要素。現在は abbr を使います。
big：文字を大きくする旧要素。CSSの font-size へ移します。
center：中央寄せ。CSSの text-align やレイアウト機能で目的に応じて置き換えます。
font・basefont：書体や色の指定。CSSの font-family・font-size・color を使います。
strike：取り消し線。意味が無効情報なら s、編集削除なら del、装飾ならCSSです。
tt：等幅表示。意味がコードなら code、見た目だけなら font-family を使います。
nobr：改行抑制。必要な範囲だけ white-space を指定し、横のはみ出しを確認します。
spacer：余白作成。CSSの margin・padding・gap へ移します。
blink・marquee：点滅や流れる文字。読みづらい動作を引き継がず、静的な表示を基本に見直します。
multicol：旧式の段組み。必要ならCSSの column-count などで構成します。

文書分割・埋め込み・古い入力

frame・frameset・noframes：古いフレーム分割。通常のページ構造とCSSで再構成し、別文書の埋め込みに限り iframe を検討します。
applet：Javaアプレット。現在のWeb技術で機能を作り直します。
bgsound：旧式の背景音。必要なら利用者が操作できる audio にします。
noembed：埋め込みの代替表示。通常の本文に説明と代替リンクを用意します。
isindex：旧式の検索入力。form・label・input で作り直します。
keygen：旧式の鍵生成フォーム部品。単純なタグ置換では済まないため認証の設計から見直します。
menuitem：旧メニュー項目。button や a を含む通常の構造を使います。
dir：旧リスト。ul と li に置き換えます。
listing・xmp：旧式の整形済み文字列。pre と code を使い、< や & をエスケープします。
plaintext：後続を文字列として扱う旧要素。通常の文書構造へ修正し、表示するコードをエスケープします。
content・shadow：古いShadow DOMの仕組み。現在のShadow DOMと slot の設計へ移行します。
rb・rtc：旧ルビ構造。現在の ruby・rt・rp で読みの対応を確認しながら再構成します。
param：object への旧パラメーター。対象の埋め込み方式を現行の仕組みへ見直します。
nextid：古い編集システム用の要素。現在の文書には追加しません。

学び方と参照資料

最初は html・head・body・h1〜h3・p・a・img・ul・li でページを作り、目的が増えたときに一覧へ戻りましょう。要素を多く使うこと自体がSEO対策になるわけではありません。内容が読みやすく、リンクと見出しで情報を見つけられる構造が基本です。