HTML5.1の全要素 | HTML5プロフェッショナル認定試験レベル1(ver.2.0)試験対策

  • 2021年1月2日
  • 2021年4月28日
  • 資格

HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験対策の備忘録。

今回は、試験範囲でもある「HTML5.1の全要素」のまとめ。

ちなみに、2014年10月28日にW3Cによって「HTML5」が勧告され、2016年11月1日には「HTML5.1」へ、そして2017年12月14日には「HTML5.2」が勧告されました。2019年5月になって、W3CとWHATWGは“HTML Living standard”をHTML技術仕様の唯一の標準規格とすると合意しました。これにより現在は、WHATWGによって策定された「HTML Living standard」が「HTML5/5.1/5.2」に代わるHTML技術仕様の標準規格となっているが、2021年04月現在「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験範囲のHTMLのバージョンは「HTML5.1(※5.0については、5.1で非奨励になったものも一部出題される可能性がある)」だそうなので、「HTML5.1」をもとに書いています。

HTML5の要素のカテゴリー

HTML5よりも以前のHTML/XHTMLでは、要素は大きくインライン要素ブロックレベル要素の2種類に分類されていた。インライン要素は、文章の一部分として含むことのできる要素、そのインライン要素のまとまった単位ブロックレベル要素と言っていた。

HTML5からは、このインラインかブロックレベルかという要素の大きな分類は廃止され、大きく7つのカテゴリーが定義されている。以前は、ブロックレベル要素以外の要素をbody要素の直下に配置することは基本的にできなかったが、HTML5ではブロックレベルかどうかの分類はなくなっているので、従来のインライン要素に該当する要素でも、body要素の直下に配置できるようになった

従来のインライン要素 ≒ フレージングコンテンツ(Phrasing content)

全体構造とメタ情報
要素 フロー フレージング 組み込み インタラクティブ メタデータ 見出し セクショニング トランス
ペアレント
空要素
html
head
body
title
meta
link
base
script
noscript
template
style
セクションと見出し
要素 フロー フレージング 組み込み インタラクティブ メタデータ 見出し セクショニング トランス
ペアレント
空要素
h1~h6
article
section
aside
nav
header
footer
main
address
div
span
リスト
要素 フロー フレージング 組み込み インタラクティブ メタデータ 見出し セクショニング トランス
ペアレント
空要素
ul
ol
li
dl
dt
dd
テーブル
要素 フロー フレージング 組み込み インタラクティブ メタデータ 見出し セクショニング トランス
ペアレント
空要素
table
tr
th
td
thead
tbody
tfoot
caption
colgroup
col
テキスト
要素 フロー フレージング 組み込み インタラクティブ メタデータ 見出し セクショニング トランス
ペアレント
空要素
p
a ●*
em
strong
blockquote
q
cite
mark
small
data
time
abbr
dfn
b
i
s
u
bdo
bdi
pre
code
kbd
samp
var
sup
sub
br
wbr
ins
del
ruby
rb
rp
rt
rtc

※a要素はhref属性が指定されている場合のみインタラクティブコンテンツ。

画像・動画・音声
要素 フロー フレージング 組み込み インタラクティブ メタデータ 見出し セクショニング トランス
ペアレント
空要素
img
picture
canvas
svg
source
video ●*
audio ●*
track
embed
map
area ●* ●*
object ●*
param

area要素は、map要素に含まれている場合のみフローおよびフレージングコンテンツ
audio要素とvideo要素は、controls属性が指定されている場合のみインタラクティブコンテンツ
img要素とobject要素は、usemap属性が指定されている場合のみインタラクティブコンテンツ

フォーム
要素 フロー フレージング 組み込み インタラクティブ メタデータ 見出し セクショニング トランス
ペアレント
空要素
form
input
textarea
button
select
option
optgroup
meter
progress
datalist
output
keygen
label
fieldset
legend
その他
要素 フロー フレージング 組み込み インタラクティブ メタデータ 見出し セクショニング トランス
ペアレント
空要素
figure
figcaption
details
summary
menu
menuitem
iframe
hr

※要素の種類に関わらず、tabindex属性が指定されるとインタラクティブコンテンツに該当。

>おとママのお買得商品×美容×好きなもの

おとママのお買得商品×美容×好きなもの

現在子育て中で忙しくしていますが、 自分が好きでいいなと思った物や 私が実際に使っていいと思った物、またセールなどでお得な商品などを紹介しています。よかったらたちよってみてください✨

CTR IMG