HTMLタグとは、Webページの構造と意味をブラウザや検索エンジンに伝えるためのマークアップ要素です。この記事では、HTML5のタグをカテゴリ別に整理し、用途と使用例を一覧表にまとめました。
セマンティックタグの正しい使い方はSEO・アクセシビリティの両面で重要です。リファレンスとしてブックマークしてお使いください。詳細はMDN Web Docsで確認できます。
文書構造・メタデータ
HTML文書の基本構造と、ブラウザや検索エンジンへの情報を提供するタグです。
| タグ | 意味・用途 | 使用例 |
|---|---|---|
<!DOCTYPE html> | HTML5文書であることを宣言 | <!DOCTYPE html> |
<html> | HTML文書のルート要素 | <html lang=”ja”>…</html> |
<head> | メタ情報・CSS・JSの読み込み領域 | <head><meta charset=”UTF-8″></head> |
<body> | 表示コンテンツの領域 | <body>…</body> |
<title> | ページタイトル（ブラウザタブ・検索結果に表示） | <title>ページタイトル</title> |
<meta> | 文字コード・viewport・descriptionなどの情報 | <meta name=”viewport” content=”width=device-width, initial-scale=1″> |
<link> | 外部リソース（CSS・favicon等）の読み込み | <link rel=”stylesheet” href=”style.css”> |
<script> | JavaScriptの読み込み・実行 | <script src=”app.js” defer></script> |
<style> | インラインCSSの記述 | <style>body { margin: 0; }</style> |
<noscript> | JS無効時の代替コンテンツ | <noscript>JavaScriptを有効にしてください</noscript> |
<base> | 相対URLの基準を指定 | <base href=”https://example.com/”> |
セクション・ページ構造
ページの構造を意味的に分割するセマンティックタグです。SEOやアクセシビリティに重要です。
| タグ | 意味・用途 | 使用例 |
|---|---|---|
<header> | ヘッダー領域（ロゴ・ナビゲーション等） | <header><nav>…</nav></header> |
<footer> | フッター領域（著作権・リンク等） | <footer>© 2026 Example</footer> |
<main> | ページの主要コンテンツ（1ページに1つ） | <main>…</main> |
<nav> | ナビゲーションリンクの領域 | <nav><ul><li><a href=”/”>ホーム</a></li></ul></nav> |
<section> | 意味のあるコンテンツの区切り | <section><h2>概要</h2><p>…</p></section> |
<article> | 独立して成り立つコンテンツ（記事・投稿等） | <article><h2>ブログ記事</h2>…</article> |
<aside> | 補足情報・サイドバー | <aside><h3>関連記事</h3>…</aside> |
<address> | 連絡先情報 | <address>お問い合わせ: info@example.com</address> |
<search> | 検索機能の領域（HTML Living Standard） | <search><form>…</form></search> |
<hgroup> | 見出しとサブタイトルのグループ化 | <hgroup><h1>タイトル</h1><p>サブタイトル</p></hgroup> |
見出し
コンテンツの階層構造を示す見出しタグです。h1はページに1つ、h2→h3の順で階層を守ります。
| タグ | 意味・用途 | 使用例 |
|---|---|---|
<h1> | 最上位の見出し（ページに1つ） | <h1>サイトタイトル</h1> |
<h2> | セクションの見出し | <h2>機能紹介</h2> |
<h3> | サブセクションの見出し | <h3>詳細説明</h3> |
<h4> | h3のさらに下の見出し | <h4>補足事項</h4> |
<h5> | h4のさらに下の見出し | <h5>注意点</h5> |
<h6> | 最下位の見出し | <h6>脚注</h6> |
テキスト・インライン
テキストの意味や装飾を示すインライン要素です。
| タグ | 意味・用途 | 使用例 |
|---|---|---|
<p> | 段落 | <p>これは段落です。</p> |
<a> | ハイパーリンク | <a href=”https://example.com” target=”_blank” rel=”noopener”>リンク</a> |
<span> | 意味を持たないインライン要素（CSS適用用） | <span class=”highlight”>テキスト</span> |
<strong> | 重要性を示す強調（太字） | <strong>重要</strong>な情報 |
<em> | 強勢を示す強調（イタリック） | <em>特に</em>注意 |
<b> | 注意を引くテキスト（意味的強調なし） | <b>キーワード</b> |
<i> | 技術用語・外国語など通常と異なるテキスト | <i>italic</i> |
<u> | スペルミスなどの注記付きテキスト | <u>下線テキスト</u> |
<s> | 無効・取り消し済みのテキスト | 定価 <s>¥5,000</s> → ¥3,980 |
<mark> | ハイライト・マーカー | 検索結果: <mark>CSS</mark>プロパティ |
<small> | 注釈・免責事項などの小さいテキスト | <small>※条件あり</small> |
<sub> | 下付き文字 | H<sub>2</sub>O |
<sup> | 上付き文字 | E=mc<sup>2</sup> |
<abbr> | 略語（ツールチップで正式名称を表示） | <abbr title=”HyperText Markup Language”>HTML</abbr> |
<time> | 日時を機械可読形式で示す | <time datetime=”2026-04-29″>2026年4月29日</time> |
<data> | 機械可読なデータ値を持つテキスト | <data value=”398″>商品A</data> |
<br> | 改行 | 1行目<br>2行目 |
<wbr> | 任意の改行位置（長い単語内での改行ヒント） | super<wbr>califragilistic |
<hr> | テーマの区切り（水平線） | <hr> |
引用・コード
引用文やプログラムコードを示すタグです。
| タグ | 意味・用途 | 使用例 |
|---|---|---|
<blockquote> | ブロック引用（外部ソースからの引用） | <blockquote cite=”https://…”><p>引用文</p></blockquote> |
<q> | インライン引用 | <q>短い引用</q> |
<cite> | 作品名・出典の参照 | <cite>Web標準仕様</cite>より |
<pre> | 整形済みテキスト（空白・改行を保持） | <pre><code>const x = 1;</code></pre> |
<code> | プログラムコード | <code>console.log()</code> |
<kbd> | キーボード入力 | <kbd>Ctrl</kbd>+<kbd>C</kbd> |
<samp> | プログラムの出力例 | <samp>Error: file not found</samp> |
<var> | 変数名 | <var>x</var> = <var>y</var> + 1 |
<output> | 計算結果やフォーム出力 | <output name=”result”>42</output> |
リスト
順序付き・順序なし・定義リストのタグです。
| タグ | 意味・用途 | 使用例 |
|---|---|---|
<ul> | 順序なしリスト | <ul><li>項目1</li><li>項目2</li></ul> |
<ol> | 順序付きリスト | <ol><li>手順1</li><li>手順2</li></ol> |
<li> | リスト項目（ul/ol内で使用） | <li>リストアイテム</li> |
<dl> | 定義リスト（用語+説明のペア） | <dl><dt>HTML</dt><dd>マークアップ言語</dd></dl> |
<dt> | 定義する用語 | <dt>SEO</dt> |
<dd> | 用語の説明 | <dd>検索エンジン最適化</dd> |
<menu> | ツールバー等のコマンドリスト | <menu><li><button>保存</button></li></menu> |
テーブル
データを表形式で表示するタグです。レイアウト目的での使用は避けます。
| タグ | 意味・用途 | 使用例 |
|---|---|---|
<table> | テーブル全体 | <table>…</table> |
<thead> | テーブルのヘッダー行グループ | <thead><tr><th>見出し</th></tr></thead> |
<tbody> | テーブルの本体行グループ | <tbody><tr><td>データ</td></tr></tbody> |
<tfoot> | テーブルのフッター行グループ | <tfoot><tr><td>合計</td></tr></tfoot> |
<tr> | テーブル行 | <tr><td>セル1</td><td>セル2</td></tr> |
<th> | 見出しセル | <th scope=”col”>名前</th> |
<td> | データセル | <td>値</td> |
<caption> | テーブルのキャプション（タイトル） | <caption>料金表</caption> |
<colgroup> / <col> | 列のグループ化・スタイル指定 | <colgroup><col span=”2″ style=”background:#f0f0f0″></colgroup> |
フォーム
ユーザー入力を受け付けるフォーム関連タグです。
| タグ | 意味・用途 | 使用例 |
|---|---|---|
<form> | フォーム全体 | <form action=”/submit” method=”post”>…</form> |
<input> | テキスト・チェックボックス等の入力欄 | <input type=”text” name=”email” required> |
<textarea> | 複数行テキスト入力 | <textarea name=”message” rows=”5″></textarea> |
<select> | ドロップダウン選択 | <select name=”color”><option>赤</option></select> |
<option> | select内の選択肢 | <option value=”red”>赤</option> |
<optgroup> | 選択肢のグループ化 | <optgroup label=”色”><option>赤</option></optgroup> |
<button> | ボタン | <button type=”submit”>送信</button> |
<label> | 入力欄のラベル（アクセシビリティに重要） | <label for=”email”>メール</label><input id=”email”> |
<fieldset> | フォーム要素のグループ化 | <fieldset><legend>個人情報</legend>…</fieldset> |
<legend> | fieldsetのタイトル | <legend>お届け先</legend> |
<datalist> | 入力候補リスト | <input list=”colors”><datalist id=”colors”><option value=”赤”></datalist> |
<progress> | 進捗バー | <progress value=”70″ max=”100″>70%</progress> |
<meter> | 計測値・評価の可視化 | <meter value=”0.7″>70%</meter> |
画像・メディア
画像・動画・音声・埋め込みコンテンツに関するタグです。
| タグ | 意味・用途 | 使用例 |
|---|---|---|
<img> | 画像の表示 | <img src=”photo.jpg” alt=”写真の説明” width=”800″ height=”600″ loading=”lazy”> |
<picture> | 条件に応じた画像ソースの切り替え | <picture><source srcset=”img.webp” type=”image/webp”><img src=”img.jpg” alt=”説明”></picture> |
<source> | picture/video/audio内のメディアソース | <source srcset=”img-sp.jpg” media=”(max-width: 768px)”> |
<figure> | 画像・図・コードなどのキャプション付き表示 | <figure><img src=”img.png” alt=”図”><figcaption>図1</figcaption></figure> |
<figcaption> | figure内の説明キャプション | <figcaption>デザイン構成図</figcaption> |
<video> | 動画の埋め込み | <video controls src=”movie.mp4″ poster=”thumb.jpg”></video> |
<audio> | 音声の埋め込み | <audio controls src=”audio.mp3″></audio> |
<track> | 動画の字幕・キャプション | <track src=”sub.vtt” kind=”subtitles” srclang=”ja”> |
<iframe> | 外部コンテンツの埋め込み（YouTube等） | <iframe src=”https://youtube.com/embed/…” loading=”lazy”></iframe> |
<embed> | 外部プラグインコンテンツの埋め込み | <embed src=”file.pdf” type=”application/pdf”> |
<object> | 外部リソースの埋め込み（embed代替） | <object data=”file.pdf” type=”application/pdf”></object> |
<map> / <area> | 画像マップ（クリッカブルエリア） | <map name=”nav”><area shape=”rect” coords=”0,0,100,50″ href=”/”></map> |
グラフィック・描画
ベクター画像やJavaScriptによる描画に使用するタグです。
| タグ | 意味・用途 | 使用例 |
|---|---|---|
<svg> | SVGベクター画像の描画 | <svg viewBox=”0 0 100 100″><circle cx=”50″ cy=”50″ r=”40″/></svg> |
<canvas> | JavaScriptで描画するビットマップ領域 | <canvas id=”myCanvas” width=”300″ height=”150″></canvas> |
<math> | MathMLによる数式の表示 | <math><mfrac><mn>1</mn><mn>2</mn></mfrac></math> |
インタラクティブ要素
ユーザー操作に応答するHTML標準の対話的要素です。JavaScriptなしで動作するものもあります。
| タグ | 意味・用途 | 使用例 |
|---|---|---|
<details> | 折りたたみ可能なコンテンツ | <details><summary>もっと見る</summary><p>詳細内容</p></details> |
<summary> | detailsの見出し（クリックで開閉） | <summary>クリックして展開</summary> |
<dialog> | モーダルダイアログ（JS連携） | <dialog id=”modal”><p>確認しますか？</p><button>OK</button></dialog> |
<template> | JSで動的に展開するHTMLテンプレート | <template id=”card”><div class=”card”>…</div></template> |
<slot> | Web Components内でコンテンツを挿入する位置 | <slot name=”title”></slot> |
汎用コンテナ
意味を持たないグループ化用の要素です。セマンティックタグが使えない場合にのみ使用します。
| タグ | 意味・用途 | 使用例 |
|---|---|---|
<div> | ブロックレベルの汎用コンテナ | <div class=”wrapper”>…</div> |
<span> | インラインの汎用コンテナ | <span class=”badge”>NEW</span> |
よくあるタグ選びのミス
| 誤用例 | よくあるNG | 正しい使い方 |
|---|---|---|
| <div class=”header”> | ヘッダーなのにdiv | → <header>を使う |
| <div class=”main”> | ページの主部をdiv | → <main>を使う |
| <div class=”nav”> | ナビゲーションをdiv | → <nav>を使う |
| <br><br> | 空白調整に改行連打 | → CSSでmargin/paddingを使う |
| <b>で太字 | 意味的な強調なのにbタグ | → 重要性がある場合は<strong>を使う |
| <table>でレイアウト | 見た目の配置にテーブル使用 | → CSSのFlexbox/Gridを使う |
| h2→h4（h3を飛ばす） | 見出しレベルの飛ばし | → h1→h2→h3の順に階層を守る |
関連記事
▶ CSSプロパティ一覧【カテゴリ別・使用例付きリファレンス】
▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
よくある質問（FAQ）
Q. HTMLタグは全部覚える必要がありますか？
実務で頻繁に使うHTMLタグは30〜40種類程度で、すべてを暗記する必要はありません。特に重要なのはdiv・p・a・img・ul/li・h1〜h6・section・article・header・footer・form・input・button・table・spanです。これらを使いこなせれば一般的なWebページは構築できます。必要なときにMDN Web Docsで調べる習慣をつけるのが効率的です。
Q. セマンティックHTMLとは何ですか？なぜ重要ですか？
セマンティックHTMLとは、コンテンツの意味に適したHTML要素を使用するマークアップ手法です。例えばナビゲーションにはnav、記事本文にはarticle、補足情報にはasideを使います。検索エンジンがページ構造を正確に理解でき、スクリーンリーダーによるアクセシビリティも向上します。SEOとアクセシビリティの両面で重要なため、Web標準として推奨されています。
Q. HTML5で廃止されたタグにはどんなものがありますか？
代表的なものとしてfont（文字装飾）・center（中央揃え）・marquee（スクロール文字）・frameset/frame（フレーム分割）があります。これらはHTML5で非推奨または廃止となり、代わりにCSSで装飾・レイアウトを制御する方針に変わりました。古い参考書やWebサイトにはこれらのタグが使われている場合がありますが、現在の開発では使用しないでください。
