HTML5

2020.11.14

【HTML5】dlタグの新しい使い方

WEBサイト制作をしていると、会社概要や商品名と価格といった部分を作る際にかなりの頻度で使用をする<dl>タグ。
実はこの<dl>タグ、2017年12月14日にW3C勧告があったHTML5.2で大幅にルールが変更され、より扱いやすいタグとなりました。

新しい使い方には注意が必要な部分もあるため、今回はHTML5.2からの<dl>タグの使い方についてご紹介します。

<dl>タグの新しい定義

従来までの<dl>タグは、定義する言葉を意味する<dt>タグと、その定義を説明する<dd>タグで構成される「定義リスト」の要素であるという扱いでした。
例えば「みかん : オレンジ色の果物」「赤 : 色のひとつ、暖色」のように、<dt>タグの言葉を<dd>タグで解説をする辞書的な書き方をするためのタグでした。

HTML5.2からは、説明する言葉を示す<dt>タグと、その説明文の<dd>タグに定義が変更され、<dt>タグの内容を<dd>タグで説明をする「説明リスト」となりました。
「説明リスト」がどのようなものかというと、「今日の予定 : 映画を見に行く」「質問 : 回答」のように<dt>タグの内容を説明していれば問題がないリストであり、今までよりも自由に内容を書くことができるようになりました。

定義上では「説明リスト」となりましたが、従来通りに「定義リスト」としての書き方でも問題はありません。
ただし、検索エンジンは「定義リスト」なのか「説明リスト」なのかを判断することができないため、「定義リスト」として書く場合は下記のように<dfn>タグで囲み「定義リスト」であることを示す必要があります。

<dl>
	<dt><dfn>みかん</dfn></dt>
	<dd>オレンジ色の果物</dd>
</dl>

参考サイト:https://www.w3.org/TR/html52/changes.html

<dl>タグの直下に<div>タグを入れることについて

従来では<dl>タグの直下に入れられる要素は<dt>タグと<dd>タグのみという取り決めでしたが、HTML5.2では新たに<div>タグを入れることも許容されました。
ただし、<dl>タグ、<dt>タグ、<dd>タグの代わりに使用できるようになった訳ではなく、<dt>タグと<dd>タグをグルーピングする要素として使用できるようになりました。

<!-- NG -->
<!-- dlタグで囲まれていない -->
<div>
	<dt>名前</dt>
	<dd>テスト 太郎</dd>
	<dt>性別</dt>
	<dd>男性</dd>
</div>
<!-- dlタグの中にdt要素が含まれていない -->
<dl>
	<div>名前</div>
	<dd>テスト 太郎</dd>
	<div>性別</div>
	<dd>男性</dd>
</dl>

<!-- OK -->
<dl>
  <div>
    <dt>名前</dt>
    <dd>テスト 太郎</dd>
  </div>
  <div>
	<dt>性別</dt>
	<dd>男性</dd>
  </div>
</dl>

ここでのもう一つの注意点は、「グルーピングする」ことが許容されているため、<div>タグの中身も1つ以上の<dt>タグと1つ以上の<dd>タグで構成されていることが望ましいです。

参考サイト:https://html.spec.whatwg.org/

<dl>タグに<div>タグを使うと、今まで難しかったレイアウトの作成やflexを使った横並びをより簡単に作ることができるのでとても便利です!
ぜひご活用ください!

関連記事

  • 2021.02.26

    【HTML5】SEO対策に効果的なメタタグとは?

    HTML5

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • フォーム作成に役立つ擬似要素と擬似クラス

    2021.01.27

    【CSS】便利でユーザーにもわかりやすいフォーム作成に役立つ擬似要素と擬似クラス

    CSS

    HTML5

おすすめ記事

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • 2020.12.19

    PowerPointで目次を簡単に作る方法【スライド内リンクを設定する方法も紹介】

    その他

  • 2020.11.28

    Basic認証の設定方法と注意点

    その他

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design