HTMLを書くときに、よく使うタグの一覧です。
HTMLには、たくさんのタグがありますが、全部覚えようとしないで、ひとまずよく使うものだけ使えれば十分です。
カテゴリー
HTMLには、タグの特徴に合わせてカテゴリーが指定されています。場合によっては、複数のカテゴリーが指定されることもあります。
例えば、
addressタグであれば、フロー・コンテンツ
articleタグであれば、フロー・コンテンツとセクショニング・コンテンツ
コンテンツモデル
HTMLは、入れ子の構造をとります。
例えば、以下のコードでは、「divタグの中にpタグ」があると考えます。
<div>
<p></p>
</div>
ですが、全てのタグで、ごちゃ混ぜになんでも入れ子に出来るわけではにありません。
「どのタグには、何を入れ子にすることが出来るか」というルールがコンテンツモデルです。
例えば、
articleタグには、フローコンテンツを、
dtタグには、フレージングコンテンツを入れることが出来ます。
私がよく使うHTMLタグ
| タグ名 | カテゴリー | コンテンツモデル | 意味 |
|---|---|---|---|
| a | フロー・コンテンツ フレージング・コンテンツ インタラクティブ・コンテンツ（href属性有の場合のみ） | トランスペアレント | ハイパーリンク |
| address | フロー・コンテンツ | フロー・コンテンツ ※下位要素に以下を入れることは不可 ヘディング・コンテンツ、セクショニング・コンテンツ、header 要素、footer 要素、address 要素 | 連絡先・問合せ先を表す |
| article | フロー・コンテンツ セクショニング・コンテンツ | フロー・コンテンツ | 記事であることを示す |
| aside | フロー・コンテンツ セクショニング・コンテンツ | フロー・コンテンツ | 余談・補足情報 |
| audio | フロー・コンテンツ フレージング・コンテンツ エンベッディド・コンテンツ インタラクティブ・コンテンツ（controls属性有の場合のみ） | src属性有：トランスペアレント（下位要素に media 要素を入れることは不可） src属性無：0 個以上の source要素 + トランスペアレント（下位要素に media 要素を入れることは不可） | 音声を再生する |
| body | セクショニング・ルート | フロー・コンテンツ | 文書の本体 |
| br | フロー・コンテンツ フレージング・コンテンツ | 他の要素は入れられない | 改行 |
| button | フロー・コンテンツ フレージング・コンテンツ インタラクティブ・コンテンツ | フレージング・コンテンツ（下位要素にインタラクティブ・コンテンツを入れることは不可） | ボタン |
| dd | なし | フロー・コンテンツ | 定義リストの説明 |
| div | フロー・コンテンツ | フロー・コンテンツ | ひとかたまりの範囲 |
| dl | フロー・コンテンツ | 1個以上のdt要素 + 1個以上のdd要素のセットを0個以上 | 定義リスト |
| dt | なし | フレージング・コンテンツ | 定義リストの項目 |
| figcaption | なし | フロー・コンテンツ | 画像の説明 |
| figure | フロー・コンテンツ セクショニング・ルート | ・1つのfigcaption要素の後にフロー・コンテンツ ・または、フロー・コンテンツの後に1つの figcaption要素 ・または、フロー・コンテンツ この3パターンのいずれか | 図表 |
| footer | フロー・コンテンツ | フロー・コンテンツ（下位要素に header要素及び footer 要素を入れることは不可） | フッター |
| form | フロー・コンテンツ | フロー・コンテンツ（下位要素に form 要素を入れることは不可） | フォーム |
| h1～h6 | フロー・コンテンツ ヘディング・コンテンツ | フレージング・コンテンツ | 見出し |
| header | フロー・コンテンツ | フロー・コンテンツ（下位要素に header要素及び footer 要素を入れることは不可） | ヘッダー |
| head | なし | 1つ以上のM そのうち1個は title要素 | 文書のヘッダ情報 |
| html | なし | head要素の後にbody要素 | HTML文書であることを示す |
| i | フロー・コンテンツ フレージング・コンテンツ | フレージング・コンテンツ | 声や心の中で思ったことなど、他と区別したいテキストを表す |
| iframe | フロー・コンテンツ フレージング・コンテンツ エンベッディド・コンテンツ インタラクティブ・コンテンツ | テキスト | インラインフレームを作る |
| img | フロー・コンテンツ フレージング・コンテンツ エンベッディド・コンテンツ インタラクティブ・コンテンツ（usemap属性有の場合のみ） | 他の要素は入れられない | 画像 |
| input | フロー・コンテンツ フレージング・コンテンツ インタラクティブ・コンテンツ（type属性hidden以外） | 他の要素は入れられない | 入力項目 |
| label | フロー・コンテンツ フレージング・コンテンツ インタラクティブ・コンテンツ | フレージング・コンテンツ ※下位要素に以下を入れることは不可 label要素、ラベルの対象になってないフォーム関連要素 | 入力項目のラベル |
| li | なし | フロー・コンテンツ | リスト項目 |
| link | メタデータ・コンテンツ | なし | リンクする外部ファイルを指定する |
| meta | メタデータ・コンテンツ | 他の要素は入れられない | メタ情報 |
| nav | フロー・コンテンツ セクショニング・コンテンツ | フロー・コンテンツ | ナビゲーション |
| ol | フロー・コンテンツ | 0個以上の li要素 | 順番付きリスト |
| p | フロー・コンテンツ | フレージング・コンテンツ | 段落 |
| script | メタデータ・コンテンツ フロー・コンテンツ フレージング・コンテンツ | src属性無：type属性の値に依存。スクリプト src属性有：他の要素は入れられない | スクリプトファイルを読み込む |
| section | フロー・コンテンツ セクショニング・コンテンツ | フロー・コンテンツ | 区分 |
| small | フロー・コンテンツ フレージング・コンテンツ | フレージング・コンテンツ | 細目 |
| source | なし | 他の要素は入れられない | 動画や音声などのURLや種類を指定する |
| span | フロー・コンテンツ フレージング・コンテンツ | フレージング・コンテンツ | ひとつの範囲として定義する |
| style | メタデータ・コンテンツ フロー・コンテンツ（scoped属性有の場合） | type属性の値に依存。スタイルシート | スタイルシートを記述する |
| table | フロー・コンテンツ | 次の順番で配置： オプションでcaption要素/0個以上のcolgroup要素/オプションでthead要素/オプションでtfoot要素/0個以上のtbody要素または1個以上のtr要素/オプションでtfoot 要素（ただしtfoot要素はtable内で1個だけ） | 表 |
| td | セクショニング・ルート | フロー・コンテンツ | 表のデータセル |
| textarea | フロー・コンテンツ フレージング・コンテンツ インタラクティブ・コンテンツ | テキスト | 複数行のテキスト入力 |
| th | なし | フレージング・コンテンツ | 表の見出しセル |
| title | メタデータ・コンテンツ | テキスト | タイトル |
| tr | なし | 0個以上td要素またはth要素 | 表の横一行 |
| ul | フロー・コンテンツ | 0個以上のli要素 | 箇条書き |
| video | フロー・コンテンツ フレージング・コンテンツ エンベッディド・コンテンツ インタラクティブ・コンテンツ（controls属性有の場合） | src属性有：0個以上のtrack要素 + トランスペアレント（下位要素に media 要素を入れることは不可） src属性無：0 個以上のsource要素、0個以上のtrack要素 + トランスペアレント（下位要素に media 要素を入れることは不可） | 動画を再生する |
