dl 要素

dl 要素は定義リストを表します。定義リストとは、ある語句と、それに対する説明文を組み合わせてリストにしたものです。

dl 要素内の dt 要素、dd 要素の並びには意味があります。dt 要素で記述された語句に対する説明文は、dt 要素に後続する dd 要素で必ず言及されていなければなりません。また、1つの dl 要素に対して、同じ語句を持った複数の dt 要素を内包するのは好ましくありません。使用する場合は注意しましょう。

また、HTML Standard においては dl 要素の子要素として div 要素を持つことが許されるようになりました。また、dl 要素は、会話をマークアップするのには不適切とされています。

詳しくはサンプルソースをご確認ください。

<dl>
 <dt><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn></dt>
 <dd>
  <p>
   ウェブ上の文書を記述するためのマークアップ言語である。
   文章の中に記述することでさまざまな機能を記述設定することができる。
  </p>
  <p>
   …省略…
  </p>
 </dd>
 <dt><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn></dt>
 <dd>
  <p>
   HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。
  </p>
 </dd>
</dl>

<!-- 文法上は間違いではありませんが、意味論的に妥当でないマークアップです -->
<dl>
 <dt><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn></dt>
 <dt><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn></dt>
 <dd>
  <p>
   ウェブ上の文書を記述するためのマークアップ言語である。
   文章の中に記述することでさまざまな機能を記述設定することができる。
  </p>
 </dd>
 <dd>
  <p>
   HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。
  </p>
 </dd>
</dl>
<!-- dt 要素が連続していることが問題なのではなく、
     dt 要素に対する dd 要素が正しく対応していないことが問題です -->

<!-- 文法上、妥当でないマークアップです -->
<dl>
 <dt><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn></dt>
</dl>

<!-- dl 要素内に、同じ語句を持った複数の dt 要素を置くべきではありません -->
<dl>
 <dt>サッカー</dt>
 <dd>…</dd>
 <dt>野球</dt>
 <dd>…</dd>
 <dt>サッカー</dt>
 <dd>…</dd>
</dl>

<!-- dl 要素内で dl 要素を使うことはできますが、dd 要素内でのみ使用可能です -->
<dl>
 <dt><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn></dt>
 <dd>
  <p>ウェブ上の文書を記述するためのマークアップ言語である。</p>
  <p>文章の中に記述することでさまざまな機能を記述設定することができる。</p>
  <p>最新の仕様として、HTML5 が策定中である。</p>
  <dl>
   <dt><dfn><abbr title="HyperText Markup Language">HTML</abbr>5</dfn></dt>
   <dd>
    <p>HTML5 に関する説明…</p>
   </dd>
  </dl>
 </dd>
</dl>

<dl>
 <div>
  <dt>最終更新日時</dt>
  <dd>2019年10月20日</dd>
 </div>
 <div>
  <dt>推定読了時間</dt>
  <dd>30分</dd>
 </div>
 <div>
  <dt>著者</dt>
  <dd>日本太郎</dd>
  <dd>日本次郎</dd>
 </div>
</dl>