<dl> - 定義リスト

概要

形式: <dl>～</dl>
サポート: https://caniuse.com/mdn-html_elements_dl
カテゴリ: フローコンテンツ
子要素がひとつ以上の 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>

表示

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

HTML

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

表示

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

HTML

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

初版:1996年9月10日最終更新:2017年12月31日

https://www.tohoho-web.com/html/dl.htm