HTML5

2021.11.09

HTML5で使える全要素まとめ

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

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

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

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

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


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

メタデータコンテンツ

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

フローコンテンツ

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

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

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

見出しコンテンツ(ヘディングコンテンツ)

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

フレージングコンテンツ

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

組み込みコンテンツ(エンベディッドコンテンツ)

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

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

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

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

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

トランスペアレントコンテンツ

特定の要素はトランスペアレントコンテンツと呼ばれ、親要素のコンテンツ・モデルを受け継ぐことができます。
例えば、親要素にsection要素を持つa要素は、親要素のコンテンツ・モデルを受け継ぎフローコンテンツを内容に持つことができるのです。

トランスペアレントコンテンツには以下の要素が該当します。

  • a
  • audio
  • canvas
  • del
  • ins
  • map
  • noscript
  • video

まとめ

使う機会が少なくて意外と知らない要素も多いHTML5。
正しく使うことでマークアップの質が上がるので、ぜひ使いやすい要素から使ってみてください!

こちらもおすすめ

関連記事

  • 2021.11.30

    【HTML5】base要素の使い方と注意点を解説

    HTML5

  • 2021.10.19

    HTMLでメールを送る「mailto:」の使い方【注意点も解説】

    HTML5

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

おすすめ記事

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.10.28

    mac bookで使える!おすすめBluetoothキーボード3選

    その他

WPサービス

×