HTMLタグ一覧表｜基本タグから全要素まで表示例・コピペ用コード付き

HTMLタグとは、文章の各部分に「ここは見出し」「ここはリンク」といった意味と役割を与えるための目印で、現在のHTMLの仕様である HTML Living Standard に定義されている要素は、廃止されたものを除いて 115 種類（MathML の math と SVG の svg を含む）です。 この記事では、まず覚える20タグの早見表、全要素のカテゴリ別一覧表（廃止要素とその代替の書き方を含む）、主要な要素の「コード＋ブラウザでの表示例」、改行・リンク・太字・色・画像・表・リストといった「やりたいこと別」の書き方、グローバル属性の一覧とブロック／インラインの対応表まで、1ページで辞書のように引けるようにまとめました。

表示例は、このページの中で実際に HTML を描画しています（手元の Chromium 141 で崩れがないことを確認済み）。また「<p> を閉じ忘れるとどう解釈されるか」「target="_blank" のリンクは元のタブとつながるか」といった挙動は、Chromium 141 を Playwright 1.56 で動かして確かめた結果をそのまま載せています。要素の一覧は HTML Living Standard の要素インデックスと廃止機能の章、MDN の要素リファレンスをもとにしています。

まず覚える20タグの早見表（タグ・役割・コピペ用の最小コード）

最初に覚えるのはこの20タグで十分です。 コードはそのまま貼って使えます（<br>・<img>・<input>・<hr> は閉じタグを書きません）。

HTMLタグの基本：要素・属性・書き方のルール

タグと要素と属性の違い

「タグ」は <p> や </p> という目印そのもの、「要素」は開始タグから終了タグまでの全体（中身を含む）、「属性」は開始タグの中で要素に情報を足す 名前="値" の部分です。 会話では「pタグ」と「p要素」がほぼ同じ意味で使われますが、仕様書（HTML Living Standard）は「要素」で統一しています。

<a href="https://example.com/" target="_blank">リンク文字</a>
<!--
  <a ...>      … 開始タグ
  href="..."   … 属性（名前=値）
  target="..." … 属性
  リンク文字    … 内容（コンテンツ）
  </a>         … 終了タグ
  全体          … a 要素
-->

閉じタグが要らない要素（空要素）の一覧

次の13要素は内容を持たないので、終了タグを書きません（空要素・void element）。 <br/> のように末尾にスラッシュを付けても HTML ではスラッシュが無視されるだけなので、付けても付けなくても同じ結果になります。

MDN の用語集は、廃止された param を含めて14要素としています。SVG や MathML（XML の文法）では <circle ... /> のように自己終了の書き方が必要ですが、HTML の要素では不要です。

Chromium 141 で確かめた結果（Playwright 1.56 で HTML を読み込ませ、ブラウザが組み立てた DOM を innerHTML で取り出したもの）：

入力: <p>a<br/>b<br>c</p>
結果: a<br>b<br>c            … スラッシュの有無にかかわらず同じ

入力: <p><img alt=a src=a.png></img>後</p>
結果: <img alt="a" src="a.png">後   … 空要素の終了タグは無視される

入力: <img src=logo.svg/ alt=x>
結果: src の値は "logo.svg/"      … 引用符なしの値では / が値の一部になる

末尾スラッシュを付ける習慣がある場合は、属性値を必ず引用符で囲むのが安全です。 引用符がないと / が値の一部として読まれます（3つ目の結果）。

大文字・小文字と引用符のルール

最小のHTML文書（コピペ用）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ページのタイトル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>ページの見出し</h1>
  <p>本文です。</p>
</body>
</html>

<!DOCTYPE html> は「標準モードで描画してください」という宣言で、HTML Living Standard ではこの短い形だけを使います。 lang="ja" は読み上げソフトや翻訳機能に言語を伝える属性で、日本語のページでは必ず付けておきたい属性です。

「HTML5」と「HTML Living Standard」の関係

HTML5 は 2014 年に W3C が勧告した版の名前で、現在は WHATWG が継続的に更新する「HTML Living Standard」が唯一の仕様です。 2019 年に W3C と WHATWG が合意し、以後は Living Standard に一本化されました（この経緯は一般に知られた事実として書いています）。「HTML5 で追加されたタグ」と呼ばれる article・section・nav・video などは、そのまま Living Standard に引き継がれています。

バージョン番号がないので「HTML5 対応」という言い方は意味が薄れ、「Living Standard に沿っているか」「使いたいブラウザが対応しているか」の2点で考えるのが現在の見方です。 ブラウザの対応状況は MDN の各要素ページの互換性表で確認できます。

HTML全要素のカテゴリ別一覧表（HTML Living Standard の115要素＋廃止要素）

ここからが本記事の中心です。HTML Living Standard に定義されている要素を、仕様書の章立てに沿った10カテゴリに分けて、役割・主な属性・備考（ブロック的かインライン的か、必須の親子関係など）を1行ずつまとめました。 「ブロック的」はそれ自体が行を占める要素、「インライン的」は文の途中に置ける要素という意味です（厳密な定義は後述の「コンテンツカテゴリ」の節で説明します）。グローバル属性（id・class など）はすべての要素で使えるので、表の「主な属性」からは省いています。

文書・メタデータ（8要素）

セクション（14要素）

グルーピング（16要素）

テキストレベル（29要素）

編集（2要素）

埋め込みコンテンツ（13要素）

テーブル（10要素）

フォーム（15要素）

インタラクティブ（3要素）

スクリプト（5要素）

廃止・非推奨（Living Standard で「使用不可」とされる29要素と代替の書き方）

HTML Living Standard の「廃止された機能」の章には、作者が使ってはいけない要素として次の29要素が挙げられています。 いずれもブラウザは互換性のために今も解釈しますが（Chromium 141 で <center><font color=red> を読み込ませると HTMLElement／HTMLFontElement として赤く描画されました）、新しく書くときは右の列の方法に置き換えます。

MDN の要素リファレンスには、このほかに image（img として解釈される）、content・shadow（以前の Shadow DOM 案）も「廃止」として載っています。 また MDN には fencedframe や geolocation のように、まだ Living Standard には入っていない実験的な要素も載っています。この記事の「115要素」には含めていません。

同じ章では、要素そのものは使えても属性だけが廃止されたものも挙げられています。見た目を決める属性はすべて CSS に置き換えます。

カテゴリ別：主要な要素のコードと表示例

ここからは、よく使う要素をカテゴリごとに「コード → 実際の表示」の順で並べます。 「表示例：」の下は、このページの中で本当に HTML を描画した結果です（手元の Chromium 141 でも崩れがないことを確認しています）。次の要素はコードと説明だけにしています。理由は、見出し（h1〜h6）とセクション要素（header・nav・main など）はこの記事自体の見出し構造やテーマの CSS に影響するため、フォーム部品は送信を行う部品のため、画像・動画・iframe などは素材や外部読み込みが必要なため、script・style・dialog などは動作や表示に影響するためです。

文書・メタデータ：html・head・title・meta・link・base・style・body（コードのみ）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="ページの説明文（検索結果に使われることがある）">
  <title>備品一覧 | サンプル</title>
  <base href="https://example.com/docs/">   <!-- 相対URLの基準。省略可 -->
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico">
  <style>
    body { font-family: sans-serif; }
  </style>
</head>
<body>
  <!-- 画面に表示する内容 -->
</body>
</html>

<head> の中身は画面に出ませんが、文字化けの防止（charset）、スマートフォンでの表示（viewport）、検索結果の説明文（description）を決める大切な部分です。 meta タグの種類は別記事で扱っているので、ここでは最小限にとどめます。

アクセシビリティの注記：<html lang="ja"> を付けると、読み上げソフトが日本語として読み、ブラウザの翻訳機能も正しく働きます。 英語の引用部分には <p lang="en"> のように部分的に指定できます。

セクション：header・nav・main・article・section・aside・footer・h1〜h6・hgroup・address・search（コードのみ）

<body>
  <header>
    <p>サイト名</p>
    <nav aria-label="メイン">
      <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/items/">備品一覧</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <hgroup>
        <h1>備品の管理ルール</h1>
        <p>2026年10月版</p>
      </hgroup>
      <section>
        <h2>貸し出しの手順</h2>
        <p>本文…</p>
        <h3>返却期限</h3>
        <p>本文…</p>
      </section>
      <section>
        <h2>よくある質問</h2>
        <p>本文…</p>
      </section>
    </article>
    <aside>
      <h2>関連する備品</h2>
      <p>補足情報…</p>
    </aside>
  </main>

  <search>
    <form action="/search">
      <label for="q">備品を検索</label>
      <input id="q" type="search" name="q">
      <button type="submit">検索</button>
    </form>
  </search>

  <footer>
    <address>お問い合わせ：<a href="mailto:info@example.com">info@example.com</a></address>
    <p><small>© 2026 サンプル</small></p>
  </footer>
</body>

見出しは h1 から順に階層を作り、h2 の次にいきなり h4 を置かないのが基本です。 見出しの文字サイズを変えたいときは CSS で指定します。Chromium 141 で確かめたところ、<section> の中に置いた h1 もページ直下の h1 と同じ 32px（2em）で描画されました。かつては入れ子の深さに応じて h1 が小さく表示されていましたが、現在の Chromium では同じ大きさなので、入れ子の深さではなく h1〜h6 の番号で階層を表します。

アクセシビリティの注記：main・nav・header・footer は読み上げソフトの「ランドマーク」として扱われ、利用者はキー操作でこれらの領域を直接移動できます。 nav が複数あるときは aria-label="メイン" のように名前を付けると区別できます。

グルーピング：p・br・hr・pre・blockquote・ul・ol・li・dl・dt・dd・figure・figcaption・div・menu（表示例あり）

段落（p）と改行（br）

<p>1つ目の段落です。<br>段落の中で改行したいときだけ br を使います。</p>
<p>2つ目の段落です。段落の間の余白は CSS の margin で調整します。</p>

表示例：

1つ目の段落です。
段落の中で改行したいときだけ br を使います。

2つ目の段落です。段落の間の余白は CSS の margin で調整します。

区切り線（hr）

<p>前の話題</p>
<hr>
<p>次の話題</p>

表示例：

前の話題

次の話題

整形済みテキスト（pre）とコード（code）

<pre><code>function hello() {
  console.log("空白と改行がそのまま残ります");
}</code></pre>

表示例：

function hello() {
  console.log("空白と改行がそのまま残ります");
}

<pre> の中で < や & を表示したいときは <・& と書きます。たとえば <p>本文</p> と書くと、画面には次のように表示されます。

表示例：

<p>本文</p>

引用（blockquote・cite）

<blockquote cite="https://example.com/guide/">
  <p>備品は使い終わったら元の場所に戻します。</p>
  <p>— <cite>備品管理ガイド</cite></p>
</blockquote>

表示例：

備品は使い終わったら元の場所に戻します。

— 備品管理ガイド

リスト（ul・ol・li）と入れ子、番号の指定（start・reversed・type）

<ul>
  <li>ノートパソコン</li>
  <li>モニター
    <ul>
      <li>24インチ</li>
      <li>27インチ</li>
    </ul>
  </li>
</ul>

<ol start="3" reversed>
  <li>3から逆順に</li>
  <li>番号が減ります</li>
</ol>

<ol type="A">
  <li>英大文字（A, B, C）</li>
  <li>type="i" なら小文字ローマ数字</li>
</ol>

表示例：

• ノートパソコン
• モニター
  • 24インチ
  • 27インチ

3. 3から逆順に
4. 番号が減ります

1. 英大文字（A, B, C）
2. type="i" なら小文字ローマ数字

入れ子のリストは、子の <ul> を親の <li> の中に入れます。 Chromium 141 で <ul><li>親<ul><li>子</li></ul></li></ul> を読み込ませると、そのままの構造で DOM に入りました。一方 <ul> の直下に文字や <p> を置くと、ブラウザはそのまま描画はしますが仕様上は認められていません（ul の子は li だけ）。

説明リスト（dl・dt・dd）

<dl>
  <dt>HTML</dt>
  <dd>文書の構造を書く言語です。</dd>
  <dt>CSS</dt>
  <dd>見た目を指定する言語です。</dd>
</dl>

表示例：

HTML

文書の構造を書く言語です。

CSS

見た目を指定する言語です。

図とキャプション（figure・figcaption）

<figure>
  <pre>備品 ─┬─ ノートパソコン
      └─ モニター</pre>
  <figcaption>図1：備品の分類（画像の代わりにテキストの図）</figcaption>
</figure>

表示例：

備品 ─┬─ ノートパソコン
      └─ モニター

意味を持たない箱（div）とコマンドのリスト（menu）

<div>div は意味を持たないブロックの箱です。CSS を当てる土台に使います。</div>

<menu>
  <li>コピー</li>
  <li>貼り付け</li>
</menu>

表示例：

アクセシビリティの注記：リストを ul・ol で書くと、読み上げソフトは「リスト、3項目」のように件数を伝えてくれます。 字下げの目的で blockquote を使うと「引用」と読み上げられるので、余白は CSS で付けます。

テキストレベル：a・em・strong・b・i・u・mark・s・small・cite・q・dfn・abbr・ruby・data・time・code・var・samp・kbd・sub・sup・bdi・bdo・span・br・wbr（表示例あり）

リンク（a）

<p><a href="https://example.com/">通常のリンク</a>、<a href="#">ページの先頭へ戻るリンク</a></p>

表示例：

リンク文字（href="#" はページの先頭へ戻ります）

強調・重要・注目（em・strong・b・i・u・mark）

<p><em>強調</em>・<strong>重要</strong>・<b>注目させる語</b>・<i>区別する語</i>・<u>綴りの注記</u>・<mark>ハイライト</mark></p>

表示例：

強調・重要・注目させる語・区別する語・綴りの注記・ハイライト

見た目は em と i がどちらも斜体、strong と b がどちらも太字ですが、意味が違います。 em は「ここを強く読む」、strong は「ここが重要」、i と b は意味を足さずに「他と区別する」「目に留まるようにする」ための要素です。詳しくは後述の「太字・強調」の節で比べます。

正確でなくなった内容と但し書き（s・small）

<p><s>旧：月曜に提出</s> 新：水曜に提出 <small>（変更は10月から）</small></p>

表示例：

旧：月曜に提出 新：水曜に提出 （変更は10月から）

用語・引用・略語（dfn・cite・q・abbr）

<p><dfn>マークアップ</dfn>とは、文章に目印を付けることです。<cite>HTML Living Standard</cite>では<q>要素</q>という言葉で統一されています。<abbr title="HyperText Markup Language">HTML</abbr>の正式名称は title 属性に書きます。</p>

表示例：

マークアップとは、文章に目印を付けることです。HTML Living Standardでは要素という言葉で統一されています。HTMLの正式名称は title 属性に書きます。

<q> の引用符（「」や " "）はブラウザが lang 属性に合わせて自動で付けるので、自分では書きません。

ルビ（ruby・rt・rp）

<p><ruby>備品<rp>（</rp><rt>びひん</rt><rp>）</rp></ruby>の管理</p>

表示例：

備品（びひん）の管理

<rp> の中の括弧はルビに対応したブラウザでは表示されず、対応していない環境では「備品（びひん）」のように読めます。

機械向けの値と日時（data・time）

<p><data value="A-1001">ノートパソコン</data>の貸出日は<time datetime="2026-10-02">2026年10月2日</time>です。</p>

表示例：

ノートパソコンの貸出日は2026年10月2日です。

コード・変数・出力・キー入力（code・var・samp・kbd）

<p><code>console.log(x)</code> の <var>x</var> に 1 を入れると、出力は <samp>1</samp> になります。保存は <kbd>Ctrl</kbd> + <kbd>S</kbd> です。</p>

表示例：

console.log(x) の x に 1 を入れると、出力は 1 になります。保存は Ctrl + S です。

下付き・上付き（sub・sup）

<p>水は H<sub>2</sub>O、2の10乗は 2<sup>10</sup> と書きます。</p>

表示例：

水は H₂O、2の10乗は 2¹⁰ と書きます。

書字方向（bdi・bdo）

<p>投稿者：<bdi>إيان</bdi> さん（bdi で周囲と分離）／<bdo dir="rtl">右から左に表示</bdo>（bdo で方向を強制）</p>

表示例：

投稿者：إيان さん（bdi で周囲と分離）／右から左に表示（bdo で方向を強制）

意味を持たないインラインの箱（span）と改行位置（br・wbr）

<p>この文の<span>一部</span>だけを span で囲みました。見た目は変わらず、CSS を当てる土台になります。</p>
<p>https://example.com/<wbr>docs/<wbr>very-long-path-name/<wbr>page （wbr の位置でだけ折り返します）</p>

表示例：

この文の一部だけを span で囲みました。見た目は変わらず、CSS を当てる土台になります。

https://example.com/docs/very-long-path-name/page （wbr の位置でだけ折り返します）

アクセシビリティの注記：リンクの文字は「こちら」ではなく「備品一覧を見る」のように行き先がわかる言葉にすると、リンクだけを読み上げる操作でも内容が伝わります。 abbr の title はホバーできない端末では読めないので、初出では本文に正式名称も書いておくと確実です。

編集：ins・del（表示例あり）

<p>提出期限は<del>金曜日</del><ins>木曜日</ins>に変わりました。</p>

表示例：

提出期限は金曜日木曜日に変わりました。

<del> は取り消し線、<ins> は下線で表示されます。datetime="2026-10-02" や cite="変更理由のURL" を付けると、いつ・なぜ変えたかを記録できます。見た目だけ取り消し線にしたい（編集の記録ではない）ときは <s> を使います。

埋め込みコンテンツ：img・picture・source・video・audio・track・iframe・object・embed・map・area・svg・math（コードのみ）

<!-- 画像：alt は必ず書く。width/height で読み込み中のレイアウトのずれを防ぐ -->
<img src="room.jpg" alt="会議室Aの写真" width="800" height="600" loading="lazy">

<!-- picture：形式や画面幅に応じて候補を切り替える（img は最後に必ず置く） -->
<picture>
  <source srcset="room.avif" type="image/avif">
  <source srcset="room.webp" type="image/webp">
  <img src="room.jpg" alt="会議室Aの写真" width="800" height="600">
</picture>

<!-- 動画と字幕 -->
<video src="guide.mp4" controls width="640" height="360" poster="thumb.jpg">
  <track kind="captions" src="guide.ja.vtt" srclang="ja" label="日本語" default>
  動画を再生できない場合は <a href="guide.mp4">ファイルをダウンロード</a>してください。
</video>

<!-- 音声 -->
<audio src="voice.mp3" controls></audio>

<!-- 別ページの埋め込み：title で内容を説明 -->
<iframe src="https://example.com/embed" title="備品一覧のプレビュー" width="640" height="360" loading="lazy"></iframe>

<!-- PDF などの外部リソース（中に代替内容を書ける） -->
<object data="manual.pdf" type="application/pdf" width="640" height="480">
  <p>PDF を表示できない場合は <a href="manual.pdf">ダウンロード</a>してください。</p>
</object>

<!-- イメージマップ：画像の一部をクリック領域にする -->
<img src="floor.png" alt="フロア図" usemap="#floor" width="400" height="300">
<map name="floor">
  <area shape="rect" coords="0,0,200,150" href="#room-a" alt="会議室A">
</map>

<!-- SVG を直接書く（role と aria-label で説明を付ける） -->
<svg width="100" height="100" viewBox="0 0 100 100" role="img" aria-label="青い円">
  <circle cx="50" cy="50" r="40" fill="steelblue" />
</svg>

<!-- MathML の数式 -->
<math><msup><mi>x</mi><mn>2</mn></msup></math>

画像の alt は「画像が表示されなかったときに代わりに読まれる文章」です。 装飾だけの画像なら alt=""（空）にして読み飛ばしてもらいます。srcset・sizes の書き方は別記事で扱っています。

アクセシビリティの注記：img の alt、iframe の title、video の track（字幕）は、画面を見ない利用者や音を出せない環境に内容を届けるための属性です。 alt を省略すると、ファイル名が読み上げられてしまうことがあります。

テーブル：table・caption・colgroup・col・thead・tbody・tfoot・tr・th・td（表示例あり）

<table>
  <caption>備品の貸出状況</caption>
  <colgroup>
    <col>
    <col span="2">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">備品</th>
      <th scope="col">数量</th>
      <th scope="col">状態</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">ノートパソコン</th>
      <td>3</td>
      <td>貸出中</td>
    </tr>
    <tr>
      <th scope="row">モニター</th>
      <td>5</td>
      <td>在庫あり</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">合計</th>
      <td colspan="2">8</td>
    </tr>
  </tfoot>
</table>

表示例：

<thead>・<tbody>・<tfoot> は省略できます。 Chromium 141 で <table><tr><td>A</td></tr></table> を読み込ませると、<tbody> が自動で補われて <tbody><tr><td>A</td></tr></tbody> になりました。逆に <table> の外に <tr><td>A</td></tr> を書くと、タグは捨てられて文字「A」だけが残ります。行や列をまたぐセルは colspan（横）・rowspan（縦）で指定します。 罫線や余白は CSS で付けます（表の CSS は別記事で扱っています）。

アクセシビリティの注記：<caption> で表の題名を付け、<th> に scope="col"（列の見出し）・scope="row"（行の見出し）を書くと、読み上げソフトがセルの位置を「ノートパソコン、数量、3」のように説明できます。

フォーム：form・label・input・button・select・option・optgroup・datalist・textarea・output・fieldset・legend・progress・meter（progress・meter のみ表示例あり）

<form action="/items" method="post">
  <fieldset>
    <legend>備品の登録</legend>
    <p>
      <label for="name">備品名</label>
      <input id="name" type="text" name="name" required placeholder="例：ノートパソコン">
    </p>
    <p>
      <label for="qty">数量</label>
      <input id="qty" type="number" name="qty" min="1" max="99" value="1">
    </p>
    <p>
      <label for="cat">分類</label>
      <select id="cat" name="category">
        <optgroup label="機器">
          <option value="pc">パソコン</option>
          <option value="monitor" selected>モニター</option>
        </optgroup>
        <optgroup label="消耗品">
          <option value="paper">用紙</option>
        </optgroup>
      </select>
    </p>
    <p>
      <label for="place">保管場所</label>
      <input id="place" type="text" name="place" list="places">
      <datalist id="places">
        <option value="3階倉庫">
        <option value="会議室A">
      </datalist>
    </p>
    <p>
      <label for="memo">メモ</label><br>
      <textarea id="memo" name="memo" rows="3" cols="40"></textarea>
    </p>
    <p>
      <label><input type="checkbox" name="agree" required> 内容を確認しました</label>
    </p>
    <p>
      <button type="submit">登録する</button>
      <button type="reset">入力を消す</button>
    </p>
  </fieldset>
</form>

<!-- output：計算結果の表示先（値の更新は JavaScript で行う） -->
<label for="w">幅</label>
<input id="w" type="range" name="w" min="0" max="100" value="50">
<output name="result" for="w">50</output>

<input> は type 属性で22種類に変わります。 よく使うものだけ挙げると次のとおりです（全22種の用途と値の形式は別記事にまとめています）。

進捗と計量（progress・meter）

<p>進捗：<progress value="70" max="100">70%</progress></p>
<p>容量：<meter value="0.6" min="0" max="1" low="0.3" high="0.8" optimum="0.2">60%</meter></p>
<p>処理中（value なし）：<progress></progress></p>

表示例：

進捗：70%

容量：60%

処理中（value なし）：

<progress> は「作業がどこまで進んだか」、<meter> は「範囲の中でいまどの値か（残り容量など）」を表します。meter の low・high・optimum によって色が変わります（上の例は optimum が低い側なので、0.6 は「高めの値」として色が変わります）。

アクセシビリティの注記：<label> の for と部品の id を対応させる（または label で部品を包む）と、文字をクリックしても入力欄にフォーカスが移り、読み上げソフトも部品の名前を読めます。 ボタンは <div onclick> ではなく <button> で作ると、キーボードの Tab で到達でき、Enter／Space で押せる動作がはじめから付いてきます。ラジオボタンのグループは fieldset と legend で質問文をまとめます。

インタラクティブ：details・summary・dialog（details・summary は表示例あり）

<details name="faq">
  <summary>HTML と HTML5 は違うものですか？</summary>
  <p>HTML5 は版の名前で、現在は HTML Living Standard に一本化されています。</p>
</details>
<details name="faq">
  <summary>閉じタグがない要素はありますか？</summary>
  <p>br・hr・img・input など13の空要素には閉じタグがありません。</p>
</details>

表示例（同じ name を付けているので、片方を開くともう片方が閉じます）：

<details> は JavaScript なしで開閉できる折りたたみです。 open 属性を付けると最初から開いた状態になり（Chromium 141 で <details open> の open プロパティが true になることを確認）、同じ name を付けた details 同士は1つだけが開くアコーディオンになります。開閉アニメーションや CSS の工夫は別記事で扱っています。

<!-- dialog：showModal() で開くモーダル。背景は ::backdrop で装飾できる -->
<dialog id="confirm">
  <form method="dialog">
    <p>この備品を削除しますか？</p>
    <button value="cancel">キャンセル</button>
    <button value="ok">削除する</button>
  </form>
</dialog>
<button type="button" id="open">削除</button>
<script>
  document.getElementById("open").addEventListener("click", () => {
    document.getElementById("confirm").showModal();
  });
</script>

<dialog> は showModal() で開くと背景の操作ができないモーダルになり、Esc キーで閉じられます。<form method="dialog"> の中のボタンを押すと、送信せずにダイアログが閉じます。詳しい作り方は別記事にまとめています。

アクセシビリティの注記：details は「補足情報」「よくある質問」のように、閉じていても本筋が伝わる内容に向いています。 summary はキーボードでフォーカスでき、Enter／Space で開閉できます。dialog を showModal() で開くと、フォーカスがダイアログの中に移り、閉じると元の位置に戻ります。

スクリプト：script・noscript・template・slot・canvas（コードのみ）

<!-- defer：HTML の解析を止めずに読み込み、解析が終わってから実行 -->
<script src="app.js" defer></script>

<!-- ES モジュール（自動的に defer と同じ扱い） -->
<script type="module" src="main.mjs"></script>

<!-- JavaScript が無効なときだけ表示される内容 -->
<noscript><p>JavaScript が無効のため、一部の機能が使えません。</p></noscript>

<!-- template：描画されないひな型。JS で複製して使う -->
<template id="row">
  <li><span></span></li>
</template>
<script>
  const li = document.getElementById("row").content.cloneNode(true);
  li.querySelector("span").textContent = "ノートパソコン";
  document.querySelector("ul").append(li);
</script>

<!-- slot：Web Components の差し込み口（宣言的シャドウ DOM の例） -->
<my-card>
  <template shadowrootmode="open">
    <p><slot name="title">既定のタイトル</slot></p>
  </template>
  <span slot="title">ノートパソコン</span>
</my-card>

<!-- canvas：JS で図形を描く。中の文字は代替内容 -->
<canvas id="chart" width="300" height="150">グラフ（対応していない環境向けの代替文）</canvas>

<script> は </body> の直前に置くか、<head> に defer 付きで置くと、HTML の解析をさまたげずに読み込めます。 async は読み込みが終わり次第すぐ実行されるので、実行順が問題にならない計測用スクリプトなどに向いています。

アクセシビリティの注記：canvas の中身は読み上げられないので、グラフなら数値の表を別に用意し、<canvas> の中にも代替文を書きます。 noscript はスクリプトが無効なときの案内だけでなく、重要な内容そのものを届ける手段としても使えます。

やりたいこと別の書き方：改行・リンク・太字・色・画像・表・リスト・見出し・フォーム

「改行したい」「リンクを貼りたい」「太字にしたい」といった目的から引けるようにまとめました。 表示例は前の章と重なるので、ここではコピペ用のコードと Chromium 141（Playwright 1.56）で確かめた結果を中心に載せます。

改行：br と p の使い分け、wbr

文章の区切りは <p> で分け、1つの段落の中でどうしても折り返したい位置だけ <br> を使います。 HTML のソースに書いた改行は表示には反映されず、半角スペース1つ分として扱われます。

<p>ソースの中で
改行しても、表示は1行です。</p>

<p>住所や詩のように<br>改行そのものが内容の一部なら br</p>

<p>話題が変わるなら</p>
<p>段落を分けます（p の間には上下 1em の余白が付きます）</p>

Chromium 141 で描画して、文字の行数と位置を取った結果：

<p>1行目(ソース上の改行)2行目</p> … 行数 1。innerText は "1行目 2行目"（改行は空白1つに）
<p>1行目<br>2行目</p>            … 行数 2。行と行の間に余白は付かない
<p>1行目</p><p>2行目</p>          … p の既定の margin は上下 16px（1em）。段落の間が空く

空行を作る目的で <br><br> を重ねるより、<p> に分けて余白は CSS の margin で調整します。 <wbr> は「ここでなら折り返してよい」という印で、文字は増えません。Chromium 141 で幅 8em の箱に abcdefghijklmnopqrstuvwxyz を入れると横にはみ出しましたが、途中に <wbr> を置くと2行に折り返され、textContent は26文字のままでした。折り返しの禁止は CSS の white-space: nowrap で指定します（nobr 要素は廃止）。

リンク：a の href、target="_blank" と rel="noopener"、mailto・tel、ページ内リンク

リンクは <a href="行き先">文字</a> が基本形で、href がないと <a> はリンクになりません。 Chromium 141 のアクセシビリティツリーを取ると、href のない <a> はただの text、href があれば link として伝わりました。

<a href="https://example.com/items/">備品一覧</a>
<a href="https://example.com/" target="_blank" rel="noopener noreferrer">新しいタブで開く</a>
<a href="mailto:info@example.com?subject=問い合わせ">メールを送る</a>
<a href="tel:+81-3-1234-5678">03-1234-5678</a>
<a href="#faq">よくある質問へ</a> … <h2 id="faq">よくある質問</h2>   <!-- ページ内リンク -->
<a href="manual.pdf" download>マニュアル（PDF）</a>                 <!-- 開かずに保存 -->

target="_blank" で開いた新しいタブは、かつては window.opener を通じて元のタブを操作できました。 現在の Chromium は既定で noopener 相当として扱いますが（下の結果）、rel="noopener" を明示すると環境による違いがなくなります。Chromium 141 で新しいタブの window.opener を調べた結果：

<a target="_blank">                 … window.opener === null → true（既定で切り離される）
<a target="_blank" rel="opener">    … false（opener を明示したときだけつながる）
<a target="_blank" rel="noopener">  … true

rel="noreferrer" を足すと、リンク元の URL（Referer）も送られなくなります。ページ内リンク は href="#id名" と行き先の id を対応させます（Chromium 141 で <a href="#sec2"> をクリックすると location.hash が #sec2 になり、1538px スクロールしました）。<a name="…"> は廃止されているので id を使います。

太字・強調：b と strong、i と em の違い

見た目はどちらも太字（斜体）ですが、strong・em は「意味」を伝え、b・i は「見た目の区別」だけを伝えます。 Chromium 141 で計算済みスタイルとアクセシビリティツリーを取った結果：

<b>      font-weight 700 / font-style normal  → アクセシビリティツリーでは text（ただの文字）
<strong> font-weight 700 / font-style normal  → strong として伝わる
<i>      font-weight 400 / font-style italic  → text
<em>     font-weight 400 / font-style italic  → emphasis として伝わる

<p><strong>締め切りは明日です。</strong>備品は<em>使う前に</em>申請してください。</p>   <!-- 重要／強く読む位置 -->
<p>対象は <b>ノートパソコン</b> です。英語では <i lang="en">equipment</i> と言います。</p> <!-- 目立たせる／区別 -->

見た目だけを太くしたいなら CSS の font-weight: bold、装飾の下線は CSS の text-decoration を使います。 <strong> は文全体ではなく本当に重要な数語だけに付けると、太字の意味が保たれます。

文字の色・サイズ：HTML ではなく CSS で指定する（font 要素は廃止）

文字の色・大きさ・書体は HTML のタグではなく CSS（color・font-size・font-family・font-weight・text-align）で指定します。 <font color="red" size="5"> は廃止された要素で、ブラウザは互換性のために今も描画しますが（Chromium 141 では color: rgb(255, 0, 0)、font-size: 24px になりました）、新しく書くときは CSS に置き換えます。

<style>
  .note { color: #c00; font-size: 1.25rem; font-weight: bold; }   /* 1. クラスで指定（おすすめ） */
</style>
<p class="note">赤くて少し大きい文字</p>
<p style="color: #c00; font-size: 1.25rem;">その場限りなら style 属性</p>   <!-- 2 -->
<p>一部だけなら <span class="note">span</span> で囲みます。</p>

Chromium 141 で 1 と 2 の計算済みスタイルを取ると、どちらも color: rgb(204, 0, 0)、font-size: 20px（1.25rem = 16px × 1.25）になりました。中央寄せも center 要素ではなく CSS の text-align: center で指定します。

画像：img の alt・width・height・loading="lazy" と figure

<img src="room.jpg" alt="会議室Aの写真" width="800" height="600" loading="lazy">

<figure>
  <img src="room.jpg" alt="会議室Aの写真" width="800" height="600">
  <figcaption>図1：会議室A（10名まで）</figcaption>
</figure>

width・height を書いておくと、画像の読み込みが終わる前からその大きさの領域が確保され、読み込み後にページがガタつきません。 Chromium 141 で画像の応答を止めたまま測った結果：

[読み込み中]  width="600" height="400" … 表示サイズ 600×400、aspect-ratio: auto 600 / 400（領域を確保）
              width/height なし         … 表示サイズ 0×0（width="600" のみなら 600×0）
              下の段落の位置 top = 504px
[読み込み後]  width/height なし         … 実サイズ 300×200 になり、下の段落が top = 1076px に移動（ガタつき）

alt は画像の代わりに読まれる文章です。 Chromium 141 のアクセシビリティツリーでは、alt="会議室Aの写真" の img は img "会議室Aの写真"、alt=""（装飾用）は名前のない img として扱われ、figure で囲むと figure "図1：…" のようにキャプションが図の名前になりました。loading="lazy" は画面に近づいてから読み込む指定なので、最初の画面に入る画像には付けません。width・height には元画像のサイズを単位なしで書き、表示サイズの変更は CSS で行います。

表：table の構造と th の scope

表は table → tr（行）→ th（見出しセル）・td（データセル）の順に入れ子にし、見出しセルには scope を付けます。 最小の形は次のとおりです（thead・tbody は省略できます）。

<table>
  <caption>備品の一覧</caption>
  <tr>
    <th scope="col">名前</th>
    <th scope="col">数量</th>
  </tr>
  <tr>
    <th scope="row">モニター</th>
    <td>5</td>
  </tr>
</table>

Chromium 141 のアクセシビリティツリーでは、scope="col" の th は columnheader、scope="row" の th は rowheader、td は cell、caption は表の名前として伝わりました。th の既定スタイルは太字（font-weight: 700）・中央寄せ、td は左寄せ（text-align: start）です。

リスト：ul・ol・dl と start・reversed・type

<ul>                                <!-- 順序なし（黒丸） -->
  <li>項目</li>
</ul>
<ol start="3" reversed type="i">    <!-- 3 から逆順、小文字ローマ数字 -->
  <li>項目</li>
</ol>
<ol>
  <li value="10">value はその項目の番号を指定します</li>
</ol>
<dl>                                <!-- 用語と説明の組 -->
  <dt>用語</dt>
  <dd>説明</dd>
</dl>

Chromium 141 で type ごとの list-style-type を取ると、type="i" は lower-roman、type="A" は upper-alpha、type="1" は decimal、ul は disc でした（start・reversed の実際の番号は前の章の表示例で確認できます）。黒丸の形を変えたいときは CSS の list-style-type、消したいときは list-style: none を使います。 ul の type 属性は廃止されています。

見出し：h1 は1ページに1つという考え方

見出しは h1（ページの題名）→ h2（章）→ h3（節）と番号順に階層を作り、h1 はページに1つにしておくと、検索エンジンにも読み上げソフトにもページの構造が同じように伝わります。 仕様上は複数置けますが、「ページの主題は1つ」と考えると自然に1つになります。

Chromium 141 の既定の文字サイズは h1 32px、h2 24px、h3 18.72px、h4 16px、h5 13.28px、h6 10.72px で、section の中に置いた h1 も 32px・アクセシビリティツリーでも level=1 でした。レベルを決めるのは入れ子の深さではなく番号です。 文字を小さくしたいときは番号を変えず CSS の font-size で調整し、見出しではない大きな文字は p と CSS で作ります。

フォーム部品：input の type は短く

フォーム部品は「label で名前を付けた input」が基本の組で、type を変えるだけで入力欄の種類が変わります。 type 全22種は別記事にまとめているので、ここでは label の効果だけ確かめます。Chromium 141 で for 付きの label の文字をクリックすると対応する input にフォーカスが移り、label で input を包んだ形でも同じでした。div に書いた文字ではフォーカスは移りません（activeElement は body のまま）。

<label for="mail">メールアドレス</label>
<input id="mail" type="email" name="mail" required autocomplete="email">

<label>数量 <input type="number" name="qty" min="1" value="1"></label>

部品の選び方は、1行の文字なら input、複数行なら textarea、少数から1つなら radio、複数選択なら checkbox、多数から1つなら select、候補を出しつつ自由入力なら input と datalist の組です。

グローバル属性の一覧表（すべての要素で使える属性）

グローバル属性は、どの要素にも付けられる属性です。 MDN のグローバル属性のページをもとに、よく使うものから順にまとめました。

このほかに autofocus、slot（シャドウ DOM）、autocapitalize・autocorrect・enterkeyhint・inputmode・writingsuggestions（入力の補助）、is、itemscope・itemprop など（Microdata）、nonce（CSP）、part・exportparts があります。

Chromium 141 で属性の効果を確かめた結果：

hidden                 … display: none（hidden="until-found" は display: block のまま content-visibility: hidden。
                         仕様ではページ内検索で見つかると表示に戻る）
inert（親の div に付与） … 中の button をクリックしてもフォーカスが移らない（activeElement は body のまま）
popover                … 初期は display: none → showPopover() で display: block、:popover-open に一致
data-item-id="A-1001"  … dataset.itemId = "A-1001"（ハイフン区切りがキャメルケースに変わる）
tabindex="-1"          … Tab 順には入らないが focus() ではフォーカスできる
dir="rtl"              … direction: rtl ／ translate="no" … translate = false ／ lang="en" … :lang(en) に一致

独自の属性名を勝手に作るより、data- を付けて dataset で読むほうが仕様に沿っています。

ブロックレベル／インラインとコンテンツカテゴリの対応表

かつては「ブロックレベル要素（行を占める）」と「インライン要素（文の中に置ける）」の2分類でしたが、HTML Living Standard は要素を「コンテンツカテゴリ」で分類し、どの要素の中に何を置けるか（コンテンツモデル）をそれで決めています。 見た目の「ブロック／インライン」は CSS の display の話で、HTML の分類とは別物になりました。

ほかに「知覚可能」「スクリプト支援（script・template）」があり、1つの要素が複数のカテゴリに属するのが普通です（img はフロー・フレージング・埋め込みに属します）。

この分類が効いてくるのが「どの要素の中に何を置けるか」です。 Chromium 141 で、置けない組み合わせを読み込ませた結果：

見た目の「ブロック／インライン」は CSS の既定値で決まります。Chromium 141 の既定の display 値は、p・div・ul・blockquote・figure などのグルーピング要素と header・nav・section などのセクション要素が block、テキストレベルの要素と img・video・iframe・canvas・svg・label が inline、button・input・select・textarea・progress・meter が inline-block、li が list-item、table が table、dialog・template・script・style・head の中の要素・controls なしの audio が none でした。CSS で display を変えれば見た目は自由に変えられますが、HTML 上の「置ける場所」は変わりません。

よくある質問

Q. 属性の値に引用符は必要ですか？ A. 空白や > を含まない値なら省略できますが、常に二重引用符で囲むのが安全です。Chromium 141 で href=https://example.com/docs/a b と書くと href は https://example.com/docs/a で切れ、b という別の属性が作られました（title=hello world も title="hello" と world に分かれます）。単引用符 href='#top' も有効です。

Q. HTML のタグは全部でいくつありますか？ A. HTML Living Standard では、現在使える要素が 115（要素インデックス。h1〜h6 を6つと数え、math・svg を含む）、使用不可とされた廃止要素が 29（廃止された機能の章）です。MDN には実験的な要素も載っているので、数え方によって前後します。

Q. 自分で考えたタグ名を書くとどうなりますか？ A. Chromium 141 で <mytag>自作</mytag> を読み込ませると HTMLUnknownElement（display: inline）として扱われ、エラーにはなりませんが意味も持ちません。独自の要素を作るときは <my-card> のようにハイフンを含む名前でカスタム要素として定義します。

Q. < や & をそのまま表示するには？ A. <・>・& と書きます（文字参照）。Chromium 141 で a < b & c は「a < b & c」と表示されました。<p のようにタグに見える並びはタグとして解釈されるので、記号は文字参照で書くのが確実です。

Q. タグと要素の違い、閉じタグが要らない要素、大文字小文字は？ A. 「HTMLタグの基本」の章にまとめています。タグは目印、要素は開始タグから終了タグまでの全体で、空要素13種には閉じタグがなく、タグ名と属性名は大文字で書いても小文字として扱われます。

まとめ

• HTML Living Standard の要素は 115（＋廃止 29）で、まずは本文冒頭の20タグを覚えれば一通りのページが書けます。
• タグは意味で選び、見た目は CSS で決めます。 font・center などの見た目のタグは廃止され、strong／b、em／i は見た目が同じでも伝わる意味が違います。
• 改行は p と br の使い分け、リンクは href が必須、target="_blank" には rel="noopener" を添えます。
• 画像は alt と width・height を書くと、読み上げにも表示のガタつき防止にも効きます。
• 表は th に scope、フォームは label と for、見出しは番号順に h1 を1つ。グローバル属性はすべての要素で使え、要素の「置ける場所」はコンテンツカテゴリで決まります。

参考（出典）

• HTML Living Standard（WHATWG）要素インデックス：https://html.spec.whatwg.org/multipage/indices.html
• 同 廃止された機能：https://html.spec.whatwg.org/multipage/obsolete.html
• 同 グローバル属性・コンテンツカテゴリ：https://html.spec.whatwg.org/multipage/dom.html
• MDN HTML 要素リファレンス：https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements
• MDN グローバル属性：https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Global_attributes
• MDN コンテンツカテゴリー：https://developer.mozilla.org/ja/docs/Web/HTML/Guides/Content_categories
• MDN 用語集「空要素」：https://developer.mozilla.org/ja/docs/Glossary/Void_element
• 比較のために確認したページ：https://media.wwg.co.jp/blog/47243 、https://webst8.com/code/html-major-basic-tag/

株式会社RJCでは、HTMLタグの意味と使い方を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。