ライバルに差を付けたい！HTMLコーダー必見のdl dt ddタグの基礎～応用

2019年01月22日

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

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

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

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

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

HTML4では、dl要素は「定義型リスト」であり、dt要素をdd要素として定義する、というルールでした。
ただ、HTML5勧告によれば表現が少し緩やかになり、dt要素をdd要素で説明する「記述リスト」に変更されました。
HTML5は人間にとっても、コンピュータにとってもわかりやすいことを指針としているので、コードを見ただけでもその定義が見えるように格式ばったものを取り払ったと思われます。

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

MAシェアと国産MAツールランキングを紹介

資料を無料ダウンロード

dl,dt,ddタグの正しいマークアップ方法

dl要素の内容にはdt要素が1つ以上先に、dd要素が1つ以上続いてその後に記述されなければなりません。

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

また、必ずしもdt要素とdd要素は1つの対でなくとも構いません。

<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dd>オレンジジュースなど</dd>
</dl>


<dl>
<dt> ソフトドリンク</dt>
<dt>ノンアルコールビール</dt>
<dd>未成年者が飲むこと可</dd>
</dl>

dl要素を入れ子構造にすることもできます。

<dl>
  <dt>ソフトドリンク</dt>
    <dd>紅茶やコーヒー・果物ジュースなど
      <dl>
        <dt>アイスコーヒー</dt>
        <dd>冷やしたコーヒー飲料</dd>
　　</dl>
  </dd>
</dl>

スタイルシートで横並びにする

dt要素とdd要素には改行が入ります。改行しないようにするcompact属性はHTML5では廃止されています。
デザインをスタイルシートで一元的に管理する流れが波及したのでしょう。

dl要素を横並びにするには以下のようにCSSで調整します。

[HTML]

<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dt> お酒</dt>
<dd>アルコール入り飲料</dd>
<dd>20歳未満は飲めない飲料</dd>
<dt>炭酸飲料</dt>
<dd>炭酸ガスの入った飲料</dd>
</dl>

[CSS]

dt {
	    /左に寄せる/
	    float: left ;
	    /後続の左寄せを解除/
	    clear: left ;
	    margin-right: 0.5em ;
	    width: 120px ;
}

dd {
	    float: left ;
	    margin-left: 1em ;
}

dd要素にclearを指定すると、dd要素が複数連なるときに左寄せが崩れてしまいます。dt要素にwidthを指定することによって、dd要素の頭を揃えることができます。

dl要素ごと横に並べる画像のアーカイブ

続いてdl要素ワンセットで左寄せにして、横に並べてみます。

[CSS]

 img {
	     width: 250px ;
	     height: 187px ;
}

dl {
	    float: left ;
	    padding-right: 2px ;
	    text-align: center ;
}

dt {
	    float: left ;
	    clear: left ;
	    width: 250px ;
	    height: 1.6em ;
	    background-color: #8F82F8 ;
	    font-weight: bold ;
}

dd {
	    margin-left: 0px ;
	    width: 250px ;
	    height: 187px ;
}

HTMLタグでは、dd要素に画像を入れています。

[HTML]

<dl>
<dt>ピンク色のバラ</dt>
<dd><img src="image/bara_01.jpg" alt="" /></dd>
</dl>
<dl>
<dt>白いバラ</dt>
<dd><img src="image/bara_02.jpg" alt="" /></dd>
</dl>
<dl>
<dt>赤いバラ</dt>
<dd><img src="image/bara_03.jpg" alt="" /></dd>
</dl>

スタイルシートでdl要素ごと左へフロートしていきます。あとは追加すれば右側に次々とアーカイブされて行きます。liタグで起きがちなテキストの回り込みも、dl要素がdt要素とdd要素でワンセットになっていることを利用し、シンプルなマークアップができます。

インラインフレーム状の「お知らせ」風ウインドウの作り方

dt要素とdd要素にデフォルトで改行が入ることを利用して、インラインフレーム状の「お知らせ」風ウインドウを作ってみます。

[CSS]

dl {
	    width: 450px ;
	    height: 10em ;
	    padding: 0px 1em ;
	    text-align: center ;
	    overflow: auto ;
}

dt {
	    width: 450px ;
	    height: 1.6em ;
	    padding: 0px 1em ;
	    background-color: #8F82F8 ;
}

dd {
	    margin-left: 0px ;
	    width: 450px ;
	    padding: 0px 1em ;
	    font-size: 0.9em ;
	    text-align: left ;
	    background-color: #FDF6DF ;
}

dl要素はデフォルトCSSでは display: block; ですので、サイズを指定して内包するdt要素とdd要素の余剰エリアをスクロールさせます（overflow: auto）。
内容は、用語(dt)とその説明(dd)となりますので、HTML5の定義とフィットします。

[HTML]

<dl>
<dt>平家物語</dt>
<dd>祇園精舎の鐘の声、諸行無常の響きあり、沙羅双樹の花の色、盛者必衰（じょうしゃひっすい）の理（ことわり）をあらはす。驕れる者久しからず、ただ春の夜の夢の如し。猛き人もつひには滅びぬ、ひとへに風の前の塵に同じ。 <br>

遠く異朝（いちょう）をとぶらふに、秦の趙高（ちょうこう）、漢の王莽（おうもう）、梁（りょう）の朱い（しゅい）、唐の禄山（ろくざん）、これらは皆旧主先皇（きゅうしゅせんこう）の政（まつりごと）にも従はず、楽しみを極め、諌め（いさめ）をも思ひ入れず、天下の乱れん事をも悟らずして、民間の憂ふる所を知らざりしかば、久しからずして亡じにし者どもなり。

祇園精舎の鐘の声、諸行無常の響きあり、沙羅双樹の花の色、盛者必衰（じょうしゃひっすい）の理（ことわり）をあらはす。驕れる者久しからず、ただ春の夜の夢の如し。猛き人もつひには滅びぬ、ひとへに風の前の塵に同じ。  </dd>
</dl>

「平家物語」出典：
http://www5f.biglobe.ne.jp/~mind/knowledge/japan3/heike001.html

定義リストとして利用する

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

[HTML]

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

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

まとめ

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

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

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

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

HTMLについてさらにチェック

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

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