主要HTML
タグチートシート

中央の装飾線

メタデータコンテンツ（Metadata content）

ページの情報や外部リソースを設定するために使用され、特にSEOやページ動作に重要となるタグ群です。

!doctype
HTMLのバージョンを指定・宣言する
（HTML5では !doctype html）
html
HTMLドキュメントのルート要素
head
メタデータ（タイトル・スタイル・スクリプトなど）を含む要素
title
ウェブページのタイトル（ブラウザのタブに表示される）
meta
ページのメタデータ（文字エンコード・詳細説明・ビュー設定など）を指定
link
外部のリソース（CSSファイル・アイコンなど）を関連付ける
style
内部CSSを定義
script
JavaScriptコードを埋め込む
base
ドキュメント内の相対URLの基準を設定

フローコンテンツ（Flow content）

文書の主要な構造を構成するタグ群で、ブロック要素やインライン要素を含む幅広い要素が該当します。

a
ハイパーリンクを作成
abbr
略語や頭字語を定義
address
連絡先情報（サイト管理者・組織の連絡先）を示す
article
独立したコンテンツ（ニュース記事・ブログ投稿など）を表す
aside
補足情報（サイドバー・広告など）を示す
audio
音声コンテンツを埋め込む
b
テキストを視覚的に太字にする（意味的な強調はしない
重要な意味を持つ場合はstrongを使用
blockquote
引用文を表す
cite
作品のタイトルを表す
details
折りたたみ可能な詳細情報を作成
div
汎用的なコンテナ要素（スタイルやレイアウトに使用）
dl
説明リストを作成
em
テキストを強調（通常・斜体表示）
fieldset
フォーム内の関連要素をグループ化
figure
図やイラストを含むコンテナ
footer
フッターセクション（著作権情報など）
form
ユーザー入力を受け付けるフォームを作成
header
ヘッダーセクション（ナビゲーションやロゴなど）
hr
区切り線を表示
img
画像を埋め込む
input
フォームの入力フィールドを作成
label
フォームのラベルを定義
main
ページの主要コンテンツを示す
nav
ナビゲーションリンクのセットを示す
object
埋め込みオブジェクト（外部リソース）を表示
ol
順序付きリストを作成
p
段落を作成
pre
整形済みテキストを表示（改行やスペースを保持）
q
短い引用を表す
section
文書のセクションを示す
select
ドロップダウンリストを作成
span
インライン要素のグループ化（スタイル適用に使用）
strong
強調（意味的に重要・通常は太字）
sub
下付き文字を表示
sup
上付き文字を表示
table
表を作成
textarea
複数行のテキスト入力フィールドを作成
time
時間や日付を表す
ul
順序なしリストを作成
video
動画を埋め込む

区分コンテンツ（Sectioning content）

ページ構造を整理するための要素で、HTMLの意味論的（意味のあるタグ）なマークアップにおいて重要です。
divはコンテナを作るだけなので含まれません。

article
独立したコンテンツ（ニュース記事・ブログ投稿など）を表す
aside
補足情報（サイドバー・広告など）を示す
nav
ナビゲーションリンクのセットを示す
section
文書のセクションを示す
header
ヘッダーセクション（ナビゲーションやロゴなど）
footer
フッターセクション（著作権情報など）
main
ページの主要コンテンツを示す（1ページに1つ推奨）
address
連絡先情報（サイト管理者・組織の連絡先）を示す

見出しコンテンツ（Heading Content）

ページの構造を整理しSEO対策にも影響するため、適切に使用することが重要です。

h1
最も重要な見出し（ページタイトルなどに使用）
h2
2番目に重要な見出し（コンテンツのタイトルなどに使用）
h3
3番目に重要な見出し（小見出しとして使用）
h4
4番目に重要な見出し（さらに細かい見出し）
h5
5番目に重要な見出し（h4よりも小さい見出し）
h6
6番目に重要な見出し（最も小さい見出し）

記述コンテンツ（Phrasing Content）

テキストやインライン要素を扱うためのタグであり、主に文章の構成や装飾、フォーム入力のために使用されます。

a
ハイパーリンクを作成
abbr
略語や頭字語を定義
area
画像マップ内のクリック可能領域を定義
audio
音声コンテンツを埋め込む
b
テキストを視覚的に太字にする（意味的な強調はしない）
重要な意味を持つ場合はstrongを使用
br
改行を挿入
button
クリック可能なボタンを作成
canvas
描画領域を提供（JavaScriptと組み合わせて使用）
cite
作品のタイトルを表す
em
テキストを強調（通常・斜体表示）
embed
外部コンテンツを埋め込む（動画・音声など）
i
テキストを斜体にする（意味的な強調なし）
iframe
別のウェブページを埋め込む
img
画像を埋め込む
input
フォームの入力フィールドを作成
label
フォームのラベルを定義
q
短い引用を表す
ruby
ルビ（ふりがな）を表示
rt
ルビのテキストを定義
s
取り消し線を表示
script
JavaScriptコードを埋め込む
select
ドロップダウンリストを作成
small
小さいテキストを表示
span
インライン要素のグループ化（スタイル適用に使用）
strong
強調（意味的に重要・通常は太字）
sub
下付き文字を表示
sup
上付き文字を表示
textarea
複数行のテキスト入力フィールドを作成
time
時間や日付を表す
video
動画を埋め込む

埋め込みコンテンツ（Embedded Content）

外部メディア等をページ内に埋め込むための要素で動画・音声・画像・外部ページの表示に使用されます。

audio
音声コンテンツを埋め込む
canvas
描画領域を提供（JavaScriptと組み合わせて使用）
embed
外部コンテンツを埋め込む（プラグインコンテンツなど）
iframe
別のウェブページを埋め込む
img
画像を埋め込む
object
埋め込みオブジェクト（外部リソース）を表示
source
音声・動画の複数のソースを指定
svg
SVG（ベクター画像）を描画
track
音声・動画の字幕やキャプションを指定
video
動画を埋め込む

対話型コンテンツ（Interactive Content）

ユーザーが操作できる要素を提供するためのタグ群です。フォーム、ボタン、ナビゲーションなどが含まれます。

a
ハイパーリンクを作成
button
クリック可能なボタンを作成
details
折りたたみ可能な詳細情報を作成
embed
外部コンテンツを埋め込む（プラグインコンテンツなど）
iframe
別のウェブページを埋め込む
input
フォームの入力フィールドを作成
label
フォームのラベルを定義
select
ドロップダウンリストを作成
textarea
複数行のテキスト入力フィールドを作成

知覚可能コンテンツ（Palpable Content）

ユーザーが視覚的に認識できる要素を指します。
ページ内に何かしらの内容を表示する要素で、空のdivやspanなどは知覚可能コンテンツに含まれません。

a
ハイパーリンクを作成
abbr
略語や頭字語を定義
address
連絡先情報（サイト管理者・組織の連絡先）を示す
article
独立したコンテンツ（ニュース記事・ブログ投稿など）を表す
aside
補足情報（サイドバー・広告など）を示す
audio
音声コンテンツを埋め込む
b
テキストを視覚的に太字にする（意味的な強調はしない）
重要な意味を持つ場合はstrongを使用
blockquote
引用文を表す
button
クリック可能なボタンを作成
canvas
描画領域を提供（JavaScriptと組み合わせて使用）
cite
作品のタイトルを表す
details
折りたたみ可能な詳細情報を作成
dfn
用語の定義を示す
div
汎用的なコンテナ要素（スタイルやレイアウトに使用）
dl
説明リストを作成
em
テキストを強調（通常・斜体表示）
fieldset
フォーム内の関連要素をグループ化
figure
図やイラストを含むコンテナ
footer
フッターセクション（著作権情報など）
form
ユーザー入力を受け付けるフォームを作成
header
ヘッダーセクション（ナビゲーションやロゴなど）
hr
区切り線を表示
i
テキストを斜体にする（意味的な強調なし）
img
画像を埋め込む
input
フォームの入力フィールドを作成
label
フォームのラベルを定義
main
ページの主要コンテンツを示す
mark
ハイライトされたテキストを表す
meter
数値の測定値を示す（進捗バーなど）
nav
ナビゲーションリンクのセットを示す
object
埋め込みオブジェクト（外部リソース）を表示
ol
順序付きリストを作成
p
段落を作成
pre
整形済みテキストを表示（改行やスペースを保持）
progress
進行状況バーを表示
q
短い引用を表す
s
取り消し線を表示
section
文書のセクションを示す
select
ドロップダウンリストを作成
small
小さいテキストを表示
span
インライン要素のグループ化（スタイル適用に使用）
strong
強調（意味的に重要・通常は太字）
sub
下付き文字を表示
sup
上付き文字を表示
table
表を作成
textarea
複数行のテキスト入力フィールドを作成
time
時間や日付を表す
u
下線を表示（意味的な強調なし）
ul
順序なしリストを作成
video
動画を埋め込む

フォーム関連コンテンツ（Form associated Content）

ユーザー入力を受け付ける要素として、フォームや入力フィールド、選択リスト、ボタンなどが含まれます。

button
クリック可能なボタンを作成
datalist
入力候補のリストを作成
fieldset
フォーム内の関連要素をグループ化
form
ユーザー入力を受け付けるフォームを作成
input
フォームの入力フィールドを作成
label
フォームのラベルを定義
legend
fieldset内のタイトルを定義
optgroup
select内でオプションをグループ化
option
selectやdatalistの選択肢を定義
select
ドロップダウンリストを作成
textarea
複数行のテキスト入力フィールドを作成