メタデータコンテンツ（Metadata content）
※ページの情報や外部リソースを設定するために使用され、特にSEOやページ動作に重要となるタグ群です。
- !doctype
- →HTMLのバージョンを指定・宣言する（HTML5では !doctype html）
- html
- →HTMLドキュメントのルート要素
- head
- →メタデータ（タイトル・スタイル・スクリプトなど）を含む要素
- title
- →ウェブページのタイトル（ブラウザのタブに表示される）
- meta
- →ページのメタデータ（文字エンコード・詳細説明・ビュー設定など）を指定
- link
- →外部のリソース（CSSファイル・アイコンなど）を関連付ける
- style
- →内部CSSを定義
- script
- →JavaScriptコードを埋め込む
- base
- →ドキュメント内のすべての相対URLの基準URLを設定する
フローコンテンツ（Flow content）
※文書の主要な構造を構成するタグ群で、ブロック要素やインライン要素を含む幅広い要素が該当します。
- a
- →ハイパーリンクを作成
- abbr
- →略語や頭字語を定義
- 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（ベクター画像）を描画
- 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
- →複数行のテキスト入力フィールドを作成