HTML5プロフェッショナル認定試験レベル1 例題解説

例題解説とその内容については、例題提供者の監修です。内容や試験問題に関わるお問い合わせにつきましては、LPI-Japan事務局ではお応えできませんのでご了承ください。
例題解説のご提供者さまを募集中です。LPI-Japan事務局までぜひご投稿ください。選ばれた方の例題解説は本サイトに掲載させていただきます。
※修正等により、例題番号が連番ではない場合がございます。あらかじめご了承ください。

1.3 要素

例題3.51 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
HTMLにおけるルビの指定方法のうち、文法的に正しいものをすべて選びなさい。
  • <ruby>漢字<rt>かんじ</ruby>
  • <ruby>漢字<rt>かんじ</rt></ruby>
  • <ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
  • <ruby>漢字<rp>(<rt>かんじ<rp>)</ruby>
  • <ruby>漢字<rp>(</rp><rt>かんじ<rp>)</rp></ruby>

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2024年12月18日

答えはこちら

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

ルビのもっとも基本的な指定方法は、ruby要素の最初のコンテンツとして漢字のテキストを入れ、その直後にrt要素の内容としてふりがなを配置する、というものです。rt要素の「rt」は「ruby text」の略です。

rt要素の終了タグは、rt要素の直後にrt要素またはrp要素がある場合、もしくはそのrt要素がruby要素の最後の子要素である場合に省略可能です。よって、A と B は文法的に正しいマークアップです。

ruby要素内の漢字のテキストとrt要素のペアは、繰り返しいくつでも配置できる仕様となっています。そのため、C も文法的に正しいマークアップとなります。

rp要素は、ルビをサポートしていない(ふりがなを普通のテキストとして表示してしまう)ブラウザのために用意された要素です。一般的な使い方としては、rt要素の直前に開きカッコ、直後に閉じカッコをrp要素の要素内容として入れて配置します。これによってルビに未対応の環境で「漢字かんじ」ではなく、「漢字(かんじ)」のように表示させることが可能になります。rp要素の「p」は「parentheses(カッコ)」を意味しており、ルビをサポートしている環境ではその要素内容は表示されません。

rp要素の終了タグは、rp要素の直後にrt要素またはrp要素がある場合、もしくはそのrp要素がruby要素の最後の子要素である場合に省略可能です。よって、D と E も文法的に正しいマークアップとなります。

出題範囲の詳細

例題3.50 「1.3.3 インタラクティブ要素」
レベル1の出題範囲「1.3.3 インタラクティブ要素」からの出題です。
input要素のaccept属性に関する説明として正しいものをすべて選びなさい。
  • type属性の値にかかわらず常に指定できる。
  • 値はカンマ区切りで複数指定できる。
  • 値にはMIMEタイプが指定できる。
  • 値にはピリオドで始まる拡張子が指定できる。
  • 値として文字列「image/*」が指定できる。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2024年10月16日

答えはこちら

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

input要素のaccept属性は、フォームでファイルを送信する際の「受信する側で受付可能なファイルの種類」を指定するための属性です。したがって、input要素のtype属性の値が「file」のときにしか指定できません。よって、A は正しい説明ではありません。

accept属性には複数の値が指定でき、それらはカンマで区切って指定します。よって B は正しい説明となります。

accept属性の値には、MIMEタイプも拡張子も指定可能です。拡張子を指定する際は、先頭にピリオドをつけて指定します。よって C と D も正しい説明となります。

accept属性の値には、通常のMIMEタイプのほかに「image/*」「video/*」「audio/*」という値も指定可能です。それぞれ「画像ファイル」「動画ファイル」「音声ファイル」であれば形式を問わず受信可能という意味になります。したがって、E も正しい説明となります。

出題範囲の詳細

例題3.49 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
HTMLのグローバル属性に該当するものをすべて選びなさい。
  • nonce
  • popover
  • autofocus
  • inputmode
  • itemscope

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2024年9月19日

答えはこちら

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

現在の HTML Living Standard のグローバル属性は、HTML 5.2のときと比較すると10種類以上増えています。その中には、まったく新しい属性もあれば、従来から特定の要素に対しては指定できていたものも含まれます。

nonce属性は、「Content Security Policy」というセキュリティ対策のための仕組みを利用する際に使用される属性です。「nonce」と言う用語は「Number used ONCE(一度だけ使用される数」を意味しています。暗号化した「nonce」を使用することにより、フェッチの実行を許可するかどうかを判定できるようにします。

popover属性は、非表示にしてあるコンテンツを、button要素またはinput要素の操作によってどのコンテンツよりも上に表示させるための属性です。これを使用することで、JavaScriptを使用することなくモーダルウィンドウのようなものを表示させることができます。

autofocus属性は、もともとフォーム関連の要素に対して指定可能な属性でしたが、現在はグローバル属性になっています。この属性が指定された要素は、ページが読み込まれると自動的にフォーカスされた状態になります。これによってユーザーは、手動でフォーカスを与える必要がなくなり、すぐに入力を開始できるようになります。

inputmode属性は、HTML 5.1 で登場しましたが、HTML 5.2 で一旦削除された属性です。値には「tel」「url」「email」のようなキーワードが指定でき、これによってその項目の入力に適した仮想キーボードを表示させることなどができます。

itemscope属性は、マイクロデータをマークアップするための属性のひとつです。ほかにitemtype属性、itemprop属性、itemid属性、itemref属性の4つがグローバル属性として定義されています。

出題範囲の詳細

例題3.48 「1.3.2 メディア要素」
レベル1の出題範囲「1.3.2 メディア要素」からの出題です。
video要素の指定方法のうち、文法的に正しいものをすべて選びなさい。
  • <video controls></video>
  • <video controls><source src="a.mp4"></video>
  • <video src="a.mp4" controls></video>
  • <video src="a.mp4" controls><source src="b.mp4"></video>
  • <video src="a.mp4" controls><source src="b.mp4"><source src="c.mp4">

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2024年8月8日

答えはこちら

答えは A、B、C です。

video要素にsrc属性を指定していない場合は、要素内容として0個以上のsource要素を含めることができます。A は0個のsource要素、B は1個のsource要素を含めていますが、これらは文法的に正しい指定方法です。

video要素にsrc属性を指定している場合は、要素内容としてsource要素を含めることはできません。そのため、C は正しい指定方法ですが、D と E は文法エラーとなります。

なお、このsrc属性とsource要素の関係は、audio要素でも同様です。

出題範囲の詳細

例題3.47 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
HTMLのaddress要素に関する説明として正しいものをすべて選びなさい。
  • 住所をマークアップするための要素である。
  • 問い合わせ先をマークアップするための要素である。
  • 内容として、問い合わせ先以外の情報も含めることができる。
  • article要素に含まれている場合は、その記事に関する問い合わせ先をあらわす。
  • article要素に含まれていない場合は、文書全体に関する問い合わせ先をあらわす。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2024年7月18日

答えはこちら

答えは B、D、E です。

address要素は、その内容が「問い合わせ先」であることをあらわす要素です。「住所」が問い合わせ先の一部であるような場合には内容として含めることも可能ですが、一般的な「住所」をマークアップするための要素ではありません(一般的な「住所」をマークアップするのであればp要素が適しています)。よってAは間違いで、Bが正しい説明となります。

かつてはaddress要素の内容として「最終更新日」などを含めることが一般的に行われていました。しかし HTML Living Standard では、address要素の内容として含めることができるのは「問い合わせ先」のみとされています。よってCは間違った説明となります。

address要素は、article要素に含まれている場合はそのarticle要素の内容に関しての問い合わせ先をあらわします。article要素に含まれていない場合は、body要素(文書全体)に関しての問い合わせ先となります。よって、DとEは正しい説明です。

出題範囲の詳細

例題3.46 「1.3.3 インタラクティブ要素」
レベル1の出題範囲「1.3.3 インタラクティブ要素」からの出題です。
HTMLのa要素に関する説明として正しいものをすべて選びなさい。
  • rel属性が指定できる
  • rev属性が指定できる
  • href属性は省略できる
  • section要素を子要素として配置できる
  • controls属性が指定されていないvideo要素を子要素として配置できる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2024年6月5日

答えはこちら

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

rel属性は「リンク元から見てリンク先が何であるのか」をキーワードで示す属性です。rev属性はその逆で、「リンク先から見るとリンク元は何であるのか」を示す属性で、rel属性と同じキーワードが指定できます。HTML 5.2 までは、a要素とlink要素にはrel属性とrev属性の両方が指定できていたのですが、現在の HTML Living Standard ではrev属性は削除されています。よって、Aは正しく、Bは間違いとなります。

href属性はリンク先のアドレスを指定する属性ですが、もともと指定は必須ではなく、現在でも省略が可能です。したがって、Cは正しい説明です。

a要素には、セクション関連要素や見出し、段落なども子要素として配置できます。よって、Dも正しい説明となります。

ただし、インタラクティブコンテンツに分類される要素は、a要素の内部には配置できない仕様となっています。video要素のcontrols属性は、動画に対して再生・停止や音量の調整といったユーザーインターフェイスを表示させる属性で、controls属性が指定されている場合に限り、video要素はインタラクティブコンテンツになります。controls属性が指定されていないvideo要素はインタラクティブコンテンツではありませんので、a要素の内部にも問題なく配置できます。そのため、Eも正しい説明となります。

出題範囲の詳細

例題3.45 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
HTMLのdl要素に関する説明として正しいものをすべて選びなさい。
  • 内容は空でもよい
  • 子要素としてdiv要素を配置できる
  • 内部に配置するdt要素は連続して複数配置できるが、dd要素は複数配置できない
  • 内部に配置するdt要素とdd要素のペアは、その一方がなくてもよい
  • 内部に配置するdt要素とdd要素のペアのうち、一部のペアだけをdiv要素でグループ化できる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2024年5月22日

答えはこちら

答えは A、B です。

dl要素の内部には、dt要素とdd要素のペアを0個以上配置できる仕様となっています。よって選択肢 A は正しい説明です。
dt要素とdd要素のペアは、div要素で囲ってグループ化することができます。div要素でグループ化すると、div要素はdl要素の子要素になりますので、B も正しい説明となります。
dt要素もdd要素も同様に連続して複数配置できます。よって C は間違いです。

dt要素もdd要素も連続して複数配置できますので、仮にdt要素またはdd要素の一方が存在しないペアがあると、ペアの境界がわからなくなります。たとえば、dl要素の子要素が「dt・dd・dd」であった場合、「dt・dd・dd」という1つのペアなのか、「dt・dd」と「dd」という2つのペアなのかが判別できなくなるということです。そのため、1つのペアにおいてはdt要素とdd要素はそれぞれ1つ以上配置する仕様となっています。よって D は間違った説明ということになります。

dt要素とdd要素のペアはdiv要素でグループ化できますが、グループ化する場合はすべてのペアをグループ化する必要があります。一部だけをグループ化することはできませんので、E も間違った説明となります。

出題範囲の詳細

例題3.44 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
HTMLのsearch要素に関する説明として正しいものをすべて選びなさい。
  • searchという名前の要素は定義されていない
  • header要素の外部には配置できない
  • 内容として必ずform要素を含む必要がある
  • 主に検索結果をマークアップするための要素である
  • フィルタリング操作に関連するコンテンツを含むことができる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2024年3月19日

答えはこちら

答えは E です。

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

出題範囲の詳細

例題3.43 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
hgroup要素内の見出しと副題のマークアップ方法として正しいものをすべて選びなさい。
  • <hgroup>見出し</hgroup>
  • <hgroup><h1>見出し</h1></hgroup>
  • <hgroup><h1>見出し</h1>副題</hgroup>
  • <hgroup><h1>見出し</h1><p>副題</p></hgroup>
  • <hgroup><h1>見出し</h1><h3>副題</h3></hgroup>

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2023年12月6日

答えはこちら

答えは B、D です。

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

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

出題範囲の詳細

例題3.42 「1.3.3 インタラクティブ要素」
レベル1の出題範囲「1.3.3 インタラクティブ要素」からの出題です。
input要素のplaceholder属性に関する説明として正しいものをすべて選びなさい。
  • 入力のための短いヒントを表示させる属性である
  • 一般に値には入力例や書式の説明などが指定される
  • ユーザーが文字を入力すると値は表示されなくなる
  • この属性をラベルの代わりとして使用すべきではない
  • スマートフォン用ページではラベルの代わりとして使うべきである

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2023年11月1日

答えはこちら

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

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

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

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

出題範囲の詳細

例題3.41 「1.3.2 メディア要素」
レベル1の出題範囲「1.3.2 メディア要素」からの出題です。
メディア要素に関する説明として正しいものをすべて選びなさい。
  • HTMLのメディア要素とはvideo要素とaudio要素のことである
  • video要素とaudio要素に指定可能な属性は完全に一致している
  • メディア要素には常にsrc属性を指定しなければならない
  • video要素のsrc属性には音声データ(MP3形式など)を指定できる
  • audio要素のsrc属性には映像データ(MP4形式など)を指定できる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2023年10月4日

答えはこちら

答えは 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は正しい説明となります。

出題範囲の詳細

例題3.40 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
HTMLのbr要素の用途として正しいものをすべて選びなさい。
  • 詩に改行を入れる
  • 住所に改行を入れる
  • セクションの前後の余白を作る
  • テキストを改行させて段落を分ける
  • 同じ段落内にある名前と住所の入力欄を改行して違う行に表示させる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2023年9月6日

答えはこちら

答えは 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>

出題範囲の詳細

例題3.39 「1.3.3 インタラクティブ要素」
レベル1の出題範囲「1.3.3 インタラクティブ要素」からの出題です。
ツールバー(内部の各コマンドではなく全体)をマークアップするのに最もふさわしい要素は次のうちのどれか。
  • ul要素
  • div要素
  • map要素
  • menu要素
  • table要素

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2023年7月19日

答えはこちら

答えは 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>

出題範囲の詳細

例題3.38 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
table要素の開始タグのうち、文法的に正しいものをすべて選びなさい。
  • <table>
  • <table border="">
  • <table border="0">
  • <table border="1">
  • <table border="2">

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2023年6月7日

答えはこちら

答えは 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も正解だったことになります。

出題範囲の詳細

例題3.37 「1.3.2 メディア要素」
レベル1の出題範囲「1.3.2 メディア要素」からの出題です。
video要素でページ内に埋め込んだ動画に、別途用意されたWebVTT形式の字幕を同期した状態で表示させたい。それを実現するために使用するHTMLの属性または要素を1つ選びなさい。
  • sync属性
  • title属性
  • track要素
  • source要素
  • subtitle要素

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2023年4月6日

答えはこちら

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

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

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

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

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

出題範囲の詳細

例題3.36 「1.3.3 インタラクティブ要素」
レベル1の出題範囲「1.3.3 インタラクティブ要素」からの出題です。
formaction属性に関する説明として正しいものをすべて選びなさい。
  • form要素に指定できる
  • type属性の値にかかわらずinput要素に指定できる
  • type属性の値が「image」のinput要素に指定できる
  • type属性の値にかかわらずbutton要素に指定できる
  • type属性の値が「button」のbutton要素に指定できる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2020年6月3日

答えはこちら

答えは 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要素』は送信ボタンではありませんので指定できません。よって、これは間違いです。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.35 「1.3.3 インタラクティブ要素」
レベル1の出題範囲「1.3.3 インタラクティブ要素」からの出題です。
Google Chrome でmeter要素を表示させたところ、value属性の値によってメーターの色が緑・黄色・赤と変化した。この変化をもたらした属性の組み合わせとして、正しいものを1つ選びなさい。
  • step属性、optimum属性
  • minvalue属性、maxvalue属性
  • min属性、max属性、optimum属性
  • low属性、high属性、optimum属性
  • lowmax属性、highmin属性、optimum属性

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2020年4月30日

答えはこちら

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

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

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

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.34 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
文章中のキーワードは目立つようにした方が読み手にとってわかりやすいだろうとの考えからテキストの特定範囲をマークアップする場合、最もふさわしい要素は次のうちのどれか。
  • b要素
  • i要素
  • s要素
  • u要素
  • em要素

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2020年4月1日

答えはこちら

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

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

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

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

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

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.33 「1.3.2 メディア要素」
レベル1の出題範囲「1.3.2 メディア要素」からの出題です。
source要素に関する説明として、正しいものを1つ選びなさい。
  • source要素は、video要素またはaudio要素の内部でのみ使用できる
  • source要素にmedia属性は指定できない
  • source要素にtype属性は指定できない
  • source要素には、srcset属性およびsizes属性が指定できる
  • source要素には、width属性およびheight属性が指定できる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2020年3月5日

答えはこちら

答えは 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は間違いです。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.32 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
q要素に関する説明として、間違っているものをすべて選びなさい。
  • フローコンテンツに属する要素である
  • フレージングコンテンツに属する要素である
  • cite属性が指定できる
  • この要素を使わずに、引用符を文章に書き込んで引用文をあらわしてもよい
  • この要素は「いわゆる」「いわば」といった意味をあらわすためにも使用できる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2020年2月19日

答えはこちら

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

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

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

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

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

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.31 「1.3.3 インタラクティブ要素」
レベル1の出題範囲「1.3.3 インタラクティブ要素」からの出題です。
a要素の内部に配置できない要素をすべて選びなさい。
  • a要素
  • label要素
  • iframe要素
  • section要素
  • tabindex属性を指定している要素

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年12月18日

答えはこちら

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

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

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

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.30 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
hr要素のあらわす意味として最も適切なものはどれか。
  • ヘアライン
  • 横罫線
  • 水平方向の線
  • セクションの変わり目
  • 段落レベルでの主題の変わり目

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年11月20日

答えはこちら

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

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

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

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.29 「1.3.2 メディア要素」
レベル1の出題範囲「1.3.2 メディア要素」からの出題です。
video要素とaudio要素で共通して使用できる属性をすべて選びなさい。
  • width
  • height
  • poster
  • preload
  • crossorigin

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年10月24日

答えはこちら

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

・width
・height
・poster

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

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

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

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.28 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
tfoot要素の配置方法として文法的に正しいものをすべて選びなさい。
  • <table>
     <tfoot> ~ </tfoot>
     <thead> ~ </thead>
     <tbody> ~ </tbody>
    </table>
  • <table>
     <thead> ~ </thead>
     <tfoot> ~ </tfoot>
     <tbody> ~ </tbody>
    </table>
  • <table>
     <thead> ~ </thead>
     <tbody> ~ </tbody>
     <tfoot> ~ </tfoot>
    </table>
  • <table>
     <thead> ~ </thead>
     <tfoot> ~ </tfoot>
     <tbody> ~ </tbody>
     <tfoot> ~ </tfoot>
    </table>
  • <table>
     <thead> ~ </thead>
     <tbody> ~ </tbody>
     <tfoot> ~ </tfoot>
     <tfoot> ~ </tfoot>
    </table>

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年10月2日

答えはこちら

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

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.27 「1.3.3 インタラクティブ要素」
レベル1の出題範囲「1.3.3 インタラクティブ要素」からの出題です。
iframe要素のsrcdoc属性に指定するHTML文書に関する説明のうち、間違っているものをすべて選びなさい。
  • DOCTYPE宣言は省略できない
  • html要素のタグは省略可能
  • head要素のタグは省略可能
  • title要素はなくてもよい
  • body要素のタグは省略可能

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年4月17日

答えはこちら

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

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

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

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

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.26 「1.3.2 メディア要素」
レベル1の出題範囲「1.3.2 メディア要素」からの出題です。
video要素に指定可能な次の属性のうち、論理属性に該当するものをすべて選びなさい。
  • preload
  • autoplay
  • loop
  • muted
  • controls

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年3月20日

答えはこちら

答えは 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」のうちのいずれかのキーワードを指定します。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.25 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
英語の文章の中にフランス語の慣用句が含まれている場合に、そのフランス語の部分をマークアップするのに最もふさわしい要素は次のうちのどれか。
  • em要素
  • q要素
  • i要素
  • b要素
  • u要素

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年3月5日

答えはこちら

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

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.24 「1.3.3 インタラクティブ要素」
レベル1の出題範囲「1.3.3 インタラクティブ要素」からの出題です。
下記はinput要素を使用して画像を取り込む際にスマートフォンやタブレットのカメラを起動する例である。下線部に入る値として有効なものをすべて選びなさい。
 

<input type="file" id="image_file" accept="image/*" capture="______" />

  • yes
  • camera
  • environment
  • system
  • user

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2018年11月21日

答えはこちら

答えは 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つになります。

出題範囲の詳細

LPI-Japan
中谷 徹

例題3.23 「1.3.3 インタラクティブ要素」
レベル1の出題範囲「1.3.3 インタラクティブ要素」からの出題です。
input要素のpattern属性に指定する値の内、文字列 A を受け付けないのは次のうちどれか。
  • (A|B|C)
  • [ABC]
  • [A-C]
  • ^[ABC]
  • [^ABC]

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2018年10月18日

答えはこちら

答えは 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では * ではなく .(ドット)がマッチする文字かなと思います。

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

出題範囲の詳細

LPI-Japan
中谷 徹

例題3.22 「1.3.3 インタラクティブ要素」
レベル1の出題範囲「1.3.3 インタラクティブ要素」からの出題です。
a要素でハイパーリンクを作成する際、target属性によって表示先を指定できるが、target属性の指定を省略した場合と同等の、つまりデフォルトの target は次のうちどれか。
  • _my
  • _me
  • _mine
  • _self
  • _own

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2018年9月20日

答えはこちら

答えは 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 のタブが閉じられていなければ、そこに再表示され、任意の名前と同等の挙動となります。

出題範囲の詳細

LPI-Japan
中谷 徹

例題3.21 「1.3.3 インタラクティブ要素」
レベル1の出題範囲「1.3.3 インタラクティブ要素」からの出題です。
textarea要素のサイズはデフォルトで20文字x2行で、rows, cols により変更が可能である。
更にデフォルトではユーザーがブラウザ上でリサイズ可能であるが、リサイズの可否は CSS で指定する。
resizeプロパティの有効な値として間違っているのは次のうちどれか。
  • none
  • horizontal
  • vertical
  • either
  • both

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2018年6月5日

答えはこちら

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

出題範囲の詳細

LPI-Japan
中谷 徹

例題3.19 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
fieldset 要素に説明を付加する子要素は次のうちどれか。
  • caption
  • summary
  • series
  • legend
  • folklore

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答えは 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>
				

出題範囲の詳細

LPI-Japan
中谷 徹

例題3.18 「1.3.2 メディア要素」
レベル1の出題範囲「1.3.2 メディア要素」からの出題です。
下記の動画配信ページの説明として正しいのは次のうちどれか。
      
 <html>
 <head>
  <meta charset="UTF-8">
 </head>
<body>
<video src=help.mov poster=help.png width=800 height=600 controls muted>
       <track kind="subtitles" src="ja.vtt" label="日本語">
       <track kind="captions"  src="en.vtt" label="English">
</video>
</body>
</html>
	 
     
  • ページを開くと動画が自動的に再生される。
  • 動画再生時にデフォルトで日本語の字幕が表示される。
  • 動画再生時に日本語訳と英語での描写が同時に表示される。
  • 動画再生時に音声は再生できない。
  • ページを開くと動画は自動的にロードされる。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答えは 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,

出題範囲の詳細

LPI-Japan
中谷 徹

例題3.17 「1.3.3 インタラクティブ要素」
レベル1の出題範囲「1.3.3 インタラクティブ要素」からの出題です。
HTMLフォームを用いたアプリを納品したが、スマホユーザーから「登録画面が使いにくい。」との苦情が多かったらしく、改善を要求された。
以下はそのコードの抜粋であるが、スマホへの改善策として最も適しているのは次のうちどれか。
      
 <html>
 <head>
  <meta charset="UTF-8">
 </head>
<body>
 <h1>登録</h1>
<form action="reg.pl" method="post">
 <table>
  <tr>
   <td> 氏名:
   <td><input name="name" placeholder="資格月斗">
  <tr>
   <td> メール:
   <td><input name="email" placeholder="shikaku@example.org">
  <tr>
   <td> 電話番号:
   <td><input name="tel" placeholder="09012345678">
  <tr>
   <td> 生年月日:
    <td><input name="birth" placeholder="1999/12/31">
  <tr>
   <td> URL:
   <td><input name="url" placeholder="http://example.org/">
 </table>
<input type="submit" name="register">
</form>
</body>
</html>
	 
     
  • autocomplete=“on”で入力を簡素化する。
  • kbd属性でキーボード配列(QWERTYまたは10キーなど)を指定する。
  • picker属性でカレンダーピッカーやスライダーを指定する。
  • pattern属性で受け付けない文字を入力できないよう指定する。
  • type属性で入力値の分類を指定する。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答えは 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>			    
			    

出題範囲の詳細

LPI-Japan
中谷 徹

例題3.16 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
HTML標準で、誤植を修正する際の記述として適切なのは次のうちどれか。
  • アーカイブを<ng>回答</ng><ok>解凍</ok>できない。
  • 私は<err>隠し事</err><corr>書く仕事</corr>が得意です。
  • 漢字の<del>返還</del><ins>変換</ins>ミスに気をつけよう。
  • 田舎町に有名歌手が<typo>音ずれ</typo><fix>訪れ</fix>た。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

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

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

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

出題範囲の詳細

LPI-Japan
中谷 徹

例題3.15 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
object要素は、画像、音声、HTML文書など様々な外部リソースを文書内に取り込む際に使用しますが、次のうち指定方法として適切なものを1つ選べ。
  • <object href="sample.svg" …>
  • <object data="sample.mpg" …>
  • <object embed="sample.swf" …>
  • <object src="sample.gif" …>

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

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

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

出題範囲の詳細

LPI-Japan
中谷 徹

例題3.14 「1.3.3 インタラクティブ要素」
レベル1の出題範囲「1.3.3 インタラクティブ要素」からの出題です。
下記のように、画面に「▶︎詳細」と表示し、「詳細」をクリックすると「詳細な説明」を表示したり、非表示にしたりするHTML5の記述は次のうちどれか。余分な文字を表示せず、正しく動作するものをすべて選びなさい。
      ▶︎詳細
	 ⇅ 
	  ▼詳細
	  詳細な説明
     
  • <summary>詳細
    <details>詳細な説明</details>
    </summary>
  • <details>
    詳細な説明
    </details>
  • <details>詳細
    <summary>概要</summary>
    詳細な説明
    </details>
  • <details>
    詳細な説明
    <summary>詳細</summary>
    </details>

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

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

出題範囲の詳細

LPI-Japan
中谷 徹

例題3.13 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
次の要素のうち、セクションに分類される要素をすべて選びなさい。
  • header
  • nav
  • main
  • aside
  • footer

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

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

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
 HTML5レベル1認定者 大藤 幹 氏

例題3.12 「1.3.2 メディア要素」
レベル1の出題範囲「1.3.2 メディア要素」からの出題です。
videoタグを使って動画圧縮規格がh.264の映像を表示する場合、sourceタグに設定する適切なtype属性を選びなさい。
  • video/mp4
  • video/ogg
  • video/h264
  • video/webm
  • video/264

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答えは 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」は存在しません。

出題範囲の詳細

例題解説の提供:株式会社 デジタル・ヒュージ・テクノロジー
 豊田 健次 氏

例題3.11 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
role属性の機能として正しいものを1つ選びなさい。
  • ユーザーが独自の属性を追加する。
  • 要素を回転させる角度を指定する。
  • 既存の要素の役割・意味を上書きして変更する。
  • ゲームキャラクターの特性を示す。
  • ユーザーインターフェイスの状態や特性を示す。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答えは 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-*属性の説明です。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.10 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
次のうち、mark要素としてマークアップするのにふさわしいものをすべて選びなさい。
  • 製品名やキーワード
  • 中国語の固有名詞
  • 検索結果の表示における検索語
  • スペルが間違っている単語
  • 引用文の中で読者に注目してもらいたい部分

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

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

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

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

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.9 「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
time要素で指定する日時の書式として間違っているものを1つ選びなさい。
  • <time>02:50</time>
  • <time>2時50分</time>
  • <time datetime="02:50">真夜中</time>
  • <time datetime="2015-12-24T02:50">2時50分</time>
  • <time datetime="2015-12-24 02:50:00">ニ時五十分</time>

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

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

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

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

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.8「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
form要素の外部にあるフォーム関連要素をform要素と関連づける際に使用する属性はどれか。次の選択肢から1つ選びなさい。
  • for属性
  • form属性
  • rel属性
  • formlink属性
  • formassociate属性

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

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

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.6「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
次の要素のうち、セクションを示す要素ではないものはどれか。1つ選びなさい。
  • nav
  • main
  • aside
  • article
  • section

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

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

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題3.5「1.3.2 メディア要素」
レベル1の出題範囲「1.3.2 メディア要素」からの出題です。
動画ファイルの埋め込みに関係するHTML要素を次の選択肢から全て選びなさい。
  • source要素
  • video要素
  • movie要素
  • control要素
  • volume要素

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

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

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 林 拓也 氏

例題3.4「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの出題です。
ページのタイトルおよび本文に対してエンコードの種類を指定するcharset属性の記述位置として最も適切なものを選びなさい。

エンコード指定の記述:
<meta charset="UTF-8">

記述先のコード:
<!DOCTYPE html>
<html lang="ja">
(A)
<head>
	(B)
	<title>...</title>
	(C)
</head>
(D)
<body>
	(E)
 ...
</body>
</html>

  • (A)の位置に記述する
  • (B)の位置に記述する
  • (C)の位置に記述する
  • (D)の位置に記述する
  • (E)の位置に記述する

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答えB
meta要素のcharset属性は、本文だけではなくタイトルのエンコードに関する種類を指定できます。
この記述はコードの<head>内に記述する必要があります。
またタイトルに対しても指定する場合は、<title>より前に指定しなければなりません。
問題の選択肢では、<head>内にあり<title>より前に位置しているのは(B)のみです。
よって正解はBとなります。

出題範囲の詳細

例題解説の提供:メディアスケッチ株式会社
代表取締役 兼 株式会社コーデセブン 取締役CTO 伊本 貴士 氏
ITコンサルタント業を中心に、Webサービスの開発や、オープンソースシステムの構築・保守なども行っている。

例題3.3「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「1.3.1 要素と属性の意味(セマンティクス)」からの例題を解説します。
以下の説明に関する要素名の組み合わせで正しいものを選びなさい。

(1) コンピュータコードを表すために利用される要素である。
(2) コンピュータコードや数学における変数を示す場合に利用される要素である。
(3) コンピュータからの出力内容を示す場合に利用される要素である。
(4) コンピュータからの入力内容を示す場合に利用される要素である。

  • (1) pre (2) samp (3) var (4) kbd
  • (1) pre (2) var (3) samp (4) kbd
  • (1) pre (2) var (3) kbd (4) samp
  • (1) code (2) var (3) samp (4) kbd
  • (1) code (2) var (3) kbd (4) samp

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え D

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

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

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

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

出題範囲の詳細

例題解説の提供:メディアスケッチ株式会社
代表取締役 兼 株式会社コーデセブン 取締役CTO 伊本 貴士 氏
ITコンサルタント業を中心に、Webサービスの開発や、オープンソースシステムの構築・保守なども行っている。

例題3.2「1.3.2 メディア要素」
レベル1の出題範囲「1.3.2 メディア要素」からの例題を解説します。
HTML5におけるsource要素に関する説明として、正しいものを1つ選びなさい。
  • コンピュータのコードを表示するための要素である。
  • 文書内のコンテンツが他の情報源からの引用である事を示す要素である。
  • 文書内に、JavaScriptやデータブロックを組み込むための要素である。
  • サイトの外部にある画像のURLを指定するための要素である。
  • 動画や音声に関するメディアファイルの種類やURLを指定するための要素である。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

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

出題範囲の詳細

例題解説の提供:メディアスケッチ株式会社
代表取締役 兼 株式会社コーデセブン 取締役CTO 伊本 貴士 氏
ITコンサルタント業を中心に、Webサービスの開発や、オープンソースシステムの構築・保守なども行っている。

例題3.1「1.3.1 要素と属性の意味(セマンティクス)」
レベル1の出題範囲「要素と属性の意味(セマンティクス)」からの例題を解説します。
以下のようにHTML5の仕様でマークアップを行い、テキストの一部を“重要なテキスト範囲”として指定し、音声出力における強い表現などを期待したい。コード内の①に入る、最も適切な要素名を選択肢から一つ選びなさい。
<p> <①>重要なお知らせ!</①> 明日の集合時間は7時に変更となりました。</p>
  • mark
  • s
  • strong
  • b
  • i

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

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

出題範囲の詳細

例題解説の提供:メディアスケッチ株式会社
代表取締役 兼 株式会社コーデセブン 取締役CTO 伊本 貴士 氏
ITコンサルタント業を中心に、Webサービスの開発や、オープンソースシステムの構築・保守なども行っている。

メルマガ登録E-mail Magazine

受験を決めたら、まずメルマガ登録。
学習に役立つ例題解説付きメールマガジンを定期発行

氏名

ご提供いただく個人情報の取り扱いについて

ご提供いただいた情報につきましては、当団体内において管理し第三者には開示いたしません。 ご提供いただいた情報につきましては、当団体のオープンソース普及/促進活動のための統計データに反映し、Linux技術者認定事業サービスの充実に活用させて頂くとともに、当団体からの最新情報やイベント情報のご案内を差上げる目的に利用させていただきます。 当団体のプライバシーポリシーについてはこちらをご参照ください。