<dfn>: 定義要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

属性

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

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

使用上のメモ

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

定義される用語の指定

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

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

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

<dfn> 要素へのリンク

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

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

例

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

基本的な用語の識別

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

HTML

html
<p>
  The <strong>HTML Definition element (<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

html
<p>
  The
  <strong>HTML Definition element (<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>
  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

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 属性で定義します。後者は略語が定義される用語であることを表します。

結果

技術的概要

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

仕様書

Specification
HTML
# the-dfn-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報