
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¥
補足
それぞれのタグは類似している為、誤って使用してしまうケースが多いです。
そのような間違いがおきないように、英単語で覚えるようにしましょう。
そのような間違いがおきないように、英単語で覚えるようにしましょう。
#忍者CODE無料問題集で活動を記録しよう
完了にする!
まずul・olタグと同様にdlタグを使ってリストを定義し、
dlタグの内側には、dtタグとddタグを使って対関係で記述していきます。
今回は日付をdtタグで囲い、記事タイトルをddタグで囲います。
dd要素はいくつあっても問題ありません。