説明リスト要素のdlタグの中にdivタグを入れれる事をすっかり忘れていた件について【HTML】

今回は、表題の通り説明リスト要素のdlタグの中にdivタグを入れれる件についてです。
昔からコーディングをしていると、頭の中で新しい使い方にアップデートされていない事や、分かっていてもつい昔のやり方になってしまったりするかと思います。
あらためて説明リスト要素であるdlタグの使い方についてまとめていきます。

説明リスト要素dlとは

dl要素は、昔は「定義リスト」という扱いで定義する言葉を意味するdtタグと、定義を説明するddタグで構成されていました。
HTML5.2からは「説明リスト」と意味が変更になり、説明する言葉を意味するdtタグと説明内容を意味するddタグの構成となって以前よりも扱いやすくなっています。(dl要素の直下にはdtタグ、ddタグ、divタグが使えるようになりました)

以前のように「定義リスト」として使用する場合は、定義リストである事を示すdfnタグを使用する必要があります。
dfnタグについては、定義語を表すdfnタグの使い方【HTML】をご覧ください。

dl要素の使い方

dl要素の使い方は以下のようになります。

<dl>
    <dt>説明する言葉</dt>
    <dd>説明する内容</dd>
</dl>

上記のように、dtタグとddタグを1つのペアとして使用する事が多いかと思います。
また、以下のように複数のdtタグ・ddタグの組み合わせや、複数のdtタグに対して1つのddタグ、1つのdtタグに対して複数のddタグという使い方も可能です。

<!-- 複数のdtタグ・ddタグの組み合わせ -->
<dl>
    <dt>説明する言葉</dt>
    <dd>説明する内容</dd>
    <dt>説明する言葉</dt>
    <dd>説明する内容</dd>
    <dt>説明する言葉</dt>
    <dd>説明する内容</dd>
</dl>

<!-- 複数のdtタグに対して1つのddタグ -->
<dl>
    <dt>説明する言葉</dt>
    <dt>説明する言葉</dt>
    <dd>説明する内容</dd>
</dl>

<!-- 1つのdtタグに対して複数のddタグ -->
<dl>
    <dt>説明する言葉</dt>
    <dd>説明する内容</dd>
    <dd>説明する内容</dd>
</dl>

dl要素の中にdivタグを入れる

HTML5.2から「説明リスト」に変更になった際に、dl要素の中にはdtタグ・ddタグの他にdivタグも入れれるようになりました。divタグを使える事によってデザインのレイアウトを簡単に再現できるよので活用していきたいですね！

<dl>
    <div>
        <dt>説明する言葉</dt>
        <dd>説明する内容</dd>
    </div>
    <div>
        <dt>説明する言葉</dt>
        <dd>説明する内容</dd>
    </div>
    <div>
        <dt>説明する言葉</dt>
        <dd>説明する内容</dd>
    </div>
</dl>

さいごに

いかがでしたでしょうか。
今回は、説明リスト要素のdlタグについて解説しました。
各要素もバージョン(年代)によって使い方が変更になったりする場合がありますので、たまにチェックしてみるとおいいかと思います。