「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プロフェッショナル認定試験レベル1(ver.2.0)」の認定試験を受験してきました。 これまで20年以上、Webサイト制作の仕事に携わってきた私ですが、今回受験してみた率直な感想は... 「[…]
HTML5の要素のカテゴリー
HTML5よりも以前のHTML/XHTMLでは、要素は大きくインライン要素とブロックレベル要素の2種類に分類されていた。インライン要素は、文章の一部分として含むことのできる要素、そのインライン要素のまとまった単位をブロックレベル要素と言っていた。
HTML5からは、このインラインかブロックレベルかという要素の大きな分類は廃止され、大きく７つのカテゴリーが定義されている。以前は、ブロックレベル要素以外の要素を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属性が指定されるとインタラクティブコンテンツに該当。