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やアクセシビリティが向上します。

基本構造

セクション・ページ構造

テキストコンテンツ

インラインテキスト

テーブル

フォーム

inputのtype属性一覧

画像・メディア

メタ情報・SEO

セマンティクス使い分けガイド

div vs section vs article

strong / b と em / i

ul vs ol vs dl

header / footer の使い分け

よくある質問

このチートシートをシェア

基本構造

セクション・ページ構造

テキストコンテンツ

インラインテキスト

テーブル

フォーム

inputのtype属性一覧

画像・メディア

メタ情報・SEO

セマンティクス使い分けガイド

div vs section vs article

strong / b と em / i

ul vs ol vs dl

header / footer の使い分け