<dl> - 定義リスト - とほほのWWW入門

形式: <dl>～</dl>
サポート: LS / H2 / e2 / Ch1 / Fx1 / Sa1 / Op1 / N2 / i1
カテゴリ: フローコンテンツ
子要素がひとつ以上の name-value グループを持つ場合はパルパブルコンテンツ
親要素: フローコンテンツを子要素に持てるもの
子要素: ひとつ以上の dt要素と、それに続くひとつ以上の dd要素からなるグループを 0個以上持つ。スクリプトサポート要素を含むことも可能。
または、
ひとつ以上の div 要素。スクリプトサポート要素を含むことも可能。
タグの省略: 開始タグ:必須 / 終了タグ:必須
属性: グローバル属性

説明

dl は Definition List(定義リスト)の略です。<dl>～</dl> の間に、<dt>(Definition Term)で定義する用語を、<dd>(Definition Description)で用語の説明を行います。

属性

グローバル属性: 詳細はグローバル属性を参照してください。
compact: [非推奨] H2-H4T/e4-10/N2-N4; リストを極力コンパクトな形式で表示します。利用例は下記を参照してください。この属性は、HTML5 では廃止されました。Internet Explorer 4 でサポートされていましたが、Internet Explorer 11 ではサポートをやめたようです。

使用例

HTML

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language の略で・・・</dd>
  <dt>WWW</dt>
  <dd>World Wide Web の略で・・・</dd>
</dl>

表示

コンパクト表示

compact 属性を指定すると、項目名が短い場合、説明が自動的に項目名と同じ行に表示されるようになります。

表示

CSS Cascading Style Sheets の略で・・・
Dynamic HTML
HTML や JavaScript などの技術を用いて・・・

※ スタイルシートを用いて擬似的に表示しています。

スタイルシートとのくみ合わせ

項目名を目立たせたい場合は、スタイルシートを用いると便利です。例えば、<head>～</head> の間に次のように指定することにより、すべての項目名を太字で、前の行と 0.5行スペースを空けて表示することができます。

HTML

<style>
dt { margin-top: 0.5em; font-weight: bold; }
</style>

表示

<div>との組み合わせ

HTML 5.2 や HTML Living Standard では、1つ以上の <dt> と、それに続く 1つ以上の <dd> を <div> でグルーピングすることができるようになりました。

HTML

<dl>
  <div>
    <dt>acronym</dt>
    <dt>abbr</dt>
    <dd>どちらも略語を...</dd>
  </div>
</dl>

<dl> - 定義リスト