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

更新日: 2020年09月17日

dl dt ddを定義リストとして利用する

HTML5において、dl要素は用語(dt)を説明(dd)する記述リストとして定義が変更になりました。dl要素を定義リストとして利用する場合は、dt要素にdfn要素を内包させます。

[HTML]

<dl>
<dt><dfn>定義する用語</dfn></dt>
<dd>用語の定義</dd>
</dl>

一般的なブラウザでは定義する用語はイタリックになります。

正しいdl要素でマークアップをしよう

dl要素も含めてul、olなどのリスト系タグは、マーカーを非表示にしたり左寄せにしたりスタイルシートで成形することが可能です。
単純にディスプレイ表示を考えれば、厳格な定義を多少無視しても成り立ってしまうこともあります。
ユーザーインターフェイス（UI）に問題がなくとも、コンピュータによる解析が難しいといった問題が出てきてしまいます。

HTML5策定の目的として、人間にもコンピュータにもやさしい構造を作るということがあります。ここで言うコンピュータとは検索エンジンや検索クローラーなどのサーバサイドの技術です。
実際にGoogleはウェブサイトの「意味」「関連付け」を読解する方向に加速しており、それがそのままSEOに繋がります。
dt要素やdd要素をレイアウト的に使うだけで意味が破綻していれば、Webサイトの信頼性は落ちてしまいます。

一つのdl要素に複数のdt要素を入れることは、文法的には合っています。
しかしきちんとdd要素で説明できていなければ、人間には伝わりにくく、コンピュータにとっても関連付けで戸惑うことになります。

dl要素には、ul、olにはない用語と説明（1対1でなくても良い）の組み合わせ、tableタグに引けをとらないレイアウト性があります。
論理的で美しいマークアップに利用していきましょう。

デザイナー・ディレクターにおすすめ

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

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

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

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

非エンジニアも知っておきたい！HTMLとCSSの基礎知識

WebやITを取り扱う仕事の中でたびたび耳にする「HTML」と「CSS」という言葉。聞いたことはあるけど、いまいちよくわからない人も多いでしょう。エンジニアでなけれWebサイトの制作や運営はCMS（コンテンツ管理システム）に任せることができますが、それでもHTMLとCSSの仕組みを知っているといろいろな面で便利ですし、Webサイト運用にも自信を持てるようになります。今回は非エンジニアでも覚えておきたい、HTMLとCSSの基礎について解説します。