【HTML基礎ドリル】タグ・要素・属性を完璧に理解する
前回の記事では、HTMLの主役である「タグ」「要素」「属性」の3人の関係性について学びました。この3つは、Webページを作るための最も基本的な「文法」です。
今回は、その知識を確実に自分のものにするための実戦ドリルです。各章の解説を読み、全問正解を目指してチャレンジしましょう！
1. HTMLの「三大要素」解剖学クイズ
まずは基本中の基本です。「タグ」「要素」「属性」が、それぞれ何を指しているのか。そして「サンドイッチ構造」や例外である「空要素」について確認しましょう。
やってみよう！構造と用語のクイズ（10問）
- 「中身の入った名前付きの箱」全体、つまり開始タグから終了タグまでの一塊を何と呼びますか？
答えを見る
要素 (Element)
（例：
<p>テキスト</p>全体のことです。） - 要素の「開始」と「終了」を示す目印で、
< >で囲まれたものを何と呼びますか？答えを見る
タグ (Tag)
（箱の種類を決めるラベルのようなものです。）
- 要素に追加情報を与えるための「シール」のようなものを何と呼びますか？
答えを見る
属性 (Attribute)
（例：リンク先を指定するシールなど。）
- 属性（シール）は、「開始タグ」と「終了タグ」のどちらに記述するルールですか？
答えを見る
開始タグ
（
<p class="...">のように書きます。） - 終了タグには、開始タグと区別するために何の記号が入りますか？
答えを見る
スラッシュ ( / )
（例：
</p>） - 画像を表示する
<img>のように、中身を挟まないため終了タグが存在しない要素を何と呼びますか？答えを見る
空要素 (くうようそ)
（単独で機能する特別な要素です。）
<p class="intro">において、classの部分を「属性名」と呼び、"intro"の部分を何と呼びますか？答えを見る
属性値 (Attribute Value)
（具体的な設定内容が入ります。）
- 次のうち、空要素の代表的なタグはどれですか？（A:
<p>/ B:<br>）答えを見る
B: <br>
（改行タグ
<br>は終了タグを持ちません。） - HTMLコード
<a href="...">リンク</a>において、「リンク」という文字部分を何と呼びますか？答えを見る
コンテンツ (Contents)
（タグに挟まれた中身のことです。）
- 属性を書く際、属性名と属性値をつなぐ記号は ( ) です。
答えを見る
イコール ( = )
（
属性名="属性値"の形式で書きます。）
2. 属性（Attribute）の基本知識クイズ
属性は、要素に対する「命令書」です。「どこにリンクする？」「画像はどこにある？」といった重要な情報は、すべて属性で指定します。
やってみよう！基本属性クイズ（10問）
- リンクを作成する
<a>タグで、リンク先のURLを指定する必須の属性は何ですか？答えを見る
href 属性
（Hypertext Referenceの略。「どこへ？」を指定します。）
- 画像を表示する
<img>タグで、画像のファイルの場所（URL）を指定する必須の属性は何ですか？答えを見る
src 属性
（Sourceの略。「何の画像を？」を指定します。）
- CSSでデザインを適用したり、要素をグループ分けしたりするために使う、重複可能な名前をつける属性は何ですか？
答えを見る
class 属性
（「クラス名」をつけてグループ化します。）
- ページ内で「唯一の要素」を特定するために使う、重複してはいけない名前をつける属性は何ですか？
答えを見る
id 属性
（ページ内リンクの飛び先などにも使われます。）
<img>タグで、画像が表示されなかった時に代わりに表示される「代替テキスト」を指定する属性は何ですか？href属性で指定する値は、通常どんな形式ですか？答えを見る
URL
（
https://...から始まるアドレスを指定します。）- 「この要素は重要なお知らせグループです」と意味づけしたい時、
<p class="important">のように書きますが、このimportantは何と呼ばれますか？答えを見る
属性値 (またはクラス名)
- 画像の表示サイズ（幅と高さ）を指定する属性は
widthと ( ) です。答えを見る
height 属性
（読み込み時のレイアウト崩れを防ぐために重要です。）
- 属性値は、通常どのような記号で囲む必要がありますか？
答えを見る
ダブルクォーテーション ( "" )
（例：
class="box"） class属性は1つのページ内で何度も使えますが、id属性は1ページに ( ) 回しか使えません。答えを見る
1 回
（IDは「固有の背番号」のようなものです。）
3. ブロガー必須！実践・おもてなし属性クイズ
ブログ運営において特に重要な「実用的な属性の使い方」です。読者に親切なリンクの貼り方や、SEOに効く設定を確認しましょう。
やってみよう！実践テクニッククイズ（10問）
- リンクをクリックした時、現在のページを残したまま「新しいタブ」で開くようにする属性設定はどれですか？
答えを見る
target="_blank"
（読者の離脱を防ぐ「おもてなし」設定です。）
target="_blank"を設定しないと、リンクをクリックした時、読者はどうなってしまいますか？答えを見る
今見ているページが切り替わってしまう
（あなたのブログから「追い出してしまう」状態になります。）
- Googleの検索ロボットは画像の中身を見ることができませんが、
alt属性のテキストを読むことで画像の意味を理解します。これは何の対策になりますか？答えを見る
SEO対策
（画像検索でのヒット率向上などにつながります。）
- アフィリエイトリンクなど、検索エンジンに「評価を渡したくない（リンクをたどらせない）」場合に使う属性値は
rel="( )"です。答えを見る
（
rel="nofollow"と記述します。） - 広告やスポンサーリンクであることをGoogleに明示するための、新しい属性値は
rel="( )"です。答えを見る
sponsored
（
rel="sponsored"と記述します。） - 目の不自由な方が使う「音声読み上げソフト」は、画像のどの属性を読み上げますか？
答えを見る
alt 属性
（アクセシビリティの観点からも非常に重要です。）
- 画像の
widthとheightを指定しておくことで、読み込み中に発生する「ガタつき（レイアウトシフト）」を防ぐことができます。これは何のために重要ですか？答えを見る
ユーザー体験 (UX) の向上
（記事を読んでいる途中で文章がズレるとストレスになります。）
- 外部サイトへのリンクには
target="_blank"をつけるのが推奨されますが、自分のブログ内の別記事へのリンク（内部リンク）は、通常どうしますか？答えを見る
target="_blank" をつけない (同じタブで開く)
（サイト内を回遊してもらう場合は、そのまま画面遷移させるのが一般的です。）
target="_blank"を使うことは、読者にとって「元の記事（あなたのブログ）」をどうしておくというメッセージになりますか？答えを見る
確保しておく (席をとっておく)
（「参考資料はこちらです、お席は確保してありますよ」という親切心です。）
- HTMLの学習において、すべてのタグを丸暗記する必要はありません。大切なのは「仕組み」と、よく使う「( )」を理解することです。
答えを見る
基本 (または主要なタグ・属性)
（今回学んだタグ・要素・属性の関係さえ分かれば、あとは調べればOKです！）
4. コード完成クイズ：正しいのはどっち？
いよいよ実践です！実際のコードを見て、空欄（ [ ? ] ）に入る正しい属性や値を選択肢から選んでください。
やってみよう！コード穴埋めクイズ（10問）
-
Googleへのリンクを作成したい。
選択肢： A. src / B. href / C. link
答えを見る
正解： B. href
解説： リンク先を指定するのは「href (Hypertext Reference)」属性です。srcは画像などに使います。
-
画像ファイルを表示したい。
<img [ ? ]="cat.jpg" alt="猫の画像">選択肢： A. src / B. href / C. img
答えを見る
正解： A. src
解説： 画像のソース（Source）を指定するのは「src」属性です。
-
この段落をCSSで装飾するためにグループ名をつけたい。
<p [ ? ]="red-text">重要な文章です</p>選択肢： A. id / B. class / C. style
答えを見る
正解： B. class
解説： デザインのためにグループ名を付ける（分類する）のは「class」属性です。idはページ内で1回しか使えません。
-
リンクを新しいタブで開きたい。
<a href="..." target="[ ? ]">開く</a>選択肢： A. _blank / B. _new / C. _tab
答えを見る
正解： A. _blank
解説： 新しいタブ（空白のウィンドウ）で開く値は「_blank」です。
-
画像が表示されなかった時の説明文（代替テキスト）を入れたい。
<img src="logo.png" [ ? ]="会社ロゴ">選択肢： A. title / B. text / C. alt
答えを見る
正解： C. alt
解説： 代替（Alternative）テキストを指定するのは「alt」属性です。
-
ページ内リンクの飛び先として、この見出しに固有の名前をつけたい。
<h2 [ ? ]="chapter-1">第1章</h2>選択肢： A. class / B. id / C. name
答えを見る
正解： B. id
解説： 固有の識別子（Identifier）をつけるのは「id」属性です。
-
<a href="..." rel="[ ? ]">商品はこちら</a>
選択肢： A. noindex / B. nofollow / C. none
-
画像の幅を指定してレイアウト崩れを防ぎたい。
<img src="..." [ ? ]="500" height="300">選択肢： A. width / B. size / C. long
答えを見る
正解： A. width
解説： 幅は「width」、高さは「height」で指定します。
-
このリンクが広告であることをGoogleに明示したい。
<a href="..." rel="[ ? ]">PR</a>選択肢： A. sponsored / B. ad / C. promotion
答えを見る
正解： A. sponsored
解説： 広告・スポンサーリンクには「sponsored」を使います。
-
正しい属性の書き方はどっち？
<p class[ ? ]"text-red">選択肢： A. : (コロン) / B. = (イコール)
答えを見る
正解： B. = (イコール)
解説： HTMLの属性は「属性名="値"」のようにイコールで繋ぎます。コロンを使うのはCSSです。
