HTML の定義要素 (<dfn>) は、定義句や文の文脈の中で定義している用語を示すために用いられます。 <dfn> の直近の祖先である <p> 要素、 <dt>/<dd> の組み合わせ、 <section> 要素が用語の定義とみなされます。

機能的には、 <dfn> 要素が行うことはごくわずかであることに注意してください。 主な目的は、用語をマークするための意味付けマークアップの確立された形式を提供することです。 <span> 要素で専用のクラスを使用するのと同様のことができるだけで、機能的には大差ありません。

コンテンツカテゴリー フローコンテンツ記述コンテンツ、知覚可能コンテンツ
許可されている内容 記述コンテンツ、ただし <dfn> 要素を子孫にしてはいけません。
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素
許可されている ARIA ロール すべて
DOM インターフェイス HTMLElement

属性

この要素の属性はグローバル属性を含みます。

HTML5 においては、この要素の title 属性は後述のとおり、通常と異なる特別な意味合いを持ちます。

使用上の注意

<dfn> 要素の使用については、完全に明らかになっていない側面がいくつかあります。ここでそれらを説明します。

定義される用語の指定

定義される用語は、以下の規則に従います。

  1. <dfn> 要素に title 属性がある場合、 title 属性の値が定義される用語とみなされます。その要素の中の文字列もその用語でなければなりませんが、略語(おそらく <abbr> を使用)や、用語のその他の形でも構いません。
  2. <dfn> が単一の子要素を持ち、自分自身には何も文字列がなく、かつその子要素が title 属性を持つ <abbr> 要素である場合は、 <abbr> 要素の title の値が定義する用語です。
  3. それ以外では、 <dfn> 要素の文字列コンテンツが定義される用語です。これは以下の最初の例で示します。

もし <dfn> 要素に title 属性があれば、それが定義する用語であり、それ以外の文字列ではありません。

<dfn> 要素へのリンク

<dfn> 要素に id 属性をつけた場合は、 <a> 要素を使用してそこにリンクすることができます。 用語の使用時にはそのようなリンクを使用して、用語のリンクをクリックすることで読者が用語の定義にすばやく移動できるようにしてください。

これは以下の定義へのリンクの例で示します。

使用上の注意

  • <dfn> 要素は定義される用語を示すものです。用語の定義はその要素を含んでいる <p><section>、 または定義リスト関連要素(ふつうは <dt><dd> の組)の中で行ってください。
  • 定義される用語の値は、次の規則で決定されます。
    1. <dfn> 要素に title 属性がある場合は、その属性値が用語です。
    2. そうではなく、 title 属性を持つ <abbr> 要素のみを含む場合は、そちらの title 属性の値が用語です。これは後述の 略語と定義の両方の使用で示します。
    3. それ以外の場合、<dfn> 要素が含む文字列コンテンツが用語です。

様々な利用シナリオの例をいくつか見てみましょう。

基本的な用語の識別

この例は単に、定義の中の用語の位置を識別するために素の <dfn> 要素を使用しています。

HTML

<p>The <strong>HTML Definition element</strong>
(<strong><dfn>&lt;dfn&gt;</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">&lt;dfn&gt;</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">&lt;dfn&gt;</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 属性で定義します。後者は略語が定義される用語であることを表します。

結果

上記のコードの出力はこのようになります。

仕様書

仕様書 策定状況 コメント
HTML Living Standard
<dfn> の定義
現行の標準  
HTML5
<dfn> の定義
勧告  
HTML 4.01 Specification
<dfn> の定義
勧告  

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート 有り 有り1 有り 有り 有り
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本サポート 有り 有り 有り4 有り 有り ?

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: mfuji09, yyss, ethertank
 最終更新者: mfuji09,