HTMLタグ チートシート
AI作成データ
このコンテンツのデータはAIが公式資料や辞書を参照して作成しました。正確さを心がけていますが、誤りが含まれる可能性があります。HTMLタグの一覧チートシート。基本構造・セクション・テキスト・フォーム・テーブル・メディアなど用途別に約70タグを収録。セマンティクスの使い分けガイド付きで、SEO・アクセシビリティ観点も解説。
約70のHTMLタグを用途別に整理。セマンティクスの使い分けもわかる
基本構造
HTMLドキュメントの骨格を形成するタグ群です。すべてのHTMLページに必要な基本要素を定義します。
| タグ | 説明 | 備考・使い所 |
|---|---|---|
<!DOCTYPE html> | HTML5文書であることを宣言する | すべてのHTMLファイルの先頭に必須 |
<html> | HTML文書のルート要素 | lang属性で言語を指定（例: lang="ja"） |
<head> | メタ情報・外部リソースの読み込みを格納する | ブラウザに表示されない情報を記述 |
<body> | ページに表示されるすべてのコンテンツを格納する | 1つの文書に1つだけ使用 |
<title> | ページのタイトルを設定する | ブラウザのタブやブックマーク、検索結果に表示される |
<link> | 外部リソース（CSS、アイコンなど）を読み込む | rel属性で関係を指定（stylesheet, icon, canonical等） |
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- コンテンツ -->
</body>
</html>セクション・ページ構造
HTML5で導入されたセマンティック要素を中心に、ページの論理的な構造を定義するタグ群です。適切に使うことでSEOとアクセシビリティが向上します。
| タグ | 説明 | 備考・使い所 |
|---|---|---|
<header> | ページやセクションの導入部分 | ページ全体のヘッダーにもarticle内にも使える |
<nav> | ナビゲーションリンクのまとまり | 主要なナビゲーションに使用。すべてのリンク群に使う必要はない |
<main> | ページの主要コンテンツ | 1ページに1つだけ使用。サイドバーやヘッダーは含めない |
<article> | 独立して意味をなすコンテンツ | ブログ記事、ニュース記事、コメントなど |
<section> | ページ内の意味的なまとまり（章・節） | 通常は見出し（h2〜h6）を伴う。汎用コンテナにはdivを使う |
<aside> | 本文と間接的に関連する補足コンテンツ | サイドバー、関連リンク、広告枠など |
<footer> | ページやセクションのフッター | 著作権表示、連絡先、関連リンクなど。article内にも使える |
<h1>〜<h6> | 見出しレベル1〜6 | h1はページに1つ。h2以降で階層構造を作る |
<hgroup> | 見出しとサブタイトルのグループ化 | 見出しとp要素をまとめてグループ化する |
<address> | 連絡先情報 | 著者やサイト運営者の連絡先。物理的な住所だけでなくメールやSNSも含む |
<search> | 検索機能を含むセクション | 検索フォームを囲む要素。主要ブラウザで対応済み（Chrome 118+, Firefox 118+, Safari 17+） |
html
<header>
<nav>
<a href="/">ホーム</a>
<a href="/about">概要</a>
</nav>
</header>
<main>
<article>
<h1>記事タイトル</h1>
<section>
<h2>セクション見出し</h2>
<p>本文...</p>
</section>
</article>
<aside>
<h2>関連記事</h2>
<ul>...</ul>
</aside>
</main>
<footer>
<p>© 2026 サイト名</p>
</footer>テキストコンテンツ
ブロックレベルのテキスト関連タグです。段落、リスト、引用など、コンテンツの構造を表現します。
| タグ | 説明 | 備考・使い所 |
|---|---|---|
<p> | 段落 | テキストの基本的なまとまり |
<blockquote> | ブロックレベルの引用 | cite属性で引用元URLを指定できる |
<pre> | 整形済みテキスト | 空白・改行がそのまま表示される。codeと組み合わせてコード表示に使う |
<ul> | 順序なしリスト | 項目の順序に意味がない場合に使用 |
<ol> | 順序付きリスト | 手順やランキングなど順序に意味がある場合に使用 |
<li> | リストの各項目 | ul, ol, menuの子要素として使用 |
<dl> | 説明リスト（定義リスト） | 用語と説明のペアを表す。FAQ、メタデータ一覧などに最適 |
<dt> | 説明リストの用語 | dlの子要素。1つのdtに複数のddを対応させることも可能 |
<dd> | 説明リストの説明文 | dtに対応する説明・定義・値 |
<figure> | 自己完結するコンテンツ（図・画像・コード例など） | 画像だけでなくコードブロックやグラフにも使える |
<figcaption> | figureのキャプション | figureの最初または最後の子要素として配置 |
<hr> | テーマの区切り | 話題の転換を示す。単なる装飾線にはCSSを使う |
<div> | 汎用ブロックコンテナ | セマンティクスを持たない。スタイリング目的のみで使う |
インラインテキスト
テキスト内で使用するインライン要素です。意味付け、装飾、リンクなどを表現します。
| タグ | 説明 | 備考・使い所 |
|---|---|---|
<a> | ハイパーリンク | href属性でリンク先を指定。target="_blank"で新しいタブで開く |
<strong> | 重要な内容（強い重要性） | スクリーンリーダーが強調して読み上げる。SEOにも影響する |
<em> | 強調（アクセントの変化） | 文の意味を変える強調に使う。斜体だけが目的ならCSSを使う |
<span> | 汎用インラインコンテナ | セマンティクスを持たない。CSSでのスタイリング用 |
<code> | インラインのコード | 変数名、関数名、コマンドなどの短いコード表記 |
<abbr> | 略語・頭字語 | title属性で正式名称を表示（例: HTML → HyperText Markup Language） |
<time> | 日付・時刻 | datetime属性で機械可読な形式を指定（例: datetime="2026-03-02"） |
<mark> | ハイライト（マーカー） | 検索結果のハイライトや注目箇所の強調に使用 |
<sup> | 上付き文字 | 累乗（x²）、脚注番号など |
<sub> | 下付き文字 | 化学式（H₂O）、数学の添え字など |
<br> | 改行 | 住所や詩など、改行自体に意味がある場合のみ使用 |
<cite> | 作品のタイトル | 書籍名、映画名、論文名などの参照 |
<q> | インラインの引用 | 短い引用に使用。ブラウザが自動で引用符を付加する |
<kbd> | キーボード入力 | キーボードのキーやショートカットの表記（例: Ctrl+C） |
<var> | 変数 | 数式やプログラムの変数名の表記 |
<wbr> | 改行可能位置 | 長いURLや単語の折り返し位置を指定 |
<s> | もはや正確でない・関連しない内容 | 古い価格の取り消し線など。削除を示すにはdelを使う |
テーブル
データの表を構造化するタグ群です。アクセシビリティのため、正しい構造でマークアップすることが重要です。レイアウト目的でのtable使用は避けてください。
| タグ | 説明 | 備考・使い所 |
|---|---|---|
<table> | テーブルのルート要素 | データの表に使用。レイアウト目的では使わない |
<thead> | テーブルのヘッダー行グループ | 列の見出しを含む行をグループ化 |
<tbody> | テーブルの本体行グループ | データ行をグループ化。複数のtbodyを使って行をセクション分けも可能 |
<tfoot> | テーブルのフッター行グループ | 合計行や要約行に使用 |
<tr> | テーブルの行 | thead, tbody, tfootの子要素 |
<th> | テーブルの見出しセル | scope属性でcol/rowを指定するとアクセシビリティが向上 |
<td> | テーブルのデータセル | colspan/rowspanでセルの結合が可能 |
<caption> | テーブルのキャプション（タイトル） | テーブルの目的を説明する。tableの最初の子要素として配置 |
<colgroup> | 列のグループ定義 | col要素と組み合わせて列単位のスタイル適用に使用 |
<col> | 列のプロパティ定義 | span属性で複数列をまとめて定義可能 |
html
<table>
<caption>商品一覧</caption>
<thead>
<tr>
<th scope="col">商品名</th>
<th scope="col">価格</th>
<th scope="col">在庫</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品A</td>
<td>1,000円</td>
<td>あり</td>
</tr>
<tr>
<td>商品B</td>
<td>2,500円</td>
<td>なし</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合計</td>
<td colspan="2">2商品</td>
</tr>
</tfoot>
</table>フォーム
ユーザー入力を受け取るフォーム関連タグです。アクセシビリティのため、label要素との紐付けが重要です。
| タグ | 説明 | 備考・使い所 |
|---|---|---|
<form> | フォームのコンテナ | action属性で送信先、method属性でHTTPメソッドを指定 |
<input> | 各種入力フィールド | type属性で種類を切り替え（下記参照） |
<button> | ボタン | type="submit"（送信）、"button"（汎用）、"reset"（リセット） |
<select> | ドロップダウン選択 | multiple属性で複数選択可能 |
<option> | selectの選択肢 | value属性で送信される値を指定 |
<optgroup> | selectの選択肢グループ | label属性でグループ名を表示 |
<textarea> | 複数行テキスト入力 | rows/cols属性またはCSSでサイズを指定 |
<label> | 入力フィールドのラベル | for属性でinputのidと紐付け。アクセシビリティに必須 |
<fieldset> | フォーム要素のグループ化 | 関連する入力項目をまとめる。legendと併用 |
<legend> | fieldsetのキャプション | グループの説明テキスト。fieldsetの最初の子要素 |
<datalist> | 入力候補のリスト | inputのlist属性と紐付けてオートコンプリートを実現 |
<output> | 計算結果や操作結果の表示 | for属性で関連する入力要素を指定 |
<progress> | 進捗バー | value/max属性で進捗を表示。ファイルアップロードの進捗など |
<meter> | 既知の範囲内の測定値 | min/max/low/high/optimum属性で範囲を定義。ディスク使用量など |
inputのtype属性一覧
| type | 説明 | 備考 |
|---|---|---|
text | 1行テキスト入力 | デフォルト値 |
email | メールアドレス入力 | ブラウザが形式を自動検証 |
password | パスワード入力 | 入力値がマスクされる |
number | 数値入力 | min/max/step属性で制約可能 |
date | 日付選択 | ブラウザのカレンダーUIが表示される |
checkbox | チェックボックス | 複数選択に使用 |
radio | ラジオボタン | name属性が同じもの同士で排他選択 |
file | ファイル選択 | accept属性でファイル種類を制限可能 |
search | 検索テキスト入力 | クリアボタンが表示されるブラウザもある |
url | URL入力 | ブラウザが形式を自動検証 |
tel | 電話番号入力 | モバイルで数字キーパッドが表示される |
range | スライダー | min/max/step属性で範囲を指定 |
hidden | 非表示の入力 | ユーザーに見えない値の送信に使用 |
html
<form action="/submit" method="post">
<fieldset>
<legend>ユーザー情報</legend>
<label for="name">名前</label>
<input type="text" id="name" name="name" required>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" required>
</fieldset>
<fieldset>
<legend>お問い合わせ内容</legend>
<label for="message">メッセージ</label>
<textarea id="message" name="message" rows="5"></textarea>
</fieldset>
<button type="submit">送信</button>
</form>画像・メディア
画像、動画、音声などのメディアコンテンツを埋め込むタグ群です。アクセシビリティのため、alt属性やtrack要素の設定が重要です。
| タグ | 説明 | 備考・使い所 |
|---|---|---|
<img> | 画像の埋め込み | alt属性は必須（アクセシビリティ・SEO）。loading="lazy"で遅延読み込み |
<picture> | レスポンシブ画像のコンテナ | source要素と組み合わせて画面サイズや形式に応じた画像を提供 |
<source> | メディアリソースの指定 | picture, video, audioの子要素。media属性やtype属性で条件分岐 |
<video> | 動画の埋め込み | controls属性で再生コントロールを表示。poster属性でサムネイル指定 |
<audio> | 音声の埋め込み | controls属性で再生コントロールを表示 |
<track> | メディアのテキストトラック（字幕など） | video/audioの子要素。kind属性でsubtitles/captions等を指定 |
<iframe> | 外部コンテンツの埋め込み | sandbox属性やallow属性でセキュリティ制御。YouTube埋め込み等に使用 |
<canvas> | JavaScriptで描画するための領域 | グラフ、ゲーム、画像加工などに使用。2D/WebGLコンテキストを取得して描画 |
<svg> | SVGベクター画像のインライン埋め込み | アイコン、ロゴなど拡大しても劣化しないグラフィックに使用 |
html
<!-- レスポンシブ画像 -->
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="説明テキスト" loading="lazy">
</picture>
<!-- 動画 -->
<video controls poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<track kind="subtitles" src="subs_ja.vtt" srclang="ja" label="日本語字幕">
お使いのブラウザは動画タグに対応していません。
</video>メタ情報・SEO
検索エンジン最適化（SEO）やSNSシェアに重要なメタ情報タグです。head要素内に記述します。
| タグ・属性 | 説明 | 備考・使い所 |
|---|---|---|
<meta charset="UTF-8"> | 文字エンコーディングの指定 | UTF-8が標準。head要素の先頭付近に配置 |
<meta name="viewport"> | ビューポートの設定 | モバイル対応に必須。width=device-width, initial-scale=1.0が基本 |
<meta name="description"> | ページの説明文 | 検索結果のスニペットに表示される。120〜160文字が目安 |
<meta property="og:title"> | OGPタイトル | SNSシェア時に表示されるタイトル |
<meta property="og:description"> | OGP説明文 | SNSシェア時に表示される説明 |
<meta property="og:image"> | OGP画像 | SNSシェア時のサムネイル。1200x630px推奨 |
<meta property="og:url"> | OGPのURL | シェアされるページの正規URL |
<link rel="canonical"> | 正規URLの指定 | 重複コンテンツ防止。検索エンジンに正しいURLを通知 |
<link rel="icon"> | ファビコンの指定 | ブラウザのタブやブックマークに表示されるアイコン |
<base> | 相対URLのベースURLを設定 | ページ内のすべての相対URLの基準となる。使用は慎重に |
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル | サイト名</title>
<meta name="description" content="ページの説明文をここに記述。120〜160文字が目安。">
<!-- OGP（Open Graph Protocol） -->
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="SNSシェア時の説明文">
<meta property="og:image" content="https://example.com/ogp.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<!-- 正規URL -->
<link rel="canonical" href="https://example.com/page">
<link rel="icon" href="/favicon.ico">
</head>セマンティクス使い分けガイド
混同しやすいHTMLタグの使い分けを比較表形式でまとめます。迷ったときの判断基準として活用してください。
div vs section vs article
| タグ | 意味 | 使う場面 | 見出しの有無 |
|---|---|---|---|
<div> | 意味なし（汎用コンテナ） | CSSスタイリングやJSのフック用 | 不要 |
<section> | ページ内の意味的なまとまり | 章・節など、テーマで区切られたコンテンツ | 通常あり |
<article> | 独立して意味をなすコンテンツ | ブログ記事、ニュース、コメント | 通常あり |
html
<!-- div: スタイリング目的のラッパー -->
<div class="container">
<div class="grid">...</div>
</div>
<!-- section: ページ内の章立て -->
<section>
<h2>第1章 はじめに</h2>
<p>...</p>
</section>
<!-- article: 独立したコンテンツ -->
<article>
<h2>ブログ記事タイトル</h2>
<p>この記事は単体で意味をなします。</p>
</article>判断に迷ったら：そのコンテンツだけを別ページに切り出しても意味が通じるならarticle、テーマで区切りたいならsection、どちらでもなければdivを使います。
strong / b と em / i
| タグ | 種類 | 意味 | 使う場面 |
|---|---|---|---|
<strong> | セマンティック | 重要性が高い内容 | 警告文、重要な注意事項 |
<b> | プレゼンテーション | 見た目の太字（意味的強調なし） | キーワードのスタイリング |
<em> | セマンティック | 意味を変える強調（アクセント） | 「このファイルを削除」のような文意の変化 |
<i> | プレゼンテーション | 見た目の斜体（意味的強調なし） | 学名、外国語のフレーズ、技術用語 |
判断に迷ったら：スクリーンリーダーに「ここは重要」と伝えたいならstrong/em、見た目だけ変えたいならb/iを使います。
ul vs ol vs dl
| タグ | 用途 | 使う場面 |
|---|---|---|
<ul> | 順序なしリスト | 材料一覧、ナビゲーションメニュー、箇条書き |
<ol> | 順序付きリスト | 手順書、ランキング、ステップバイステップの説明 |
<dl> | 説明リスト（用語と定義のペア） | FAQ、用語集、メタデータ（著者: 太郎） |
html
<!-- ul: 順序に意味がないリスト -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- ol: 順序に意味があるリスト -->
<ol>
<li>要件定義</li>
<li>設計</li>
<li>実装</li>
</ol>
<!-- dl: 用語と説明のペア -->
<dl>
<dt>HTML</dt>
<dd>Webページの構造を記述するマークアップ言語</dd>
<dt>CSS</dt>
<dd>Webページのスタイルを定義するスタイルシート言語</dd>
</dl>判断に迷ったら：項目を入れ替えても意味が変わらないならul、順番が重要ならol、「何が：どういう意味」のペアならdlを使います。
header / footer の使い分け
| 配置場所 | header の役割 | footer の役割 |
|---|---|---|
| ページ全体 | サイトロゴ、グローバルナビゲーション | 著作権表示、サイトマップリンク |
| article / section 内 | 記事タイトル、投稿日、著者名 | タグ一覧、シェアボタン、関連記事リンク |
html
<!-- ページレベルとセクションレベルの両方で使える -->
<body>
<header>
<!-- ページ全体のヘッダー -->
<nav>...</nav>
</header>
<main>
<article>
<header>
<!-- 記事のヘッダー -->
<h1>記事タイトル</h1>
<time datetime="2026-03-02">2026年3月2日</time>
</header>
<p>本文...</p>
<footer>
<!-- 記事のフッター -->
<p>カテゴリ: Web開発</p>
</footer>
</article>
</main>
<footer>
<!-- ページ全体のフッター -->
<p>© 2026 サイト名</p>
</footer>
</body>判断に迷ったら：header/footerは「何に対する」導入・末尾かを考えます。bodyの直下ならページ全体、articleの中なら記事に対するものです。
こんなときに使えます
シーンsectionとarticleとdivの使い分けに迷ったとき
得られる情報用途ごとの比較表で適切なタグをすぐ判断できる
セマンティクスガイドで混乱しやすいタグの違いを解説
よくある質問
sectionとarticleとdivはどう使い分けますか？
articleは独立して意味をなすコンテンツ（ブログ記事やニュース記事など）に使います。sectionはページ内の意味的なまとまり（章・節）に使い、通常は見出しを伴います。divは意味を持たない汎用コンテナで、スタイリング目的のみの場合に使います。
strongタグとbタグの違いは何ですか？
strongは意味的に「重要な内容」を示し、スクリーンリーダーが強調して読み上げます。bは視覚的に太字にするだけで意味的な強調はありません。SEOやアクセシビリティを考慮する場合はstrongを使います。
HTMLのmetaタグでSEOに重要なものはどれですか？
最も重要なのはmeta descriptionで、検索結果のスニペットに表示されます。次にviewport設定（モバイル対応）、charset指定（文字化け防止）が必須です。OGPタグ（og:title, og:image等）はSNSシェア時の表示に影響します。
HTML5で追加されたセマンティックタグにはどんなものがありますか？
主なものはheader, footer, nav, main, article, section, aside, figure, figcaption, time, mark, details, summaryなどです。これらを使うことで文書構造が明確になり、SEOやアクセシビリティが向上します。