HTML辞典 dl要素,dt要素,dd要素の解説

用語と説明のリストを作成するdl（ディスクリプション）タグ,dt（ディスクリプション・ターム）タグ,dd（ディフィニション・ディスクリプション）タグの使用法について掲載

HTML5

対応ブラウザ
カテゴリー・コンテンツモデル
書式・概要
- グローバル属性
使用方法

対応ブラウザ

カテゴリー・コンテンツモデル

	カテゴリー	コンテンツモデル
dl要素（定義リスト）	・フローコンテンツ dt要素とdd要素のグループを1組以上含む場合はパルパブルコンテンツ	dt要素と、続くdd要素のグループが必要。
dt要素（語句を表す）	なし	フローコンテンツ。ただし、header要素、footer要素、セクショニングコンテンツ、ヘディングコンテンツを子孫湯尾祖に持つことはできない。
dd要素（説明分を表す）	なし	フローコンテンツ

書式・概要

ブロックレベル要素

<dl>
    <dt>用語1</dt>
    <dd>
　　用語1の説明
    </dd>
    <dt>用語2</dt>
    <dd>
　　用語2の説明
    </dd>
    ・
　　・
　　・
</dl>

用語解説のような単語と説明をペアになっている形式のリストを作るには、dl要素、dt要素、dd要素を使用します。リスト全体を<dl>～</dl>で囲い、その内部にはdt要素（用語）とdd要素（説明）をペアにしたものを必要なだけ配置できます。dt要素で記述された語句に対する説明文は、dt要素の後続のdd要素で必ず記載しなければなりません。また、1つのdl要素に対して、同じ語句のdt要素を複数内包するもの好ましくはありません。

一般的なブラウザでは、<dd>～</dd>の範囲がインデントされて表示されます。これらの要素は「用語と説明」に限らず、「質問とその回答」「キャッチコピーと詳しい説明」のようなペアとなる内容に対しても応用的に使用できます。

<dt>と<dd>は連続して複数配置できます、各ペアは<div>グループにしておくとCSSで表示指定がしやすくなります。

グローバル属性

HTML共通で指定できるグローバル属性について

使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
    <meta charset="uft-8"><!- 文字コード指定 ->
  </head>
  <body>
      <dl>
    　　　　<dt><p>Apahceとは</p></dt>
           <dd>
　　        Apache HTTP Server（アパッチ エイチティーティーピー サーバ）は、Apache License2.0の条件でリリースされるフリーでオープンソースのクロスプラットフォームのWebサーバソフトウェアである。
           </dd>
           <dt><p>Apache Tomcatとは</p></dt>
           <dd>
　　        Java ServletやJavaServer Pages (JSP) を実行するためのWebコンテナ（サーブレットコンテナ、サーブレットエンジン）である。Apache License 2.0を採用したオープンソースソフトウェア。
           </dd>
      </dl>
  </body>
</html>

実行サンプル

chromeブラウザ実行結果