メタデータコンテンツ（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
- 複数行のテキスト入力フィールドを作成