HTML要素一覧

3 min 39 views

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外部リソースの埋め込み
canvasCanvas(JavaScriptで描画するための仕様)
svgSVG(ベクター形式の図形を描画)
mathMathML(数式)

インタラクティブ

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音声・動画のテキストトラック
legendfieldsetのキャプション
optgroup選択肢のグループ
optionプルダウン型の選択肢
captionテーブルのキャプション
tbodyテーブルのメインデータ
tdテーブルのデータセル
tfootテーブルのフッター
thテーブルの見出しセル
theadテーブルのヘッダー
trテーブルの行(Table Rowの略)
colテーブルの列
colgroupテーブルの列のグループ

まとめ

書き出すと多い気もしますが、何度も言うように使う要素は限られてきます。

何度も出てくる要素だけ覚えておいて、あとは一覧表などで使うときに確認すればよいと思います。

【HTML5プロフェッショナル認定試験】を受験するならば全部覚えておきましょう。          level1がHTML&CSSメイン、level2がJavaScriptメインの試験となっています。

関連記事