答えは E です。

search要素は、検索やフィルタリング操作を行うためのフォーム部品とその関連コンテンツを内容として持つ要素です。よって、E は正しい説明となります。
また、search要素は HTML Living Standard で定義されていますので A は間違いとなります。
search要素はheader要素内で使用されることが多いとは思われますが、フローコンテンツが配置できる場所であればどこにでも配置できます。よって、B は間違いです。
search要素の内容としては、フローコンテンツが配置できます。form要素を必ず配置するという決まりは特にありませんので C も間違いとなります。仕様書には、form要素を使用せずにJavaScriptで実装する例も掲載されています。
仕様書の注意書きには、検索の結果をマークアップするためにsearch要素を使用することは適切ではないと明記されています。よって D も間違いとなります。

出題範囲の詳細

答えは B、D です。

hgroup要素の子要素は次のように配置する仕様となっています。
p要素を0個以上 ＋ h1～h6要素のうちの1つ ＋ p要素を0個以上

A.はh1～h6要素が入っていないだけでなく、テキストがそのまま配置されていますので文法エラーとなります。
B.は見出ししか配置されていませんが、p要素は0個でも問題ない仕様となっていますので正しいマークアップです。
C.にはp要素がなく、代わりにテキストが直接配置されていますので、これも文法エラーとなります。
D.はhgroup要素の一般的な正しいマークアップ方法です。
E.は見出しが複数配置されていますので、現在の仕様では文法エラーとなります（hgroup要素が新しく追加された当初は、見出しを複数配置できる仕様となっていました）。

出題範囲の詳細

答えは A、B、C、D です。

placeholder属性はinput要素とtextarea要素にのみ指定可能な属性で、テキスト入力欄が未入力の状態のときにのみ表示される「入力のための短いヒント」を指定する属性です。よって、AとCは正しい説明となります。

「入力のための短いヒント」とは、具体的に言えば値の例（名前の入力欄であれば「山田太郎」など）や入力フォーマットに関する簡潔な説明のことです。よって、Bも正しい説明となります。

HTML Living Standard の仕様書には、「placeholder属性をラベルの代わりとして使用すべきではない」と明記されています。しかし「スマートフォン用ページではラベルの代わりとして使うべきである」とは一切書かれていません。これはつまり、スマートフォン用ページであるかどうかにかかわらず、ラベルの代わりとしては使用すべきではないということです。したがって、Dは正しい説明、Eは間違った説明、ということになります。

出題範囲の詳細

答えは A、D、E です。

HTMLの仕様書にあるメディア要素とは、video要素とaudio要素のことを指しています。よってAの説明は正しいことになります。

video要素に指定可能な属性はaudio要素よりも多く定義されています。poster属性、playsinline属性、width属性、height属性はvideo要素には指定できますが、audio要素には指定できません。よってBは間違いです。

メディア要素が子要素としてsource要素を持つ場合、src属性は省略する必要があります。したがってCも間違いとなります。

video要素とaudio要素のsrc属性に指定可能なデータの種類に違いはありません（どちらもビデオファイルとオーディオファイルの両方を指定できます）。video要素とaudio要素の基本的な違いは、video要素には映像やキャプションのような視覚的なコンテンツを再生する領域があるのに対して、audio要素にはそれがないということだけです。つまり、audio要素でもビデオファイルの再生は可能ですが、音声は聞こえても映像は見られないということになります。とはいえ、video要素とaudio要素のsrc属性にはビデオファイルとオーディオファイルの両方が指定可能ですので、DとEは正しい説明となります。

出題範囲の詳細

答えは AとB です。

HTML Living Standard の仕様書において、br要素の正しい用途の例として掲載されているのが「詩」と「住所」の表記における改行です。よってAとBは正解となります。

仕様書にはまた「br要素はコンテンツの一部である改行としてのみ使用可能」とも書かれています。したがってCの余白を作るための改行や、Dの段落のように見せるための改行は正しい用途とは言えません（それらはコンテンツの一部ではなくコンテンツの外部であると考えられます）。

この問題でもっとも判断が難しいと思われるのがEです。しかし仕様書には「br要素は1つの段落内で項目を分けるために使用してはならない」とも書かれており、まさにこのEの使用方法が悪い例として掲載されています（次のサンプルは仕様書の例とは異なりますが趣旨は同じです）。

<p>
<label>名前：<input name="nm"></label>
<br>
<label>住所：<input name="ad"></label>
</p>

正しいマークアップは次のようになります。

<p>
<label>名前：<input name="nm"></label>
</p>
<p>
<label>住所：<input name="ad"></label>
</p>

出題範囲の詳細

答えは D です。

HTML Living Standard より前のHTMLでは、ツールバーをマークアップする際には主にul要素が使用されていました。HTML Living Standard では、ツールバーをマークアップするための専用要素としてmenu要素が用意されています。

menu要素はul要素やol要素と同じリストの一種で、ツールバーの各コマンドはli要素内に配置します。

マークアップの例：
<menu> <li><button onclick="sv()"><img src="save.svg" alt="保存"></button></li> <li><button onclick="sh()"><<img src="share.svg" alt="共有"></button></li> <li><button onclick="pr()"><img src="print.svg" alt="印刷"></button></li> </menu>

出題範囲の詳細

答えは A です。

HTML Living Standard の table要素には、グローバル属性以外の属性は指定できません。したがって、border属性を指定している選択肢B〜Eはすべて文法的に誤りとなります。

HTML 5.2 では、table要素をレイアウト用に使用しているのではないことを明示する目的でborder属性が指定できました。ただしその際は、border="" のように値を空にするか、border="1" と指定する必要がありました（1以外の数値は指定できない仕様になっていました）。したがって、出題範囲が「HTML5プロフェッショナル認定試験 レベル1 Ver2.0（現在はVer2.5）」の期間であれば、選択肢AのほかBとDも正解だったことになります。

出題範囲の詳細

答えは C です。

A.のsync属性は、HTML Living Standard では定義されていません。

B.のtitle属性はグローバル属性で、一般にパソコン環境ではその値がツールチップとして表示されます。あくまでも助言的なテキスト情報を指定するための属性であり、外部の字幕ファイルを指定することはできません。

C.のtrack要素は、動画や音声のデータに対する外部テキストトラック（字幕ファイルなど）を指定するための要素です。WebVTT形式のファイルはテキストファイルで、その内部に各字幕の表示開始時間と表示終了時間が書き込まれているため、動画に同期した状態で表示させることができます。

D.のsource要素は、形式の異なる動画・音声・画像のデータを複数指定する際に使用する要素で、字幕を指定することはできません。

E.のsubtitle要素は、HTML Living Standard では定義されていません。

出題範囲の詳細

答えは C です。

formaction属性は送信ボタンにのみ指定可能な属性で、form要素のaction属性に指定されているURLとは異なるURLにデータを送信するボタンを作成可能にするためのものです。したがって、この属性を指定できるのは「type="submit"」が指定されているボタン（input要素とbutton要素）か、「type="image"」が指定されているinput要素ということになります。

form要素で指定するURLはaction属性で指定しますので、form要素にはformaction属性は指定できません。したがってAは間違いです。

選択肢BとDの文章には「type属性の値にかかわらず」とありますので、これらも間違いとなります。

選択肢Cには『type属性の値が「image」のinput要素』とありますが、これは送信ボタンとして機能しますので正しい説明ということになります。

選択肢Eの『type属性の値が「button」のbutton要素』は送信ボタンではありませんので指定できません。よって、これは間違いです。

出題範囲の詳細

答えは D です。

Google Chrome のメーターは、メーターの示す範囲を「低」「中」「高」と3分割した上で、そのうちのどれが最適なのかを示すことで色分けして表示されるようになります。

meter要素によるメーターの示す範囲を「低」「中」「高」と3分割するには、low属性とhigh属性を使用します。low属性には「低」の上限となる数値を指定し、high属性には「高」の下限となる数値を指定することで、3つの範囲を示します。これに加えてoptimum属性で最適値を示しておくことで、「低」「中」「高」のどれが最適かが判断され、value属性の値（メーターの現在値）に応じた色で表示されるようになります。緑は良い状態、黄色は中間の状態、赤は良くない状態を示しています。

なお、この Google Chrome による色分けは、バージョンアップによって変更される可能性があります。

出題範囲の詳細

答えは A です。

A.のb要素は、その部分が重要であるなどの特別な意味を持たせることなく、実用的な目的で目立たせたい部分に対して使用する要素です。文中のキーワードや製品名といった部分に対して使用します。

B.のi要素は、文書内のテキストのうち、そこだけが異質であることを示すための要素です。たとえば、英語の文書中でドイツ語になっている部分などのほか、専門用語、学名といった部分をマークアップする際にも使用されます。

C.のs要素は、正しい内容ではなくなってしまった部分や関連性が失われてしまった部分に対して使用されます。

D.のu要素は、中国語のテキストにおいてその部分が固有名詞であることを示す場合や、単語の綴りが間違っていることを示す場合などに使用されます。

E.のem要素は、文章の中で強調したい部分に使用する要素です。同じ内容の文章であっても、この要素でどこをマークアップするかによって文章の意味は変化します。

出題範囲の詳細

答えは D です。

HTML 5.1 からは、source要素はpicture要素内でも使用可能となっています。picture要素内に配置した場合と、video要素またはaudio要素の内部に配置した場合とでは使用可能な属性が違っている点に注意してください。

まず、source要素はpicture要素内でも使用できます。したがって、選択肢Aは間違いです。

video要素またはaudio要素の内部で使用されているsource要素にはmedia属性は指定できませんが、picture要素内のsource要素にはmedia属性が指定できます。したがって、選択肢Bも間違いです。

type属性については、video要素またはaudio要素の内部であってもpicture要素の内部であっても指定できます。したがって、選択肢Cも間違いです。

source要素がpicture要素の内部で使用されている場合、srcset属性とsizes属性が指定できます。したがって、選択肢Dが正解となります。

source要素にはwidth属性もheight属性も指定できません。したがって、選択肢Eは間違いです。

出題範囲の詳細

答えは E です。

q要素は、コンテンツのカテゴリーとして「フローコンテンツ」と「フレージングコンテンツ」に属しています。したがってAとBは間違いではありません。

q要素にはcite属性を指定して引用元に関する情報のあるURLを示すことができます。したがってCは正しい説明です。

フレージングコンテンツの引用文であっても、必ずしもq要素でマークアップする必要はありません。引用符を文章の中に自分で書き込んで引用文をあらわすことも認められています。したがってDも正しい説明です。

引用文ではない部分に対し、引用符をつける目的でq要素を使用することは禁止されています。たとえば「いわゆる」「いわば」といった意味をあらわすために使用したり、皮肉を込めた表現の部分に使用したりすることはできません。

よって正解はEとなります。

出題範囲の詳細

答えは A、B、C、E です。

a要素のコンテンツモデルはトランスペアレントです。つまり、a要素はその親要素内に直接の子要素として配置できる要素であれば、div要素でもセクション関連要素でも内容として入れることができます。

ただし、a要素の中にはインタラクティブコンテンツ（interactive content）は入れられないという例外があります。したがって、もし上の問題文が「要素のカテゴリーとしてインタラクティブコンテンツに該当するものをすべて選びなさい」となっていても答えは同じになります。

選択肢の中でインタラクティブコンテンツに該当しないのはsection要素だけですので、section要素を除いた選択肢をすべて選ぶと正解になります。なお、tabindex属性を指定している要素はどの要素であってもインタラクティブコンテンツになるということも覚えておきましょう。

出題範囲の詳細

答えは E です。

hr要素は「horizontal rule」の頭文字から命名された要素で、もともとは横罫線（水平方向の線）を表示させるための要素でした。

しかしHTML5では表示を制御するための要素と属性は一掃されることとなり、それらの多くは仕様書から削除されましたが、一部は意味を変更して残されることとなりました。その中の一つがhr要素です。

HTML5のhr要素は、「段落レベルでの主題の変わり目（話題や場面が切り替わるところ）」をあらわす要素です。あえて「段落レベル」と書いてあるのは、hr要素はセクションの内部の段落間の区切りを示すもので、セクションの変わり目をあらわすものではないことを示すためです。セクションはセクション関連の要素によって区切りがわかりますので、セクションの変わり目を示す要素はありません。

出題範囲の詳細

答えは D、E です。

audio要素に指定可能な属性は、すべてvideo要素にも指定できます。video要素には指定可能でaudio要素には指定できない属性は次の3つだけです。

・width
・height
・poster

width属性とheight属性は、動画の幅と高さを指定する属性です。poster属性は、ブラウザが動画を再生できるようになるまでの間に表示させておく画像のURLを指定する属性です。

preload属性は、その名のとおり読み込むデータのプリロードに関する指示を与えるための属性で、「none」「metadata」「auto」のいずれかのキーワードが指定できます。

crossorigin属性は、読み込むデータを異なるオリジンから取得する際の認証モードを設定する属性で、「anonymous」または「use-credentials」のいずれかのキーワードが指定できます。

出題範囲の詳細

答えは C です。

HTML 4.01 や XHTML 1.0 では、tfoot要素は必ずtbody要素よりも前に配置する必要がありました。それが HTML5 の最初のバージョンではtbody要素の前にでも後にでも配置できる仕様に変更され、さらに HTML 5.1 以降ではtbody要素の後にしか配置できない仕様に変更されています。また、tfoot要素は複数は配置できない仕様となっている点にも注意してください。

出題範囲の詳細

答えは A です。

iframe要素のsrcdoc属性は、iframe要素で表示させるHTML文書のソースコードを値としてそのままダイレクトに指定する属性です。

HTML5のDOCTYPE宣言は、ブラウザのDOCTYPEスイッチを制御するためのものですので、srcdoc属性に指定するHTML文書では省略可能です。

html要素・head要素・body要素に関しては、srcdoc属性に指定するHTML文書であるかどうかに関係なく、開始タグ・終了タグとも省略は可能です（ただし省略できる条件がそれぞれにあります）。

title要素については、iframe要素のsrcdoc属性に指定するHTML文書の場合は必須ではありません（このことは、head要素のコンテンツモデルにおいて定義されています）。

出題範囲の詳細

答えは B、C、D、E です。

値を指定せずに属性名だけで指定するタイプの属性を「論理属性（boolean attribute）」と言います。

グローバル属性以外でvideo要素に指定可能な属性は次の10種類で、そのうち4つが論理属性に該当します。

• src
• crossorigin
• poster
• preload
• autoplay ※論理属性
• loop ※論理属性
• muted ※論理属性
• controls ※論理属性
• width
• height

autoplay属性は、ページのロード後に自動的に再生を開始させるための属性です。
loop属性を指定すると、動画が繰り返し再生されるようになります。
muted属性を指定すると、デフォルトで音を出さない（ミュートされた）状態にします。
controls属性を指定すると、コントローラー（再生・停止・ボリューム調整などを行うためのUI）を表示させます。

preload属性は動画や音声データのバッファリングに関する指示を行うための属性で、値には「none」「metadata」「auto」のうちのいずれかのキーワードを指定します。

出題範囲の詳細

答えは C です。

Aのem要素は「強調部分」をあらわす要素です。その部分を強調する必要がない場合には使用しません。
Bのq要素は、その部分がフレージングコンテンツ（インライン要素）の状態で引用してきた文章であることを示す要素です。
Cのi要素は、（特にアルファベットで記述された）テキストの内部において、その部分だけが異質であることを示すための要素です。専門用語や学名、外国語の慣用句といった部分をマークアップする際に使用されます。
Dのb要素は、実用的な目的においてその部分を目立たせたい場合に使用する要素です。文中のキーワードや製品名のような部分に対して使用します。
Eのu要素は用途が限定的な要素で、中国語のテキストにおいてその部分が固有名詞であることを示す場合や、単語の綴りが間違っていることを示す場合などに使用されます。

出題範囲の詳細

答えは C、E です。

HTMLでアプリケーションを制作しているとファイルのアップロードをしたくなります。ファイルのアップロードを実現するにはFile APIなどが必要ですが、入力画面はHTMLの要素だけで実装できます。
input要素でtype属性にfileを指定するとファイルを選択することができます。accept属性に MIMEタイプを指定することでファイルの種類を制限することができます。
例えば、下記のような記述では、画像ファイルのみを選択できるファイル選択機能を起動することができます。スマートフォンでアクセスすると既存の画像を使用するかカメラを起動するかを選択することができます。

<input type="file" accept="image/*" />

さらに例題のようにcapture属性を指定するとファイル選択機能の使用時にカメラが起動します。指定値がuserの場合スマートフォンの画面側のカメラが有効になり、environmentを指定すると画面と反対側のカメラが有効になります。
スマートフォンのOSやブラウザによって動作が異なり、Bのcamera、Dのsystemを指定した場合でもCのenvironmentと同じ動作をするかもしれませんが、有効な値はCのenvironmentとEのuserの2つになります。

出題範囲の詳細

答えは E です。

正規表現(Regular Expression)は文字列の検索などの条件式で使用され、プログラミング言語やエディタなどのアプリケーションに実装されています。HTML5では入力制限を設定するために使用することができます。

Aは、演算子 OR(|)で区切った文字が有効となるので、Aまたは、BまたはCがマッチし、Aを受け付けます。
Bは、[ ] 内の1文字が有効となるので、これもAまたは、BまたはCがマッチし、Aを受け付けます。
Cも、[ ] 内の1文字が有効で、A~Cを意味するので、これもAまたは、BまたはCがマッチし、Aを受け付けます。
Dは、[ ] 内の1文字で始まる文字が有効なので、これもAまたは、BまたはCがマッチし、Aを受け付けます。
Eは、[ ] 内の1文字で始まらない文字が有効なので、A、B、C以外の文字がマッチし、Aを受け付けません。なのでこれが正解となります。

正規表現で使用できる文字には他にもあり、+, *, ., ? は特殊な意味を持つのでいろいろ試してみましょう。
正規表現で最も良く知られる *（アスタリスク）はワイルドカードとも呼ばれます。カードゲームから来ている用語ではありますが、カードの場合は1枚のジョーカーが何にでも置き換えの効く万能の1枚だと思うので、HTML5では * ではなく .(ドット）がマッチする文字かなと思います。

プログラミング言語やアプリケーションにより方言がありますが、共通する部分も多くあるので覚えておくと様々な局面で役に立つと思います。

出題範囲の詳細

答えは D です。

a要素でhref属性のみを指定してハイパーリンクを作成できます。その場合ハイパーリンクをクリックするとページ内容はリンク先の内容に書き換わります。
form入力ページなどで、入力中のページはそのままに参照情報ページなどを別画面（タブまたはウィンドウ)に表示させたいケースがあります。
そのようなときにtarget属性を指定して表示先をコントロールすることができます。
target の指定には、_top, _parent, _self, _blank, 任意の名前 が指定でき、任意の名前はブラウザの ウィンドウ(タブ) やフレーム名になります。

一般的には現在表示しているページをそのままに、ハイパーリンクを別タブに表示させるには target属性に _blank を指定します。
しかし、_blank を指定した場合、リンクをクリックするたびに新規タブが生成され、気がついたときには同じページがいっぱいできていて、せっせと閉じざるを得なくなっています。
そうならないように、重複が起きないような名前を指定するのが好ましいと思います。

さて、例題の選択肢ですが、A~Eどれも「自分の」の意味ですが、targetのデフォルトで自分自身として動作するのは、Dの_selfのみなのでこれが正解です。
では、_my や _me を指定した場合の挙動はどうかというと、予約語にはなっていないので 1回目のクリックでは、_blankと同じように、新規タブが生成され、そこに表示されます。しかし、2回目のクリックでは、1回目に生成した_my または _me のタブが閉じられていなければ、そこに再表示され、任意の名前と同等の挙動となります。

出題範囲の詳細

答えは D です。

textarea要素はコメント欄など自由記入の欄として使用される複数行のテキスト入力欄を作成する際に使用します。 選択肢はそれぞれ下記のとおりです。
A. none - リサイズを許可しない。
B. horizontal - 水平方向のみリサイズを許可する。
C. vertical - 垂直方向のみリサイズを許可する。
E. both - 水平・垂直方向ともリサイズを許可する。（デフォルト）
その他に親要素の値を継承する inherit も有効な値として指定できます。
なお、Dの either を指定してしまった場合、無効な値であるためデフォルトと同じ動きとなります。
その他、textarea要素では maxlength により最大文字数の設定も可能です。
maxlength=10 で１０文字に制限できますが、改行コードも１文字としてカウントされるので注意が必要です。
改行ルールを設定する wrap 属性もありますので、合わせて確認しておきましょう。
一方、CSSではサイズを超える入力時の表示について指定する overflow プロパティがあり、スクロールバーの表示等を制御できます。
用途や使用箇所に応じて適切な指定にしましょう。

出題範囲の詳細

答えは D です。

HTMLには、対で使用してはじめて機能する要素があります。
A. caption 要素は table 要素の子要素として機能します。
B. summary 要素は details 要素の子要素として機能します。
fieldset はフォームの入力項目をグループ化する際に使用し、項目を枠で囲みます。
legend 要素を指定すると枠の一部が指定した文字列で表示されます。
従って D が正解です。
legend は辞書で調べると最初に「伝説」と出てきますが、ここでは「凡例」や「説明」 の意味となります。
C. series は、legend と同様、グラフの凡例の意味で使用される英単語で不正解です。
E. folklore は、伝説、民話といった意味の英単語で不正解です。

以下に table/caption, fieldset/legend, details/summary を使用した例を記載します。
label要素はラベルをクリックすると対応する入力ボックスにフォーカスが当たります。 下記のラジオボタンでは、指先で押しやすいサイズにするメリットもあります。 label と inputの対応付けもマスターしましょう。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form action="a.cgi" method="post">
<table width=300px>
<caption>登録画面</caption>
<tr>
<td>
<fieldset>
<legend>連絡先</legend>
<table width=100%>
<tr>
<td><label for=name>名前:</label></td>
<td><input type=text id=name placeholder="例）資格月斗" required></td>
</tr>
<tr>
<td><label for=tel>電話:</label></td>
<td><input type=tel id=tel pattern="^[0-9]+$" placeholder="例）
08099999999" required></td>
</tr>
<tr>
<td colspan=2>
<details><summary>オプション</summary>
<table width=100%>
<tr>
<td>性別:</td>
<td>
<input type=radio name=gender id=male  ><label for=male>男</label>
<input type=radio name=gender id=female><label for=female>女</label>
<input type=radio name=gender id=custom><label for=custom>その他</label>
</td>
</tr>
</table>
</details>
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td colspan=2 align=right><input type=submit value="登録"></td>
</tr>
</table>
</body>
</html>
				

出題範囲の詳細

答えは E です。

video要素に track要素を指定することで、動画に字幕を表示することができます。
video要素に controls属性を指定すると、再生、休止、ミュート、音量調節、シーク（進捗バーを掴んで移動）が可能な操作画面が利用できます。追加の属性指定により、自動再生(autoplay)、リピート(loop)、ポスター表示(poster)が可能です。
video要素の制御に対してJavaScriptが必要になるのは、スロー再生などの再生速度の変更ぐらいかもしれません。

video要素にtrack要素を追加することで字幕の利用が可能になります。
字幕の詳細は WebVTT(The Web Video Text Tracks Format)ファイルまたは TTML(Timed Text Markup Language) ファイルで 提供でき、表示の開始/終了時間は HH:MM:SS.mmm のミリ秒単位で指定し、オプションにより表示位置なども指定できます。

例題の選択肢の解釈は次のとおりです。

A: video 要素に autoplay属性の指定がないので再生は自動的に開始せず、poster属性で指定した画像が表示されるので、間違いです。

B: デフォルトでは字幕は「オフ」なので、間違いです。字幕を表示させるには操作画面でlabelで指定された字幕を選択します。また予め日本語を選択しておくには、下記のようにdefault を追加します。
<track kind="captions" src="ja.vtt" label="日本語" default>

C: 字幕の表示は日本語か英語のどちらか一方になるので、間違いです。
kind属性のsubtitlesは翻訳の字幕などに、captionsは状況説明などに使用します。デフォルトは subtitlesです。

D: video要素でmuted属性が指定されているのでミュート（消音）状態でページは開きますが、操作画面でミュート解除や音量制御もできるので、間違いです。

E: video要素に preload属性が指定可能です。大きな動画では負荷軽減のために none(preloadしない）を指定可能ですが、デフォルトはautoで自動的にロードを行うので、正解です。

下記に日本語と英語の字幕ファイルのサンプル(ja.vttとen.vtt)を紹介します。 動画もポスター画像もスマホで簡単に揃えられますので、ぜひ試してみましょう。
なお、上記サンプルのHTMLファイルはローカルに置いて file:// で簡単に再生できますが、 Chrome で再生する場合 Webサーバー経由(http(s)://)でのみ字幕を表示することができます。

---- ja.vtt ----
WEBVTT - 歌詞

第1小節
00:00:00.200 --> 00:00:01.000 line:90%
ヘルプ! 誰か!

第2小節
00:00:01.000 --> 00:00:03.000 line:90%
ヘルプ! 誰でもいいってわけじゃないけど...

---- en.vtt ----
WEBVTT - Lyrics

1st bar
00:00:00.200 --> 00:00:01.000 line:90%
Help, I need somebody,

2nd bar
00:00:01.000 --> 00:00:03.000 line:90%
Help, Not just anybody,

出題範囲の詳細

答えは E です。

スマホの文字入力は、画面の一部に表示されるソフトウェアキーボードを使用します。小さな画面スペースに指で押せるサイズを確保するため、キーの数が制限されます。そのため入力する文字列によってはキーボードの切り替えが頻発する場合があります。
input 要素には多くのtype 属性が追加され、適切な値を指定することで適したキーボードを表示する事ができ、キーボード切り替えの負担を軽減できます。

以下は主な type 属性の値と説明です。
text: デフォルト値です。アルファベット主体のキー配列が表示されます。
email: アルファベットの他に @ と . キーが表示されます。
url: アルファベットの他に / と . のキーが表示されます。iOSでは、さらに、.jp のキーが表示されます。
date: 年、月、日のドラムロールが表示されます。PCでは、カレンダーも利用できます。日付の入力は、予約など今日の前後数ヶ月を入力する場合と、生年月日のような何十年も前(^^;)の日付を入力する場合があるので、使い分ける検討も必要です。
time: 時、分のドラムロールが表示されます。
tel: 数字といくつかの記号のみのキーが表示されます。
number: 数字を主体とするキー配列が表示されます。

その他の選択肢については以下のとおりです。
A.のautocomplete属性は、入力を自動化する機能です。スマホ以外にも有効です。
B.のkbd属性はありませんが、kbd要素は存在し、キーボードで入力するテキストを指す場合に使用します。QWERTYは通常のキーボード配列で、最上段の左から6文字の並びから命名されています。10キーは0~9の10個の数字キーでしたが、文字入力も可能になり日本語テンキーとも呼ばれます。
C.のpicker属性はありません。
D.のpattern属性は入力制限を正規表現で指定する機能です。

type属性はブラウザにより実装やバリデーションが異なります。pattern属性を併用したり、動作の確認をしてから使用することをお勧めします。

参考コード：type属性を指定した例

　<html>
　<head>
　　<meta charset="UTF-8">
　</head>
<title>登録</title>
<body>
　<h1>登録</h1>
<form action=reg.pl method=post>
　<table>
　　<tr>
　　　<td> 氏名: 
　　　<td><input type="text" name="name" placeholder="資格月斗">
　　<tr>
　　　<td> メール: 
　　　<td><input type="email" name="email" placeholder="shikaku@example.org">
　　<tr>
　　　<td> 電話番号: 
　　　<td><input type="tel" name="tel"   placeholder="09012345678">
　　<tr>
　　　<td> 生年月日: 
　　　<td><input type="date" name="birth" placeholder="1999/12/31">
　　<tr>
　　　<td> URL: 
　　　<td><input type="url" name="url"   placeholder="http://example.org">
　　<tr>
　　　<td> 時刻: 
　　　<td><input type="time" name="time" placeholder="09:00">
　　<tr>
　　　<td> 検索: 
　　　<td><input type="search" name="search" placeholder="HTML5 認定">
　　<tr>
　　　<td> 数字: 
　　　<td><input type="number" name="number"   placeholder="123456789">
　</table>
<input type="submit" name="register">
</form>
</body>
</html>			    
			    

出題範囲の詳細

答えは Cです。

HTML標準では、del要素で削除箇所をins要素で追記箇所がわかるように記述することができます。
多くのブラウザでは、削除箇所は取り消し線付きで表示し、追記箇所は下線付きで表示されます。
したがって、正解はCです。

del要素、ins要素ともにdatetime属性で修正日時を、cite属性で引用元のURLを記述することができます。

なお、A、B、Cの要素はありません。

出題範囲の詳細

答えは Bです。

object要素は、data属性でファイルを指定し、type属性でMIMEタイプを指定することで文書内に外部リソースを埋め込んで表示することができます。したがって正解は B です。

A.のhref属性は、a要素、area要素、link要素でのリンク先の指定や、base要素での基準となるURLを指定することに使用します。
C.のembedは要素で、src属性を指定して画像などの埋め込みに使用しますが、object要素の属性ではありません。
D.のsrc属性は、embed要素やimg要素で参照先を指定するときなどに使用しますが、object要素の属性としては使用できません。

出題範囲の詳細

答えは B、D です。

details要素は、<details>タグで囲われた部分を非表示にし、必要に応じて利用者がクリックすることで参照できるようにできます。summary要素は、details要素の子要素で、省略時に表示される「詳細」（ブラウザにより異なる）を別の文字列に置き換える。

出題範囲の詳細

答えは B、D です。

HTMLの要素のうち、セクションに分類される要素（Sectioning content）は、「section」「article」「aside」「nav」の4種類のみです。
HTML5プロフェッショナル認定試験を受験するのであれば、この4種類の要素については、しっかりと確実に覚えておく必要があります。headerとfooterは、それらを含むもっとも近いセクション（またはセクショニング・ルート）のヘッダーとフッターとなります。
mainは（セクションではなく）文書全体におけるメインコンテンツの範囲を示す要素です。header・footer・mainは、要素のカテゴリーとしては Flow content に含まれます。

出題範囲の詳細

答えは A です。

A：コンテナフォーマットがmp4の場合に設定します。mp4コンテナフォーマットには動画圧縮規格h.264が使われていますので、Aが正解です。

B：コンテナフォーマットがogg/ogvの場合に設定します。ogg/ogvコンテナフォーマットにはTheoraという動画圧縮規格が使われています。
C：sourceタグのtype属性に設定できるものに、「video/h264」は存在しません。
D：コンテナフォーマットがwebmの場合に設定します。webmはVP8という動画圧縮規格が使われています。
E：sourceタグのtype属性に設定できるものに、「video/264」は存在しません。

出題範囲の詳細

答えは C です。

role属性のroleは「役割」という意味で、既存の要素が持っている「役割・意味」とは異なる「役割・意味」を上書きして与えることのできる属性です。たとえば、既存のHTMLの要素にはユーザーインターフェイスとしての「タブ」や「ツリーウィジェット」をあらわす要素はありませんが、role属性を使用することでli要素やdiv要素などをタブ要素やツリーウィジェット要素に変更することができます（それによってスクリーンリーダーなどの支援技術がタブやツリーウィジェットを正しく認識できるようになります）。role属性の詳細な仕様は、HTML5とは別のWAI-ARIA 1.0という仕様書で定義されています。

Aはカスタムデータ（data-*属性）属性の説明です。BとDのような属性はHTML5にはありません。Eは、role属性と同じくWAI-ARIA 1.0の仕様書で定義されているaria-*属性の説明です。

出題範囲の詳細

答えは C、 E です。

mark要素は、一般的なブラウザでは蛍光ペンでマークしたような表示となります。このことからもわかるように、オリジナルでは通常のテキストである部分を、そのWebページの読者に注目してもらうためにハイライト表示させるのがmark要素の役割です。

Aの製品名やキーワードについては、HTML5ではb要素を使用します。Bの「中国語の固有名詞」とDの「スペルが間違っている単語」については、HTML5ではu要素を使用することになっています。

テキスト関連の要素とその代表的な用途はしっかりと覚えておきましょう。

出題範囲の詳細

答えは B です。

time要素は、datetime属性が指定されている場合は、その値を仕様書で定められている機械読み取り可能な書式にする必要があります。datetime属性が指定されていない場合は、time要素の要素内容のテキストを機械読み取り可能な書式にする必要があります。

Bにはdatetime属性が指定されていないため、要素内容を機械読み取り可能な書式にする必要があります。しかし、「2時50分」というテキストは仕様書で定義されている機械読み取り可能な書式には含まれていません。よって、答えはBです。

C、D、Eについては、要素内容は機械読み取り可能な書式ではありませんが、datetime属性の値が正しい書式で書かれているため問題ありません。

出題範囲の詳細

答えは B です。

フォーム関連要素にform属性を指定し、その値にform要素のid属性の値を指定することで、フォーム関連要素の配置場所にかかわらず特定のform要素と関連づけることができます。form属性が指定できるのは、input要素、textarea要素、select要素、button要素、output要素、keygen要素、label要素、fieldset要素、object要素です。
ただし、form属性を実際に使用する際は、ブラウザの対応状況に注意する必要があります。

出題範囲の詳細

答え B

HTMLの要素のうち、セクションを示す要素（カテゴリーが「Sectioning content」に該当する要素）は、nav・aside・article・sectionの4種類のみです。main はセクションとはならず、文書のアウトラインにも影響を与えない要素です。

出題範囲の詳細

答え A、B

動画ファイルの埋め込みは、video要素単独で記述する書式と、video要素とsource要素を組み合わせて記述する書式があります。
source要素を使う場合には、video要素の子として複数の動画ファイルを再生候補として指定できます。その場合、Webブラウザは上から順に利用可能なファイルをチェックします。
なお、他の選択肢は存在しない架空のものです。

出題範囲の詳細

答えB

meta要素のcharset属性は、本文だけではなくタイトルのエンコードに関する種類を指定できます。
この記述はコードの<head>内に記述する必要があります。
またタイトルに対しても指定する場合は、<title>より前に指定しなければなりません。

問題の選択肢では、<head>内にあり<title>より前に位置しているのは（B）のみです。
よって正解はBとなります。

出題範囲の詳細

答え D

HTMLには、コンピュータコードを表示するための要素があります。
コンピュータコードとは、XML要素名・ファイル名・プログラムのソースコードなどが含まれます。

プログラムのコードなどを表示する場合はcode要素を使って記述するのが適切です。
多くの主要なブラウザの場合、code要素を使って表示すると等幅フォントで表示されます。

ソースコードを表示する時にcode要素と合わせてpre要素がよく利用されますが、pre要素はフォーマット済みのテキストブロックを示すもの、つまり字下げや改行コードをそのまま表示するための要素であり、コンピュータコードを表すためのものではありません。
よって、A,B,Cは間違いです。

コンピュータコードの変数を示す要素はvar要素、コンピュータからの出力を示す要素はsamp要素、コンピュータからの入力を示す要素はkbd要素なので正解はDです。

出題範囲の詳細

答え E

source要素は、video要素やaudio要素の子要素として、メディアファイルの種類やURLを指定するために使われます。よって正解はEです。
Dにある画像のURLに関してですが、ファイルがどこに存在するかに関わらずimg要素のsrc属性で指定します。
Aはcode要素、Bはq要素およびblockquote要素、Cはscript要素に関する説明です。

出題範囲の詳細

答え C

Aのmark要素は、ハイライト表示を行うために使う要素でテキストの重要性を指定するものではありません。Bのs要素は、正確でなくなった情報について指定し、一般的なブラウザでは打ち消し線が引かれますので不正解です。Cのstrong要素は、重要な部分を指定するために定義されているものなので正解です。Dのb要素で囲まれたテキストは、一般的なブラウザでは太字表示されます。しかし、これはHTML5においては文体を変えるために使うものであって、重要性を指定するためのものではないと明示されています。よって不正解です。Eのi要素は、一般的なブラウザでは斜体表示されるものですが、重要性を指定するためものではありません。HTML5でマークアップする際は、似たような表示を行う要素でも、それぞれ使用する場面の想定が違う場合があるので気をつけましょう。

出題範囲の詳細