- <ここから言葉を指定> これは１番目の言葉 <ここまで言葉を指定>
- <ここから言葉の説明> これは１番目の言葉に対する説明です。 <ここまで言葉の説明>
- <ここから言葉を指定> これは２番目の言葉 。 <ここまで言葉を指定>
- <ここから言葉の説明> これは２番目の言葉に対する説明です。 <ここまで言葉の説明>
<ここまで説明リスト>
説明リスト「dl要素」
国語辞典などで調べたい言葉を調べてみると、調べた言葉とその説明がのっています。
その前後にもまた言葉とその言葉の説明がのっています。
HTMLでこのような説明をしたリストを作るには、「dl要素」を使います。
<dl>と</dl>で囲んだ範囲が説明リストになります。
この「dl要素」を使う上での注意点として、「dl要素」の直下には後に説明する「dt要素」と「dd要素」しか入れることができません。
この辺りは前回説明した「ol要素」「ul要素」によく似ています。
ちなみに、「dl要素」の「dl」はdescription listの略で、説明や解説リストいう意味です。
また、HTML5以前はdefinition listの略で、定義リストという意味でした。
「dl要素」の中で説明する言葉「dt要素」と言葉の説明「dd要素」
「dl要素」は、説明リストをつくるだけなので、説明する言葉とその説明も記述しなければなりません。
説明する言葉は「dt要素」、その言葉の説明は「dd要素」を使います。
<dt>と</dt>で囲んだ範囲が説明する言葉、<dd>と</dd>で囲んだ範囲がその言葉の説明になります。
使い方は、まず「dl要素」を記述し、その中に「dt要素」で説明する言葉を指定し、「dd要素」でその言葉の説明をします。
「dt要素」と「dd要素」は１対１でなくてもかまいません。複数の「dt要素」の後に「dd要素」を使ってもよいですし（同じ意味の言葉がありますから）、一つの「dt要素」に複数の「dd要素」を使ってもよい（一つの言葉がいくつも意味を持っていたりしますから）のです。
また、「dt要素」に「dfn要素」を入れると、「dt要素」で定義語を定義し、「dd要素」でその説明をすることができます。
ちなみに、「dt要素」の「dt」はdefinition termの略で定義用語といった意味になります。
「dd要素」の「dd」definition descriptionの略で定義の説明といった意味になります。
サンプル
今回説明した、「dl要素」「dt要素」「dd要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。
サンプルソースコード
<dl> <dt>日</dt> <dt>太陽</dt> <dd>太陽系の中心にある恒星のこと。</dd> <dt>月</dt> <dd>地球を中心に回っている衛星のこと。</dd> <dd>時間の単位の一つ。１年を１２分割したもの。</dd> </dl>
表示結果
- 日
- 太陽
- 太陽系の中心にある恒星のこと。
- 月
- 地球を中心に回っている衛星のこと。
- 時間の単位の一つ。１年を１２分割したもの。
「dl要素」「dt要素」「dd要素」のまとめと次回記事について
今回説明した「dl要素」「dt要素」「dd要素」はいかがでしたでしょうか。
ちょっと使い方が難しそうですが、使えるようになると意外と使える要素です。
説明リストですので、辞書や辞典のような使い方以外にも、Q&Aに使ったりすることが出来ます。
また、今日聞いた音楽の特徴や感想などを書くとき、「dt要素」に曲名、「dd要素」に特徴や感想を書くなどにも使えそうです。
「dt要素」を日付などにして「dd要素」をその日の出来事を書くなど、日記のような使い方もできるかもしれません。
次回は、HTML文章をグループ化する「div要素」「span要素」の説明をします。
以上、当サイト管理人のAsterismでした。