用語説明型リストの要素 0:16

HTMLには前回紹介した箇条書き以外にもリスト関係の要素があります。
それは、 用語説明型のリストです。
主に、 用語集や、よくある質問、会社概要、お問い合わせフォームなどに使います。

用語説明リスト全体を、dl要素で挟む。 1:33

dl要素は、description（ディスクリプション） list（リスト） の略で用語説明型リストを表します。
dl要素の中には、用語を表すdt要素（後で紹介）と、説明を表すdd要素（後で紹介）のグループを必要な数だけ配置して、用語説明リストを作ります。

カテゴリ

フロー・コンテンツ

コンテンツ・モデル

1つ以上のdt要素と、その後に続く1つ個以上のdd要素のグループが0個以上

dl要素のサンプル

dl要素は、用語説明のリスト全体を、<dl> 〜 </dl>タグで挟みます。

<dl>
  HTML
  Webサイトの文書構造を記す言語
  CSS
  Webサイトのデザインを定義する言語
</dl>

上記の例は、「HTML」という用語と、「CSS」という用語を説明している用語説明型リストです。
この場合、まずはこれらの 用語リスト全体をdl要素でマークアップします。
そしてその中で、あとで紹介する、 dt要素で用語を、dd要素で説明文をマークアップして用語説明リストを作成します。

dl要素の注意点

dl要素の子要素（中に直接配置できる要素）は、 dt要素かdd要素しか配置できません。。
それ以外の要素を直接配置しないように注意しましょう

説明する用語を、dt要素で挟む。 3:18

dt要素は、description（ディスクリプション） term（ターム） の略で、説明をする用語を表します。
dt要素は、必ず、dl要素の中に配置する必要があります。

カテゴリ

なし

コンテンツ・モデル

フロー・コンテンツ。
ただし、子孫にセクショニング・コンテンツの要素、ヘディング・コンテンツの要素、header要素、footer要素は配置できない。

dt要素のサンプル

dt要素は説明する用語を、<dt> 〜 </dt>タグで挟みます。

<dl>
  <dt>HTML</dt>
  Webサイトの文書構造を記す言語
  <dt>CSS</dt>
  Webサイトのデザインを定義する言語
</dl>

これで、「HTML」と、「CSS」が用語としてマークアップされました。
あとは、これらの 用語に対しての説明をdd要素でマークアップすれば完成です。

用語の説明は、dd要素で挟む。 5:40

<dd>要素は、description（ディスクリプション）、 definition（デフィニション） の略で dtで挟んだ用語の説明や定義を表す要素です。
dd要素は、必ず dl要素の中で、dt要素より後に配置する必要があります。
（1つのdt要素に対して、複数のdd要素を配置することも可能です。）

カテゴリ

なし

コンテンツ・モデル

フロー・コンテンツ

dd要素のサンプル

dd要素は、dt要素の用語に対する説明や定義を、<dd> 〜 </dd>タグで挟みます。

<dl>
  <dt>HTML</dt>
  <dd>Webサイトの文書構造を記す言語</dd>
  <dt>CSS</dt>
  <dd>Webサイトのデザインを定義する言語</dd>
</dl>

このように、各用語に対しての説明文をdd要素でマークアップします。
これで、用語説明型リストが完成です。

用語説明型リストを使ってみよう 7:00

それでは、用語説明型リストの要素を記述してみましょう。

1. 「Chapter10」フォルダ内の「index.html」をテキストエディタで開く
2. 下記を参考に、マークアップ。

<h1>僕のHTML大辞典</h1>
<dl>
  <dt>p要素</dt>
  <dd>パラグラフの略で段落を表す</dd>
  <dt>h1〜h6要素</dt>
  <dd>ヘディングの略で見出しを表す</dd>
  <dt>br要素</dt>
  <dd>ラインブレークの略で改行を表す</dd>
</dl>

3. 上書き保存し、ブラウザで確認

練習問題 10:06

「Chapter10」 › 「quest」フォルダ内の「index.html」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。

まとめ 14:21

用語説明リストの使い方はわかりましたか？

• 説明する用語は、dt 要素で表す
• 説明や定義は、dd 要素で表す
• 用語説明リスト全体を、dl 要素で表す