<dd> …… 記述リストの値を表す
広告
<dd>タグは、dl要素で定義する記述リストの値を表す際に使用します。
dl要素で定義する記述リストは、「名前」と「値」の組み合わせのグループで構成されます。
「名前」とはリスト項目名のことで、一般的にはdt要素で定義します。
「値」とはリスト項目に関連付けられる記述のことで、一般的にはdd要素で定義します。
記述リストの「名前」と「値」の組み合わせの例を挙げるなら、用語と説明、質問と回答、メタデータ名と値などです。
dd要素は、説明、定義、値などを表します。
■使用例
以下のサンプルは、質問と回答のリストですが、
質問をdt要素、回答をdd要素でマークアップしています。
HTMLソース
<article>
<h1>よくある質問(FAQ)</h1>
<dl>
<dt>このウェブサイトは何ですか?</dt>
<dd>HTMLやCSSの早見表です。</dd>
<dt>誰が使いますか?</dt>
<dd>ウェブを学ぶ人やウェブをつくる人です。</dd>
<dt>どのように使いますか?</dt>
<dd>目的別やABC順で知りたい項目を探します。</dd>
</dl>
</article>
↓↓↓
ブラウザ上の表示
よくある質問(FAQ)
- このウェブサイトは何ですか?
- HTMLやCSSの早見表です。
- 誰が使いますか?
- ウェブを学ぶ人やウェブをつくる人です。
- どのように使いますか?
- 目的別やABC順で知りたい項目を探します。
■使用例
以下のサンプルは、dl要素で辞書のような英単語リストを作成しています。
英単語はdt要素とdfn要素を併用して示し、英単語の説明などはdd要素で示しています。
HTMLソース
<dl>
<dt><dfn>happiness</dfn></dt>
<dd class="pronunciation">/ˈhæpinəs/</dd>
<dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
<dd>幸せな状態。</dd>
<dd>幸運であること。 <q>Oh <b>happiness</b>! It worked!</q></dd>
<dt><dfn>rejoice</dfn></dt>
<dd class="pronunciation">/rɪˈdʒɔɪs/</dd>
<dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> 喜ぶ</dd>
<dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> (人を)喜ばせる</dd>
</dl>
↓↓↓
ブラウザ上の表示
- happiness
- /ˈhæpinəs/
- n.
- 幸福
- 幸運
Oh happiness! It worked!
- rejoice
- /rɪˈdʒɔɪs/
- v.intr. 喜ぶ
- v.tr. (人を)喜ばせる
※余談ですが、
上記サンプルでabbr要素としてマークアップされている略語の意味は以下の通りです。
- n. は、noun の略語で「名詞」を表します。
- v.intr. は、intransitive verb の略語で「自動詞」を表します。
- v.tr. は、transitive verb の略語で「他動詞」を表します。
■関連項目
広告