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

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

HTML5

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

対応ブラウザ

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

	カテゴリー	コンテンツモデル
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で表示指定がしやすくなります。

グローバル属性

グローバル属性は、すべての要素に指定できる共通の属性のことです。

accesskey（アクセスキー）

要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。

autocapitallze

入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します

値	内容
offまたはnone	自動的な大文字化は指定しない
onまたはsentences	最初の文字を大文字化する
words	各語の最初の文字を大文字化する
characters	すべての文字を大文字化する

class（クラス）

要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。

contenteditable（コンテント・エディタブル）

要素の内容が閲覧者による編集可能かどうか指定します。

値	内容
trueまたは、空	閲覧者による編集可能。
false	閲覧者による編集不可。

data-

カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。

dir（ディレクショナリティ）

要素の内容の書字方向（文字を書き進める方向）を指定します。

値	内容
ltr	テキストを左から右へ書き進める。「Left to Righ」の略
rtl	要素は編集不可。「Right to Left」の略
auto	ユーザーエージェントによって自動的に書字方向を決める

draggable

Drag and Drop APIを使用して要素をドラッグすることができるか指定します。

値	内容
	テキストを左から右へ書き進める。「Left to Righ」の略
auto	ユーザーエージェントによって自動的に書字方向を決める

hidden（ヒドゥン）

要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。（商品IDやユーザーID）

id（アイディー）

要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。

空白文字は使用できません。

lang（ランゲージ）

要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。

例：lang=”ja”

spellcheck（スペルチェック）

要素の内容に対するスペルチェックの可否を指定します。

true	スペルチェックをします。
false	スペルチェックをしません。

style（スタイル）

要素に直接スタイルシートを指定します。

※style属性でスタイルを指定する方法はあまり推奨されていません。

tabindex（タブインデックス）

「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。

title（タイトル）

要素に補足情報を加えます

translate（トランスレート）

翻訳対象にするかどうかを指定します。

値	内容
yes	翻訳対象とする
no	翻訳非対象とする

イベントハンドラ属性

イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。

onclick

要素をクリックしたときにスクリプトを実行します。

oninput

入力コントロールにデータを入力したときにスクリプトを実行します。

onsubmit

入力コントロールからデータを送信するときにスクリプトを実行します。

使用方法

<!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実行サンプル