HTMLコーダー必見のdl dt ddタグの基礎から応用まで！

HTMLのマークアップの際に言葉や文章などを分類し、情報としてまとめていく場面に多々出くわします。
dlタグは、dl、ddをともなって語句を定義する「定義リスト」でしたが、HTML5では「記述リスト」と定義が変わっています。
今回は、その違いや使い方などをご紹介します。

▼プログラミング不要でサイト更新できるCMS

圧倒的に使いやすい国産CMS｜ferret One

ノーコードでWebサイトやLPの作成・更新ができます

dl,dt,dd要素の基本をおさらい

dl要素はdt要素（用語）,dd要素（その用語に対する説明）をともなう記述型リストです。

<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dt> お酒</dt>
<dd>アルコール入り飲料</dd>
</dl>

dt要素とdd要素の間には、改行が入ります。HTML4ではcompactという属性で改行させなくすることができましたが、HTML5ではcompact属性は廃止となり、CSSで見た目を調整する作業が発生します。

HTML4では、「definition list(dl）= 定義リスト」「definition term(dt）= 定義する言葉」「definition description(dd）= 定義の説明」という形でdt要素をdd要素として定義する、というルールでした。HTML5においては「description list(dl）= 説明リスト」「description term(dt）= 説明する言葉」「definition / description(dd）= 定義分もしくは説明文」という形でdt要素をdd要素で説明する「記述リスト」に変更されました。

HTML5は人間にとっても、コンピュータにとってもわかりやすいことを指針としているので、コードを見ただけでもその定義が見えるように格式ばったものを取り払ったと思われます。現在のdl・dt・ddタグは「説明リスト」の書き方ができるようになりましたが、一方で従来通り「定義リスト」である辞書的な書き方でも問題ありませんので、単純に使い方が増えたという認識をすることも可能ですね。

SEO的には、olタグ、ulタグ（順序リスト・順不同リスト）に比べ、セマンティック（意味的）である配慮が必要となります。