このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<dfn>: 定義要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<dfn> はHTML の要素で、定義句や文の文脈の中で定義している用語を示すために用いられます。祖先である<p> 要素、<dt>/<dd> の組み合わせ、または直近の<section> 要素が用語の定義とみなされます。
試してみましょう
<p> A <dfn>validator</dfn> is a program that checks for syntax errors in code or documents.</p>/* stylelint-disable-next-line block-no-empty */dfn {}属性
この要素の属性はグローバル属性を含みます。
title 属性は後述のとおり、通常と異なる特別な意味合いを持ちます。
使用上のメモ
<dfn> 要素の使用については、必ずしも明確に分かりやすくない側面がいくつかあります。ここでそれらを説明します。
定義される用語の指定
定義される用語は、以下の規則に従います。
<dfn>要素にtitle属性がある場合、title属性の値が定義される用語とみなされます。その要素の中の文字列もその用語でなければなりませんが、略語（おそらく<abbr>を使用）や、用語のその他の形でも構いません。<dfn>が単一の子要素を持ち、自分自身には何も文字列がなく、かつその子要素がtitle属性を持つ<abbr>要素である場合は、<abbr>要素のtitleの値が定義する用語です。- それ以外では、
<dfn>要素の文字列コンテンツが定義される用語です。これは以下の最初の例で示します。
メモ:もし<dfn> 要素にtitle 属性があれば、それが定義する用語であり、それ以外の文字列ではありません。
<dfn> 要素へのリンク
<dfn> 要素にid 属性をつけた場合は、<a> 要素を使用してそこにリンクすることができます。用語の使用時にはそのようなリンクを使用して、用語のリンクをクリックすることで読者が用語の定義にすばやく移動できるようにしてください。
これは以下の定義へのリンクの例で示します。
例
様々な利用シナリオの例をいくつか見てみましょう。
基本的な用語の識別
この例は、定義の中の用語の位置を識別するために素の<dfn> 要素を使用しています。
HTML
<p> The <strong>HTML Definition element (<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 (<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> 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 属性で定義します。後者は略語が定義される用語であることを表します。
結果
技術的概要
| コンテンツカテゴリー | フローコンテンツ,記述コンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ、ただし<dfn> 要素を子孫にしてはいけません。 |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | term |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | HTMLElement |
仕様書
| Specification |
|---|
| HTML # the-dfn-element |