<dl> - 定義リスト

トップ > HTMLリファレンス > <dl>

概要

形式
<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>
表示
HTML
HyperText Markup Language の略で・・・
WWW
World Wide Web の略で・・・

コンパクト表示

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

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

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

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

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

HTML
<style>
dt { margin-top: 0.5em; font-weight: bold; }
</style>
表示
HTML
HyperText Markup Language の略で・・・
WWW
World Wide Web の略で・・・

<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>

関連項目

<dt><dd>

リンク


Copyright (C) 1996-2017 杜甫々
初版:1996年9月10日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/dl.htm