ログイン
問題3

dl・dt・ddを使って説明リスト作ろう

この問題では、「質問とその回答」のように相互につながりを持ったリストの定義を行なうHTMLタグについて学習します。 3つまとめてタグを覚える必要があるので以下で説明するポイントを押さえて使えるようになりましょう。

アイコン画像

本のアイコンdl・dt・ddとは

dl・dt・ddは、説明リストタグとも呼ばれる「見出しと説明文」や「Q&A」などで使用するためのタグです。
それぞれの「d」はdescription(説明)を意味しているため、説明リストと言われています。
使用する際は、dtに説明したいことを書き、ddでそれに対しての説明を書きます。その全体をdlで囲います。
それぞれは以下の略になります。
dl(description list)= 説明リスト
dt(description term)= 説明する言葉
dd(definition / description)= 説明文

HTMLの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。

問題3:dl・dt・ddを使って説明リスト作ろう

dl・dt・ddタグを使って忍者CODEの新着情報を完成させてください。

※表示している情報は一例のため正しい情報ではありません

エディターのアイコンあらかじめエディタに書くコード

                2022.06.16
無料問題集「HTML_CSS」初級問題45~53問を追加しました。
2022.08.25
無料問題集「jQueryAnimation」を追加しました。
無料問題集「Vue」コースを追加しました。
2022.12.06
忍者CODE甲賀の公式サイトをリニューアルしました。
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <dl>
  <dt>2022.06.16</dt>
  <dd>無料問題集「HTML_CSS」初級問題45~53問を追加しました。</dd>
  <dt>2022.08.25</dt>
  <dd>無料問題集「jQueryAnimation」を追加しました。</dd>
  <dd>無料問題集「Vue」コースを追加しました。</dd>
  <dt>2022.12.06</dt>
  <dd>忍者CODE甲賀の公式サイトをリニューアルしました。</dd>
</dl>
¥HTML¥
            

コメントのアイコン解説

説明リストを作成するには、dl・dt・ddタグを使用します。

まずul・olタグと同様にdlタグを使ってリストを定義し、
dlタグの内側には、dtタグとddタグを使って対関係で記述していきます。
今回は日付をdtタグで囲い、記事タイトルをddタグで囲います。

dd要素はいくつあっても問題ありません。
ログインして解答を見る

コメントのアイコン補足

それぞれのタグは類似している為、誤って使用してしまうケースが多いです。
そのような間違いがおきないように、英単語で覚えるようにしましょう。
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる