「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験対策の備忘録。
今回は、試験範囲でもある「その他要素」のまとめ。
ちなみに、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サイト制作の仕事に携わってきた私ですが、今回受験してみた率直な感想は... 「[…]
figure要素
「figure」とは、「図・図表・挿絵」などの意味。figure要素は、それがメインコンテンツの本文から参照される図版のようなコンテンツであることを示す要素。
具体的な要素内容としては、図表・写真・イラスト・ソースコードの一部のような、それ自身がまとまったひとつの完結した内容となっているフローコンテンツを入れる。
figure要素の図版にキャプションをつけるには、figcaption要素を使用する。
figcaption要素
figcaption要素は、figure要素で示す図版のキャプションや説明文部分をマークアップするための専用要素。
figcaption要素は、HTML5.0ではfigure要素の一番前または一番後ろのいずれかにしか配置できなかったが、HTML5.1からはfigure要素内であればどこにでも配置できるように変更されている。
details要素
details要素は、詳細情報を表示させる領域の開く・閉じる（折りたたみと展開）を切り替えられるディスクロージャーウィジットになる要素。
要素内容の先頭にsummary要素を入れておくと、開く・閉じるの状態にかかわらず常に表示される見出しとなる。
details要素にopen属性を指定すると最初から開かれている状態で表示される。ユーザーが開く・閉じるを切り替えると、ブラウザが自動的にこの属性の追加と削除を行う。
| 属性名 | 値 |
| open | 論理属性（属性名だけで指定可） |
<details> <summary>見出し</summary> <p>詳細情報</p> <p>詳細情報</p> <p>詳細情報</p> <p>詳細情報</p> </details>
summary要素
summary要素は、ディスクロージャーウィジットにおいて、開く・閉じるの状態にかかわらず常に表示されている見出し（内容を短く言い表したもの／キャプション）となる要素。
要素内容にはフレージングコンテンツまたはh1～h6要素のうちの１つを入れることができる。
figure要素内のfigcaption要素は要素内のどこにでも配置できるが、summary要素はdetails要素内の先頭にしか配置できない。
menu要素
menu要素は、その内容がコンテキストメニューとなって表示される要素。コンテキストメニューを表示させたい要素にグローバル属性のcontextmenu属性を指定して、その値にmenu要素のid属性の値を指定すると、右クリックでコンテキストメニューが表示されるようになる。
メニュー内の各メニュー項目はmenuitem要素で指定する。階層メニューにするためには、menu要素を入れ子にする。入れ子にした際の項目名（ラベル）はlabel属性で指定する。メニュー項目を区切るにはhr要素を使用する。
| 属性名 | 値 |
| type | メニューの種類 type=”context” |
| label | 階層メニューの項目名 値には、テキスト |
HTML5.1の完成前の仕様では、menu要素のtype属性には「context」と「toolbar」という２つのキーワードが指定できるようになっていた。しかし最終的には「context」しか指定できないことになったため、結果としてHTML5.1のmenu要素＝コンテキストメニューとなっている。
menuitem要素
menuitem要素は、menu要素で作成するコンテキストメニュー内のメニュー項目となる空要素。
type属性には３種類のキーワードが指定できる。
「command」…命令を実行させる。
「checkbox」…チェック可能な項目。
「radio」…複数の中から１つだけ選択できる項目。
| 属性名 | 値 |
| type | メニュー項目の種類 type=”command” type=”checkbox” type=”radio” |
| label | メニュー項目として表示させるテキスト 値には、テキスト |
| default | メニューが使用されなかった場合に、デフォルトで選択された状態にする項目にする 論理属性（属性名だけで指定可） |
| icon | メニュー項目に表示させるアイコン 値は、URL |
| radiogroup | type=”radio”にして連動して動作させる項目に付ける共通の名前 値は、テキスト |
| checked | メニュー項目を選択済みの状態にする 論理属性（属性名だけで指定可） |
| disabled | メニュー項目を無効にする 論理属性（属性名だけで指定可） |
iframe要素
iframe要素は、HTML文書の中で別の文書を表示させる領域（ブラウジングコンテキスト）となる要素。
「iframe」は、「inline frame（インライン・フレーム）」の略。
| 属性名 | 値 |
| src | 表示させる文書のアドレス 値：URL（空文字は不可） |
| srcdoc | インラインフレーム内に表示させるHTML文書データ 値：HTML文書のソースコード全体src属性とsrcdoc属性の両方を同時に指定することも可能。その場合、srcdoc属性の方が優先され、srcdoc属性に未対応のブラウザなどではsrc属性の文書が使用される。 |
| name | ブラウジングコンテキスト（フレーム）の名前 値：ブラウジングコンテキスト名またはキーワード |
| allowfullscreen | フルスクリーン表示を許可 論理属性（属性名だけで指定可） |
| sandbox | この属性を指定したことによるセキュリティ上の制限のうち、解除する項目をキーワードで指定。 値：キーワード（空白文字区切り） allow-forms（フォームからのデータ送信を許可します。） allow-pointer-lock（ポインタ・ロック API の実行を許可します。） allow-popups（ポップアップ・ウィンドウの表示を許可します。） allow-same-origin（親のドキュメントと 同一生成元 (same origin) と見なし，親ドキュメントで利用できる機能は利用可能にします。） allow-scripts（スクリプト（ポップアップを除く）の実行を許可します。） allow-top-navigation（最上位のブラウジング・コンテキストへのナビゲーションを許可します。）allow-scripts と allow-same-origin の２つの値を指定すると，sandbox属性 は 無効 となり， この属性の指定がない場合と同様の動作 となる。この sandbox属性 による指定は，コンテンツがロードされて表示される際に効力を持つ。従って、この sandbox属性 の値を変更したり，または，属性全体を削除しても，すでに表示されているページの表示内容には，何の変化もありません。 |
| width | 幅 値：整数（負の値は指定不可）HTML4.01やXHTML1.0では、width属性とheight属性の値に「ピクセル数」と「%」の両方が指定できたが、HTML5では「ピクセル数」しか指定できなくなっている。 |
| height | 高さ 値：整数（負の値は指定不可） |
hr要素
hr要素は、段落レベルで主題が変わるところ（区切り・変わり目）を示すための要素。たとえば、話題が変わるところや、物語の中で場面が変わるところなどで使用する。
以前は、横罫線を表示させるための要素だった。現在でも一般的なブラウザでは横罫線として表示されるが、HTML5ではどう表示させるかが規定されているわけではなく、特に線として表示させる仕様になっているわけではない点に注意。
セクションは、それ自体が主題の区切りを示すため、セクションとセクションの間にhr要素を入れる必要はない。hr要素は、セクションの内部の「段落レベル」での区切りを示すために使用する。
script要素
script要素は、HTML文書内にスクリプトまたはデータブロックを組み込むための要素。スクリプトは要素内容として書き込むこともできるし、外部スクリプトをsrc属性で読み込ませることもできる。ただし、データブロックの場合は要素内容として書き込むことしかできない。
| 属性名 | 値 |
| src | 外部スクリプトのアドレス 値は、URL(空文字は不可) |
| type | スクリプトまたはデータブロックの種類 値は、MIMEタイプ |
| charset | 外部スクリプトの文字コード 値は、文字コード（エンコーディング） |
| async | スクリプトを非同期で読み込ませ、読み込み完了後すぐに実行させる 値は、論理属性（属性名だけで指定可） |
| defer | スクリプトを非同期で読み込ませ、ページ全体の解析処理が完了してから実行させる 値は、論理属性（属性名だけで指定可） |
| crossorigin | 元文書とは異なるオリジンからデータを取得する際の認証に関する設定 crossorigin=”anonymous” または crossorigin=”use-credentials” |
| nonce | CSPのノンス 値は、テキスト（ノンス） |
type属性を省略した場合のデフォルト値は「text/javascript」。それ以外のものを組み込む場合は、type属性は必須。
CSPとは「Content Security Policy Level3」というセキュリティ対策の仕様。nonce属性の値にノンスと呼ばれるテキスト（サーバが送信するランダムな使い捨ての値）を埋め込むことで、悪意あるスクリプトを識別して実行させないようにする。
script要素にsrc属性が指定されている場合は、要素内容は空にするか、またはそのスクリプトの文法に合わせたドキュメンテーションしか入れられない。src属性が指定されていない場合の要素内容は、type属性の値によって異なる。
noscript要素
noscript要素は、スクリプトが無効の場合に利用されるコンテンツを要素内容として持つ要素。したがって、スクリプトが有効の状態では、この要素は利用されない。
noscript要素がhead要素内に配置された場合は、要素内容としてlink要素・style要素・meta要素を入れることができる。それ以外の場所に配置された場合はトランスペアレントになる。
noscript要素はHTML構文でのみ有効で、XHTML構文では使用できない。
template要素
template要素は、その範囲がスクリプトによって生成（複製・挿入）される部分であることを示す要素。
一般的なフローコンテンツとメタデータコンテンツを自動生成できるほか、次に示す要素の要素内容となる範囲全体をタグで囲って自動生成させることができる。
table / tr / thead / tbody / tfoot / colgroup
ul / ol / dl
ruby
video / audio / object
figure / details / menu
select / fieldset
canvas要素
canvas要素は、スクリプトによって描画するビットマップの動的なグラフィックとなる要素。要素内容は、描画できない環境向けの内容となる。コンテンツモデルはトランスペアレント。
| 属性名 | 値 |
| width | 幅 値は、整数値（負の値は指定不可） デフォルトは300 |
| height | 高さ 値は、整数値（負の値は指定不可） デフォルトは150 |