HTML5で使える全要素まとめ

コーディング

HTML

コーディングをする中で必ずと言ってもいいほど触れるHTML。
その中でも最近一番よく耳にするのはHTML5ではないでしょうか？
よく耳にするものの、実際どんな要素があるのかを把握するのは難しいですよね…。

今回はそんなHTML5にはどんな要素があるのか、全要素をまとめてみました！

そもそもHTML5とは？

そもそもHTML5とはWebページの内容を書くための基本の言語、HTML（Hyper Text Markup Language）のバージョン5ということを指しています。
1993年ごろに初期のHTML1が開発されてからバージョンアップを繰り返し、2014年10月に発表された今の最新バージョンがHTML5なのです。

HTML5で使える全要素

今回の本題、HTML5で使える全ての要素をアルファベット順でまとめてみました。
新しく追加された要素や、使い方が変更された要素もあるため、かなりの量があります…！

テキストが水色になっている要素は別の記事で詳しい使い方を解説していますので、合わせて見てみてください！

要素名	意味	カテゴリー
a	ハイパーリンク	フローコンテンツフレージングコンテンツインタラクティブコンテンツ
abbr	略語	フローコンテンツフレージングコンテンツ
address	問い合わせ先	フローコンテンツ
area	イメージマップの領域を定義	フローコンテンツフレージングコンテンツ
article	完結している記事セクション	フローコンテンツセクショニングコンテンツ
aside	本題ではない内容のセクション	フローコンテンツセクショニングコンテンツ
audio	音声の再生	フローコンテンツフレージングコンテンツ組み込みコンテンツインタラクティブコンテンツ
b	目立たせたいキーワード	フローコンテンツフレージングコンテンツ
base	相対パスの基準とするURL	メタデータコンテンツ
bdi	文字表記の方向の影響を周囲に与えない範囲	フローコンテンツフレージングコンテンツ
bdo	文字表記の方向	フローコンテンツフレージングコンテンツ
blockquote	引用されたコンテンツ（ブロックレベル）	フローコンテンツ
body	HTML文章全体を入れる要素
br	改行	フローコンテンツフレージングコンテンツ
button	ボタン	フローコンテンツフレージングコンテンツインタラクティブコンテンツ
canvas	スクリプトによるビットマップの動的グラフィック	フローコンテンツフレージングコンテンツ組み込みコンテンツ
caption	table要素に対するキャプション
cite	出典	フローコンテンツフレージングコンテンツ
code	ソースコードの一部	フローコンテンツフレージングコンテンツ
col	表の縦列
colgroup	表の縦列のグループ
data	機械読み取りが可能な属性値付きのコンテンツ	フローコンテンツフレージングコンテンツ
datalist	input要素の選択肢となるoption要素を含む要素	フローコンテンツフレージングコンテンツ
dd	dl要素内の「説明文」
del	あとから削除された部分	フローコンテンツフレージングコンテンツ
details	ディスクロージャーウィジェット	フローコンテンツインタラクティブコンテンツ
dfn	定義の対象となっている要素	フローコンテンツフレージングコンテンツ
div	汎用ブロックレベル要素	フローコンテンツ
dl	用語と説明文が対になったリスト	フローコンテンツ
dt	dl要素内の「用語」
em	強調されている部分	フローコンテンツフレージングコンテンツ
embed	プラグインによる外部データの読み込み	フローコンテンツフレージングコンテンツ組み込みコンテンツインタラクティブコンテンツ
fieldset	フォーム部分のグループ	フローコンテンツ
figcaption	figure要素のキャプション
figure	図やイラスト（図版）	フローコンテンツ
footer	フッターのセクション	フローコンテンツ
form	フォーム	フローコンテンツ
h1〜h6	セクションの見出し	フローコンテンツ見出しコンテンツ
head	HTML文章のメタデータを入れる要素
header	ヘッダーのセクション	フローコンテンツ
hr	段落レベルでの主題の変わり目	フローコンテンツ
html	HTML文章全体を含む要素（ルート要素）
i	普通のテキストとは異なる部分	フローコンテンツフレージングコンテンツ
iframe	インライン・フレーム	フローコンテンツフレージングコンテンツ組み込みコンテンツインタラクティブコンテンツ
img	画像	フローコンテンツフレージングコンテンツ組み込みコンテンツインタラクティブコンテンツ
input	フォームの様々な基本部分になる要素	フローコンテンツフレージングコンテンツインタラクティブコンテンツ
ins	あとから挿入された部分	フローコンテンツフレージングコンテンツ
kbd	ユーザーが入力するデータ	フローコンテンツフレージングコンテンツ
keygen	公開鍵・秘密鍵のペアを生成するフォーム部分	フローコンテンツフレージングコンテンツインタラクティブコンテンツ
label	フォーム部分に関連付けられたデータ	フローコンテンツフレージングコンテンツインタラクティブコンテンツ
legend	fieldset要素のキャプション
li	リストの項目
link	HTML文章とファイルを関連付ける	メタデータコンテンツ
main	メインのコンテンツ	フローコンテンツ
map	イメージマップの定義	フローコンテンツフレージングコンテンツ
mark	参照目的で目立たせている部分	フローコンテンツフレージングコンテンツ
menu	コンテキストメニュー	フローコンテンツ
menuitem	コンテキストメニューの項目
meta	メタデータ	メタデータコンテンツ
meter	メーター（特定の範囲内での位置を示す）	フローコンテンツフレージングコンテンツ
nav	主要なナビゲーションのセクション	フローコンテンツセクショニングコンテンツ
noscript	スクリプトが動作しない環境向けの内容	フローコンテンツフレージングコンテンツメタデータコンテンツ
object	様々な形式の外部データの組み込み	フローコンテンツフレージングコンテンツ組み込みコンテンツ
ol	連番付きのリスト	フローコンテンツ
optgroup	option要素のグループ
option	select要素またはdatalist要素の選択肢
output	計算結果を出力するためのフォーム部品	フローコンテンツフレージングコンテンツ
p	段落	フローコンテンツ
param	object要素で使うプラグインのパラメータ
picture	複数の候補画像を含む要素	フローコンテンツフレージングコンテンツ組み込みコンテンツ
pre	整形済みテキスト	フローコンテンツ
progress	プログレスバー	フローコンテンツフレージングコンテンツ
q	引用されたコンテンツ	フローコンテンツフレージングコンテンツ
rb	ルビをふる大将のテキスト
rp	ルビに未対応の環境で使用するかっこ
rt	ルビとして表示させるテキスト
rtc	rt要素のグループ
ruby	ルビ関連要素全体を含む要素	フローコンテンツフレージングコンテンツ
s	正しい情報ではなくなった部分や関係なくなった部分	フローコンテンツフレージングコンテンツ
samp	コンピュータの出力サンプル	フローコンテンツフレージングコンテンツ
script	スクリプト	フローコンテンツフレージングコンテンツメタデータコンテンツ
section	一般的なセクション	フローコンテンツセクショニングコンテンツ
select	選択肢の中から選ぶ形式のフォーム部分	フローコンテンツフレージングコンテンツインタラクティブコンテンツ
small	補足情報的な注記	フローコンテンツフレージングコンテンツ
source	画像・動画・音声の候補データ
span	汎用インライン要素	フローコンテンツフレージングコンテンツ
strong	重要な部分	フローコンテンツフレージングコンテンツ
style	スタイルシート	メタデータコンテンツ
sub	下付き文字	フローコンテンツフレージングコンテンツ
summary	ディスクロージャーウィジェットの見出し
sup	上付き文字	フローコンテンツフレージングコンテンツ
table	表	フローコンテンツ
tbody	表全体の横列グループ
td	表の内容のセル
template	内容をスクリプトで生成する部分	フローコンテンツフレージングコンテンツメタデータコンテンツ
textarea	複数行のテキスト入力欄	フローコンテンツフレージングコンテンツインタラクティブコンテンツ
tfoot	表のフッター横列のグループ
th	表の見出しのセル
thead	表のヘッダー横列のグループ
time	機械読み取りが可能な日付・時間	フローコンテンツフレージングコンテンツ
title	HTML文書のタイトル	メタデータコンテンツ
tr	表の横一列
track	字幕などのテキスト・トラック
u	中国語の固有名詞やスペルミスの箇所など	フローコンテンツフレージングコンテンツ
ul	箇条書きリスト	フローコンテンツ
var	変数	フローコンテンツフレージングコンテンツ
video	動画	フローコンテンツフレージングコンテンツ組み込みコンテンツインタラクティブコンテンツ
wbr	英単語などの途中で行を折り返しても良い位置	フローコンテンツフレージングコンテンツ

HTML5からのカテゴリーとは？

表の一番右の「カテゴリー」欄は、HTML5から定義された分類カテゴリーのどれに当たるかをまとめています。

HTML5よりも前は文章の一部分として含むことのできるインライン要素とインライン要素のまとまった単位であるブロックレベル要素の2種類に分類されていましたが、HTML5からは従来の分類が廃止され、関連性を持つ7つのカテゴリーが定義されるようになりました。

ブロックレベル要素とインライン要素についてはこちら

HTML5で使える全要素まとめ

これまではブロックレベル要素以外をbody要素直下に配置することは基本的にできませんでしたが、HTML5からは従来のインライン要素に該当する要素もbody要素直下に配置することができるように変わっています。

メタデータコンテンツ

メタデータコンテンツとは、文章内のコンテンツの表示や動作を指定したり、ドキュメントの関連性を指定することや、名前の通り文章のメタ情報を指定するための要素です。
HTMLを書き始める時にまずhead要素内に書くようなlink、meta、script、style、titleなどがこれに該当します。

フローコンテンツ

フローコンテンツとは、body要素内で使われるほとんどの要素を指しています。
「特定の要素内にしか配置できない要素」（dl要素内にしか配置できないdt要素）のような制限がなく自由に配置できる要素がフローコンテンツに当たります。

セクショニングコンテンツ

セクショニングコンテンツとは、nav、section要素のようにアウトラインを生成するための要素です。
セクショニングコンテンツは基本的に内容に見出しを持つ状態で使用されます。

見出しコンテンツ（ヘディングコンテンツ）

見出しコンテンツ（ヘディングコンテンツ）とは、名前の通り見出しを定義するための要素です。
h1〜h6要素のみが該当し、基本的に親要素にセクショニングコンテンツを持った状態で使用されることが多いです。

フレージングコンテンツ

フレージングコンテンツとは、文章を構成するテキストを表す要素です。
従来のHTMLではインライン要素と呼ばれていた要素がこの分類に該当します。

組み込みコンテンツ（エンベディッドコンテンツ）

組み込みコンテンツ（エンベディッドコンテンツ）とは、文章内に他のリソースなどを埋め込む要素です。
例えば、動画を埋め込むためのvideo要素、画像を埋め込むためのimg要素などがこれに該当します。

インタラクティブコンテンツ

インタラクティブコンテンツとは、閲覧者が操作する部分に使われる要素です。
フォームのコンテンツになるinput、textarea、button要素や、リンクとなるa要素などがこれに該当します。

合わせて知っておきたい、コンテンツ・モデル

「コンテンツ・モデル」といきなり言われてもよくわからないと思いますが、難しいことではありません。
コンテンツ・モデルとは、ある要素がどの要素を持つことができるか＝子要素として持つことができるかというルールのことを指しています。
例えば、コンテンツ・モデルが「フローコンテンツ」のsection要素はフローコンテンツに属しているp要素を持つことができますが、フローコンテンツに属していないlink要素を持つことはできません。
また、要素に入っている全体を指すのではなく、直接入れられている子要素のみを指しているため孫要素などはこれには当たりません。