最終更新日 2021年4月7日

dl要素

dl要素は、「用語とその説明」「質問とその答え」「担当者とその役割」など、名前とその説明との組み合わせによる形式で連続して表示される説明リストを示します。各グループには、1つ以上の名前と、1つ以上の説明の両方またはどちらか一方が含まれます。

dl要素は、Flowコンテンツの記述箇所で使用できます。

HTML5では、1つのdl要素内で、1つの名前に対応するdt要素は1つにするべきとされています。

HTML5での変更点

・dl要素のcompact属性は廃止されました。代わりにCSSを使います。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ	省略不可	Flowコンテンツを子にできる要素	dt、dd

属性	値	説明
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>マクドエイド</title>
  </head>
  <body>
    <p>マクドエイドの朝のメニューです。</p>
    <dl>
      <dt>ソーセージマフィン</dt>
      <dd>焼きたてのイングリッシュマフィンに香るほのかなバターの風味が特徴です。</dd>
      <dt>エッグマフィン</dt>
      <dd>タマゴのしっとりした感触がチーズと絶妙なハーモニーを奏でます。</dd>
      <dt>ホットドッグ</dt>
      <dd>パリっとした食感がウリのあらびきポークソーセージを使用してます。</dd>
    </dl>
  </body>
</html>

参考文献：W3C HTML5「4.5.8 The dl element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。