【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を使った横並びをより簡単に作ることができるのでとても便利です！
ぜひご活用ください！

この記事をシェアする