<dl> 定義リストを作成する

取り扱い 現行の標準
カテゴリ フロー・コンテンツ
1個以上の子要素を含む場合、パルパブル・コンテンツ
親にできる要素 フロー・コンテンツを受け入れる要素
子にできる要素 <dt>と、それに続く<dd>。任意で<script><template>
対応ブラウザ caniuseで確認

<dl>タグの説明

<dl>は、定義リストを表すために使用します。「dl」は「Definition List」の頭文字を取った略称です。

定義リストとは、いわゆるキーワードと解説がペアになった単語帳や名簿のようなものです。これを作成する場合、まず初めに<dl>でリストを開始し、<dt>で用語を設定し、それに続く<dd>で説明や解説を行います。

<dl>タグの特徴

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
  • 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<dl>に指定できる主な属性

グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<dd>の使い方とサンプル

定義リストを作成するには三つのタグを覚える必要があります。まずは簡単なサンプルを作って、そこからスタイルシートで見栄えを調整していきましょう。

HTML
<dl>
	<dt>ファミコン</dt>
	<dd>1983年 7月発売</dd>
	<dt>PCエンジン</dt>
	<dd>1987年 10月発売</dd>
	<dt>メガドライブ</dt>
	<dd>1988年 10月発売</dd>
	<dt>スーパーファミコン</dt>
	<dd>1990年 11月発売</dd>
</dl>
表示確認
ファミコン
1983年 7月発売
PCエンジン
1987年 10月発売
メガドライブ
1988年 10月発売
スーパーファミコン
1990年 11月発売

<dl>に関連するHTMLタグ

リストを作成する要素
<ul> 順序のないリストを作成する
<ol> 順序のあるリストを作成する
<dl> 定義リストを作成する
<dt> 定義リストの用語を表す
<dd> 定義リストの中で説明文を記載する
<li> リストの項目を作成する
<menu> ユーザーが操作可能なメニューを提供する
<menuitem> コンテキストメニューの項目を作成する