dl要素・dlタグとは

定義リスト・用語リストを表現する dl要素

自分はブロック要素かインライン要素かブロック要素
含むことができる要素型1つ以上の dt要素またはdd要素
名称の由来dl は definition lists (定義リスト) を省略したもの

dlリストとは何か 他のリストとの違いは何か

HTMLにおいてリストを示す要素は「順不動のリストを表すul要素」「序列のあるリストを示すol要素」「定義リストを示すdt要素」の大きく3つに分けられる。

dl要素は「用語(定義)」と「用語(定義)の説明文」の2つの組み合わせで利用されるタイプのリストである(辞書のような形式のデータで良く利用される)。

「用語(定義)」にはdt要素が、「用語(定義)の説明文」にはdd要素が利用される。dt要素またはdd要素以外の要素がdl要素の直下に存在することは文法的に正しくない。

HTML
<dl>
	<dt>id</dt>
	<dd>要素に名前を付ける。文章中で重複しないこと</dd>
	<dt>class</dt>
	<dd>要素に1つ、または複数の名前を付ける。文章中で重複しても良い</dd>
</dl>

内包される dt要素とdd要素について

「用語(定義)」を表現するdt要素は内部にインライン要素だけを含むことができる。ブロック要素は含むことができないので注意が必要である。

「用語(定義)の説明文」を表現するdd要素は内部にインライン要素とブロック要素を含むことができるので汎用性が高い。

dt要素とdd要素は必ず1対1で使う必要はない。1つのdt要素に対して複数のdd要素を対応させる使い方も問題無い。

HTML
<dl>
  <dt>ドリンクメニュー</dt>
  <dd>ビール</dd>
  <dd>ワイン</dd>
  <dd>オレンジジュース</dd>
</dl>

関連情報

コメントを残す

メールアドレスが公開されることはありません。