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

HTML5

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

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

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

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

 

目次

  1. ルート要素
  2. メタデータ
  3. スクリプティング
  4. セクション
  5. コンテンツのグループ化
  6. テキストの意味付け
  7. 訂正
  8. コンテンツの埋め込み
  9. テーブル
  10. フォーム
  11. インタラクティブ

 

 

ルート要素

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

 

 

メタデータ

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

 

 

スクリプティング

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

 

 

セクション

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

 

 

コンテンツのグループ化

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

 

 

テキストの意味付け

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

 

 

訂正

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

 

 

コンテンツの埋め込み

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

 

 

テーブル

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

 

 

フォーム

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

 

 

インタラクティブ

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

 

関連情報

関連記事