HTML Tag Reference

dl 要素

定義リストを表す

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

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

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

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

dl 要素の仕様

カテゴリ

パルパブル・コンテンツとなるのは dt 要素と dd 要素のグループを 1組以上含む場合のみ

コンテンツモデル
  • 1つ以上の dt 要素と、後続する 1つ以上の dd 要素からなり、任意でスクリプト支援要素と混合される 0個以上のグループ
  • または、オプションでスクリプト支援要素と混合される、1つ以上の 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>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。