HTML セマンティック要素クイズ - プレイ中

1 第1問

HTMLのセマンティック要素の主な目的は何ですか？

A スタイリングを容易にするため

B 検索エンジンや支援技術にコンテンツの意味を伝えるため

C JavaScriptのパフォーマンスを向上させるため

D ページの読み込み速度を最適化するため

2 第2問

HTMLの`<header>`要素に含めるべき内容として最も適切なものはどれですか？

A ページの主要なコンテンツ

B 著作権情報や連絡先情報

C 導入的なコンテンツやナビゲーションリンク、ロゴ

D 独立した自己完結型のコンテンツ

3 第3問

HTMLの`<nav>`要素の主な用途は何ですか？

A 広告コンテンツを表示するため

B 主要なナビゲーションリンクのグループを提供するため

C ページのサイドバーコンテンツを定義するため

D フォームの入力フィールドをグループ化するため

4 第4問

HTMLの`<main>`要素に含めるべき内容として最も適切なものはどれですか？

A サイト全体のヘッダーやフッター

B ドキュメントの主要なコンテンツであり、ページごとに固有の内容

C 補足情報や広告

D 複数のセクションに共通するナビゲーション

5 第5問

HTMLの`<article>`要素と`<section>`要素の使い分けについて、最も適切な説明はどれですか？

A `<article>`は一般的なコンテンツのグループ化に使い、`<section>`は独立したコンテンツに使う。

B `<article>`は独立して配布または再利用可能なコンテンツに使い、`<section>`は関連するコンテンツをグループ化する。

C `<article>`はページの主要なコンテンツに使い、`<section>`はサイドバーに使う。

D `<article>`はテキストコンテンツに使い、`<section>`は画像コンテンツに使う。

6 第6問

HTMLの`<aside>`要素に含めるべき内容として最も適切なものはどれですか？

A ページの主要なナビゲーションリンク

B ページの主要なコンテンツ

C 周囲のコンテンツとは間接的に関連する補足情報や広告

D 著作権情報や連絡先情報

7 第7問

HTMLの`<footer>`要素に含めるべき内容として最も適切なものはどれですか？

A ページの主要な見出しとロゴ

B 導入的なコンテンツやナビゲーションリンク

C 著作権情報、連絡先、関連文書へのリンク、作成者情報など

D 独立した自己完結型の記事

8 第8問

次のHTML要素のうち、セマンティック要素ではないものはどれですか？

A `<article>`

B `<div>`

C `<nav>`

D `<main>`

9 第9問

セマンティックHTMLを使用する主な利点の一つは何ですか？

A CSSの記述量を大幅に削減できる

B ページのレイアウトを自由にデザインできる

C 検索エンジン最適化（SEO）とアクセシビリティが向上する

D JavaScriptの実行速度が向上する

10 第10問

HTMLの`<figure>`要素と`<figcaption>`要素の組み合わせの主な目的は何ですか？

A フォームの入力フィールドをグループ化するため

B 独立したフローコンテンツ（画像、図、コードなど）とそのキャプションを関連付けるため

C ページの主要なナビゲーションメニューを作成するため

D 引用文を強調表示するため