HTML要素一覧
ARIAロールの分類分けで記載します。
おおよそどこで使うかがわかると思います。
セクションとランドマーク
| header | ページやセクションのヘッダー |
| footer | ページやセクションのフッター |
| main | メインコンテンツ |
| form | フォーム |
| search | 検索 |
| aside | 補足・関連情報 |
| nav | ナビゲーション |
| section | 一般的なセクション |
| article | 自己完結したコンテンツ |
| h1 – h6 | 見出し |
| hgroup | 見出しと関連コンテンツのグループ |
ブロックレベルのセマンティクス
| address | 連絡先情報 |
| blockquote | 引用文 |
| figure | 図表(自己完結したコンテンツ) |
| hr | 段落レベルの区切り |
| p | 段落 |
| pre | 成形済みテキスト |
| div | 意味を持たないブロックレベル要素 |
| table | テーブル |
| ul | 番号なしリスト |
| ol | 番号付きリスト |
| menu | 番号なしリストの代替 |
| dl | 説明リスト |
| dialog | ダイアログ |
テキストレベルのセマンティクス
| code | コンピュータコード |
| em | 協調(文章の意味を変えたいとき) |
| strong | 重要(まっさきに見てほしいテキスト) |
| sub | 下付き |
| sup | 上付き |
| dfn | 定義した語句 |
| time | 日時 |
| s | 取り消した語句 |
| del | 削除したコンテンツ |
| ins | 追加したコンテンツ |
| span | 意味を持たないインラインレベルの要素 |
| b | 注目してほしい語句 |
| i | 学名や慣用句 |
| u | 中国語の固有名詞やスペルミス |
| q | 引用 |
| bdi | 双方向アルゴリズムの分離 |
| bdo | 双方向アルゴリズムのオーバーライド |
| data | 機械可読な値を要素の内容と関連付ける |
| samp | コンピュータからの出力内容 |
| small | 但し書き(コピーライト、ライセンスなど) |
| abbr | 略語 |
| cite | 作品のタイトル |
| kbd | コンピュータへの入力内容 |
| mark | ハイライト(黄色のマーカーを引いた感じになる) |
| var | 変数 |
| ruby | ルビ(漢字のふりがな等) |
| br | 改行 |
| wbr | 改行を認める箇所 |
| map | イメージマップ |
| area | イメージマップエリアの構成 |
| datalist | 入力候補の作成 |
エンベディッド(埋め込みコンテンツ)
| img | 画像 |
| picture | <img>用の複数の画像リソース |
| audio | 音声 |
| video | 動画 |
| iframe | インラインフレーム(Googleマップ埋め込みなど) |
| embed | 外部リソースの埋め込み(主にプラグイン) |
| object | 外部リソースの埋め込み |
| canvas | Canvas(JavaScriptで描画するための仕様) |
| svg | SVG(ベクター形式の図形を描画) |
| math | MathML(数式) |
インタラクティブ
| details | 開閉式ウィジェット |
| label | フォームコントロールのラベル |
| a | リンク |
フォームコントロール
| input | 入力フィールド/ボタン |
| button | ボタン |
| select | セレクトボックス(選択式メニュー) |
| textarea | テキストエリア |
| progress | プログレスバー(タスクの進捗状況を示す) |
| output | 出力 |
| meter | メーター(特定範囲の値) |
| fieldset | フィールドセット |
スクリプト
| script | スクリプト |
| noscript | スクリプトなしのコンテンツ |
| カスタム要素 | カスタム要素を作成 |
| slot | コンテンツを割り当てるスロット |
| template | テンプレート |
メタデータ
| title | ページのタイトル |
| style | 内部スタイルシート |
| base | ベースのURL |
| link | リソースへのリンク |
| meta | 各種メタデータ |
HTMLの基本構造
| html | ドキュメントルート |
| head | メタデータの記述 |
| body | コンテンツの記述 |
関連要素とセットで使用する要素
| li | リストの項目 |
| dd | 説明リストの語句の説明 |
| dt | 説明リストの語句 |
| figcaption | フィギュアのキャプション |
| rp | ルビをつけるベースとなる語句 |
| rt | ルビの記述 |
| summary | 追加情報の概要 |
| source | 音声・動画・画像のリソースセット |
| track | 音声・動画のテキストトラック |
| legend | fieldsetのキャプション |
| optgroup | 選択肢のグループ |
| option | プルダウン型の選択肢 |
| caption | テーブルのキャプション |
| tbody | テーブルのメインデータ |
| td | テーブルのデータセル |
| tfoot | テーブルのフッター |
| th | テーブルの見出しセル |
| thead | テーブルのヘッダー |
| tr | テーブルの行(Table Rowの略) |
| col | テーブルの列 |
| colgroup | テーブルの列のグループ |
まとめ
書き出すと多い気もしますが、何度も言うように使う要素は限られてきます。
何度も出てくる要素だけ覚えておいて、あとは一覧表などで使うときに確認すればよいと思います。
【HTML5プロフェッショナル認定試験】を受験するならば全部覚えておきましょう。 level1がHTML&CSSメイン、level2がJavaScriptメインの試験となっています。
created by Rinker
¥3,597
(2025/11/19 22:29:35時点 楽天市場調べ-詳細)






