<dfn>: 定義要素
HTML の定義要素 (<dfn>) は、定義句や文の文脈の中で定義している用語を示すために用いられます。 <dfn> の直近の祖先である <p> 要素、 <dt>/<dd> の組み合わせ、 <section> 要素が用語の定義とみなされます。
試してみましょう
| コンテンツカテゴリー | フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ、ただし <dfn> 要素を子孫にしてはいけません。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | term (en-US) |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | HTMLElement |
属性
使用上のメモ
<dfn> 要素の使用については、完全に明らかになっていない側面がいくつかあります。ここでそれらを説明します。
定義される用語の指定
定義される用語は、以下の規則に従います。
<dfn>要素にtitle属性がある場合、title属性の値が定義される用語とみなされます。その要素の中の文字列もその用語でなければなりませんが、略語 (おそらく<abbr>を使用) や、用語のその他の形でも構いません。<dfn>が単一の子要素を持ち、自分自身には何も文字列がなく、かつその子要素がtitle属性を持つ<abbr>要素である場合は、<abbr>要素のtitleの値が定義する用語です。- それ以外では、
<dfn>要素の文字列コンテンツが定義される用語です。これは以下の最初の例で示します。
メモ: もし <dfn> 要素に title 属性があれば、それが定義する用語であり、それ以外の文字列ではありません。
<dfn> 要素へのリンク
例
様々な利用シナリオの例をいくつか見てみましょう。
基本的な用語の識別
この例は、定義の中の用語の位置を識別するために素の <dfn> 要素を使用しています。
HTML
<p>The <strong>HTML Definition element</strong>
(<strong><dfn><dfn></dfn></strong>) is used to indicate the
term being defined within the context of a definition phrase or
sentence.</p>
<dfn> 要素に title がないので、 <dfn> 要素自身の文字列コンテンツが定義される用語として使用されます。
結果
このブラウザーでは、このように描画されます。
定義へのリンク
定義へのリンクを追加するには、いつも通りの方法で <a> 要素を使ってリンクを作成します。
HTML
<p>The <strong>HTML Definition element</strong>
(<strong><dfn id="definition-dfn"><dfn></dfn></strong>) is
used to indicate the term being defined within the context of a
definition phrase or sentence.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece
donan, Latine voluptatem vocant. Confecta res esset. Duo Reges:
constructio interrete. Scrupulum, inquam, abeunti; </p>
<p>Negare non possum. Dat enim intervalla et relaxat. Quonam modo?
Equidem e Cn. Quid de Pythagora? In schola desinis. </p>
<p>Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum
est igitur, quid sit voluptas; Quid enim? Non est igitur voluptas
bonum. Urgent tamen et nihil remittunt. Quid enim possumus hoc
agere divinius? </p>
<p>Because of all of that, we decided to use the
<code><a href="#definition-dfn"><dfn></a></code> element for
this project.</p>
ここで id 属性の "definition-dfn" の値をリンク先として使用して、定義を見ることができます。その後で、 <a> の href 属性を "#definition-dfn" に設定して、定義に戻るリンクを設定します。
結果
結果のコンテンツはこのようになります。
略語と定義の両方の使用
場合によっては、用語を定義する際に略語を使用したくなる場合もあるでしょう。これは <dfn> と <abbr> 要素を組み合わせて、このように実現できます。
HTML
<p>The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn>
is among the most productive scientific instruments ever constructed.
It has been in orbit for over 20 years, scanning the sky and
returning data and photographs of unprecedented quality and
detail.</p>
<p>Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has
arguably done more to advance science than any device ever built.</p>
<abbr> 要素が <dfn> の中で入れ子になっています。前者は用語が略語 ("HST") であることを示し、完全な用語 ("Hubble Space Telescope") を title 属性で定義します。後者は略語が定義される用語であることを表します。
結果
上記のコードの出力はこのようになります。
仕様書
| Specification |
|---|
| HTML Standard # the-dfn-element |
ブラウザーの互換性
BCD tables only load in the browser