HTML内で、任意の単語を定義できる辞書のような機能があるのはご存じですか？
HTMLの辞書機能とは？
今回は、dtタグの
・基本的な使い方
・定義リストの作り方（dlタグ・ddタグ）
について説明します。またdtタグで用語を定義するだけでなく、完璧な説明リストが作成できるよう、dlタグ、ddタグについても簡単に解説します！
目次
dtタグとは
dtタグの読み方
<dt>タグは、そのまま「ディーティータグ」と読みます。英語で”definition team”＝定義組という意味を持っています。
dtタグの説明
<dt>タグは、任意の言葉を定義語として登録できる機能で、説明リストを表す<dl>タグ・定義語を説明する<dd>タグとセットで使います。
dtタグで利用できる属性
dtタグではグローバル属性のみが使用可能です。ここでは汎用的なグローバル属性のみを記載しています。
| 属性 | 説明 |
|---|---|
| accesskey属性 | アクセスキーを指定する |
| autocapitalize属性 | キーボード入力時の自動大文字化の任意指定 |
| class属性 | 任意のクラス名を与える（複数要素で同クラス名使用可能） |
| contenteditable属性 | 要素内の編集を許可する |
| dir属性 | 文字の書字方向を指定する |
| draggable属性 | 要素をドラッグ可能にする |
| hidden属性 | 要素が無関係であることを指定する |
| id属性 | 任意のIDを与える（一つのHTML文書内で同一のidはひとつだけ：一意） |
| lang属性 | 要素内の言語を指定する |
| style属性 | スタイルシートを適用する |
| translate属性 | 要素内の翻訳を許可する |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
dtタグの基本的な使い方
dtタグの使い方
<dt>タグは定義語を設定するタグですが、単体のみでは<dt>タグが持つ力を発揮することができません。<dl>タグで説明リストを作成し、その中で定義語を説明する<dd>タグと一緒に使用することで、初めて意味を成すのです。
See the Pen
jOrpJRX by rabbittyu (@rabbittyu)
on CodePen.
説明リストの作り方は単純。まずは<dl>タグで、ここから説明リストになることを明示します。そして<dt>タグで定義したい言葉を囲い、その下に<dd>タグを記載して定義語を説明。
<dl>タグ内で囲われた要素はリストとして扱われるので、用語集としての働きがあるのです。また<dl>タグは用語集だけではなく、フォームの作成やQ&Aの作成にも用いられています。
応用編：柔軟な説明リストとその装飾方法
ではここで少し発展させた<dl>タグ・<dt>タグ・<dd>タグの使い方を解説します。
<dd>タグを複数使う
<dd>タグは複数使用することができます。<dt>タグの数と<dd>タグの数は、必ずしも対になっていなくても良いのです。
ただし複数<dd>タグを使うときは、それぞれの単語で同じように使うようにするのが良いでしょう。ここでは各マークアップ言語に対し、
- 何の頭文字をとっているのか
- 開発年やもとになった言語など、開発にまつわる情報
以上の2点を説明しています。
See the Pen
ExyewWo by rabbittyu (@rabbittyu)
on CodePen.
<dt>タグを複数使う
<dt>タグも同様に、複数使用することができます。
See the Pen
YzWOEGP by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回は<dt>タグの使い方を解説しました。
- <dt>タグは任意の単語を定義する
- <dt>タグは<dl>タグの中に入れ、定義した言葉の説明は<dd>タグで行う
- <dt>タグ・<dd>タグは複数ずつ使用することができる
以上3点がポイントになります。ただHTML文書内で説明リストを定義するだけでは殺風景なので、CSSとセットで使用するのが良いでしょう。
