改めて確認しよう！HTML5の要素一覧

2015/06/01
- HTML&CSS

今更ですが、HTML5の要素一覧作りました。

HTML5勧告時に書いとくべきだったとは思いますが、改めてじっくり見ると気づきもあると思いますので少しお付き合いください。

HTMLのタグの一覧をじっくり見ると、こんなのもあったのね！というのもありますよね（笑）だからこそ、要素一覧を作るのには意味があるし、たまには要素一覧をじっくり見るのも良いと思います。

ちなみにHTML5から追加された要素にはマークを要素名の右に付けています。

ルート要素

html: HTML文書のルート要素を表します。

メタデータ

head: メタデータの集まり。html要素の直下に記述します。
title: HTML文書のタイトルを表します。基本的にはページごとに変更します。SEO的には重要な要素です。
base: 相対URLの基準となるURLを指定します。
link: 外部CSSなど別のファイルとの関連付けに使用します。
meta: 文書に関するメタデータを表します。
style: ページ内部に記述するスタイルシートを指定します。

スクリプティング

script: JavaScriptを記述します。
noscript: ブラウザ側でJavaScriptが無効の場合に表示する内容を記述します。

セクション

body: HTML文書の本体（コンテンツ）を表します。意外に思うかもしれませんが、bodyもセクション要素です。
article: 自己完結したセクションを表します。
section: 一般的なセクションを表します。article内部を複数のセクションに分割する場合にも使用します。 articleとsectionの使い方には少々迷うところがあります。
asaide: 補足的なセクションを表します。関連情報などのマークアップに使用します。
nav: ナビゲーションを表します。全てのリンクをnav要素でマークアップするわけではありません。
h1 – h6: 見出しを表します。h1から順番に使用します。「HTML5におけるh1（見出し）の使い方」も合わせてご覧ください。
hgroup: 見出しのグループ化に使用します。次のHTML5.1で廃止予定です。
header: ヘッダーを表します。各セクションのヘッダーとしても使用できます。
footer: フッターを表します。各セクションのフッターとしても使用できます。
address: 連絡先等の情報を表します。

コンテンツのグループ化

p: 段落を表します。使用頻度高めです。
hr: テーマの区切りを表します。個人的には、あまり使いません。
pre: 整形済みテキストを表します。改行などそのまま表示されます。
blockquote: 引用セクションを表します。長めの引用に使用します。
ul: 番号がない箇条書きリストを表します。
ol: 番号付きの箇条書きリストを表します。
li: ulやol内でリスト項目を表します。
dl: 定義型のリストを表します。
dt: 定義型リストの用語を表します。
dd: 定義型リストの用語の説明文を表します。
figure: 図版を表します。画像を全てfigureでマークアップする訳ではなく、説明文を読みながら参照する画像などに使用します。
figucaption: 図版にキャプションを付けます。
div: 特に意味のない要素ですが、レイアウトには欠かせません。グループ化に使用します。
main: メインコンテンツを表します。

テキストの意味付け

a: リンクを表します。リンク先は、href属性で指定します。
em: 強調を表します。デフォルトスタイルシートでは斜体になります。
strong: 重要なキーワードを表します。デフォルトでは太字になります。
small: 注釈を表します。
s: 正確でない内容を表します。取り消し線付きで表示されます。
cite: 作品のタイトルを表します。本や映画、テレビ番組などをマークアップするのに使用します。
q: 短めの引用文を表します。
dfn: 定義される用語を表します。
abbr: 略語や頭文字を表します。title属性を使用した場合は、略語に対する正式名称を表します。
time: 日付や時刻を表します。
code: ソースコードを表します。
var: 変数を表します。
samp: 出力サンプルを表します。
kbd: ユーザが入力する内容を表します。
sub: 下付き文字を表します。
sup: 上付き文字を表します。
i: 専門用語や慣用句などを表します。
b: キーワードや製品名を表します。
u: 発音しないテキストを表します。
mark: テキストをハイライトさせて強調表示します。
ruby: ルビ（ふりがな）を表します。
rt: ルビ用のテキストを表します。
rp: ルビ用の括弧を表します。
bdi: テキストを実際の場所から分離して表示します。
bdo: テキストの方向を指定します。
span: 特に意味のない要素です。テキストレベルでのグループ化に使用します。
br: 改行を表します。
wbr: 改行位置の候補を表します。

訂正

ins: 追加された個所を表します。
del: 削除された個所を表します。

コンテンツの埋め込み

img: 画像を表示します。
iframe: インラインフレームを表示します。
embed: プラグインデータを埋め込みます。
object: プラグインなどを埋め込みます。
param: objectで埋め込んだプラグインのパラメーターを指定します。
video: 動画を埋め込み再生します。
audio: 音声を埋め込み再生します。
source: 形式の異なる複数のメディアを指定します。
track: 動画や音声などと同期するテキストトラックを指定します。
canvas: グラフィックスを描画します。
map: イメージマップを作成します。
area: イメージマップのリンク領域を指定します。

テーブル

table: 表を表します。
caption: 表にキャプションを表します。
colgroup: 表の列をグループ化します。
col: 表の列を表します。
tbody: 表の本体にあたる行をグループ化します。
thead: 表のヘッダーにあたる部分をグループ化します。
tfoot: 表のフッターにあたる部分をグループ化します。
tr: 表の行を表します。
td: セルを表します。
th: 表の見出しセルを表します。

フォーム

form: 入力フォームを表します。
fieldset: フォームの部品をグループ化します。
legend: グループ化された部品にキャプションを付けます。
label: フォームの部品とラベルを関連付けます。
input: フォームの入力部品を作成します。
button: ボタンを作成します。
select: 選択式のメニューを作ります。
datalist: 入力候補のリストを作ります。
optgroup: 選択メニューの選択肢をグループ化します。
option: 入力候補の選択肢を作ります。
textarea: 複数行のテキスト入力欄を作ります。
keygen: 暗号鍵を作ります。
output: 計算結果を表します。
progress: 進行状況を表します。
meter: 数量や割合を表します。

インタラクティブ

details: 備考などの詳細情報を表します。
summary: detail要素の要約などを表します。
command: コマンドを表します。
menu: コマンドのリストを表します。