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