---
title: '<dfn>: 定義要素'
slug: Web/HTML/Element/dfn
tags:
  - HTML
  - HTML 文字レベルの意味付け
  - 'HTML:フローコンテンツ'
  - 'HTML:知覚可能コンテンツ'
  - 'HTML:記述コンテンツ'
  - Reference
  - ウェブ
  - リファレンス
  - 要素
translation_of: Web/HTML/Element/dfn
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML の定義要素</strong> (<strong><dfn>&lt;dfn&gt;</dfn></strong>) は、定義句や文の文脈の中で定義している用語を示すために用いられます。</span> <code>&lt;dfn&gt;</code> の直近の祖先である {{HTMLElement("p")}} 要素、 {{HTMLElement("dt")}}/{{HTMLElement("dd")}} の組み合わせ、 {{HTMLElement("section")}} 要素が用語の定義とみなされます。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-standard")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、ただし {{HTMLElement("dfn")}} 要素を子孫にしてはいけません。</td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>すべて</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素の属性は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を含みます。</p>

<p>HTML5 においては、この要素の {{htmlattrxref("title")}} 属性は後述のとおり、通常と異なる特別な意味合いを持ちます。</p>

<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>

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

<h3 id="Specifying_the_term_being_defined" name="Specifying_the_term_being_defined">定義される用語の指定</h3>

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

<ol>
 <li><code>&lt;dfn&gt;</code> 要素に {{htmlattrxref("title")}} 属性がある場合、 <code>title</code> 属性の値が定義される用語とみなされます。その要素の中の文字列もその用語でなければなりませんが、略語 (おそらく {{HTMLElement("abbr")}} を使用) や、用語のその他の形でも構いません。</li>
 <li><code>&lt;dfn&gt;</code> が単一の子要素を持ち、自分自身には何も文字列がなく、かつその子要素が <code>title</code> 属性を持つ {{HTMLElement("abbr")}} 要素である場合は、 <code>&lt;abbr&gt;</code> 要素の <code>title</code> の値が定義する用語です。</li>
 <li>それ以外では、 <code>&lt;dfn&gt;</code> 要素の文字列コンテンツが定義される用語です。これは{{anch("Basic identification of a term", "以下の最初の例")}}で示します。</li>
</ol>

<div class="note">
<p>もし <code>&lt;dfn&gt;</code> 要素に <code>title</code> 属性があれば、それが定義する用語であり、それ以外の文字列ではありません。</p>
</div>

<h3 id="&lt;dfn>_要素へのリンク"><code>&lt;dfn&gt;</code> 要素へのリンク</h3>

<p><code>&lt;dfn&gt;</code> 要素に {{htmlattrxref("id")}} 属性をつけた場合は、 {{HTMLElement("a")}} 要素を使用してそこにリンクすることができます。用語の使用時にはそのようなリンクを使用して、用語のリンクをクリックすることで読者が用語の定義にすばやく移動できるようにしてください。</p>

<p>これは以下の{{anch("Links to definitions", "定義へのリンク")}}の例で示します。</p>

<h2 id="Usage_notes_2" name="Usage_notes_2">使用上の注意</h2>

<ul>
 <li><code>&lt;dfn&gt;</code> 要素は定義される用語を示すものです。用語の定義はその要素を含んでいる {{HTMLElement("p")}}, {{HTMLElement("section")}}, または定義リスト関連要素 (ふつうは {{HTMLElement("dt")}} と {{HTMLElement("dd")}} の組) の中で行ってください。</li>
 <li>定義される用語の値は、次の規則で決定されます。
  <ol>
   <li><code>&lt;dfn&gt;</code> 要素に {{htmlattrxref("title")}} 属性がある場合は、その属性値が用語です。</li>
   <li>そうではなく、 {{htmlattrxref("title")}} 属性を持つ {{HTMLElement("abbr")}} 要素のみを含む場合は、そちらの title 属性の値が用語です。これは後述の {{anch("Using abbreviations and definitions together", "略語と定義の両方の使用")}}で示します。</li>
   <li>それ以外の場合、<code>&lt;dfn&gt;</code> 要素が含む文字列コンテンツが用語です。</li>
  </ol>
 </li>
</ul>

<h2 id="Examples" name="Examples">例</h2>

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

<h3 id="Basic_identification_of_a_term" name="Basic_identification_of_a_term">基本的な用語の識別</h3>

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

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;p&gt;The &lt;strong&gt;HTML Definition element&lt;/strong&gt;
(&lt;strong&gt;&lt;dfn&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;) is used to indicate the
term being defined within the context of a definition phrase or
sentence.&lt;/p&gt;</pre>

<p><code>&lt;dfn&gt;</code> 要素に <code>title</code> がないので、 <code>&lt;dfn&gt;</code> 要素自身の文字列コンテンツが定義される用語として使用されます。</p>

<h4 id="Result" name="Result">結果</h4>

<p>このブラウザーでは、このように描画されます。</p>

<p>{{EmbedLiveSample("Basic_identification_of_a_term", 650, 120)}}</p>

<h3 id="Links_to_definitions" name="Links_to_definitions">定義へのリンク</h3>

<p>定義へのリンクを追加するには、いつも通りの方法で {{HTMLElement("a")}} 要素を使ってリンクを作成します。</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;p&gt;The &lt;strong&gt;HTML Definition element&lt;/strong&gt;
(&lt;strong&gt;&lt;dfn id="definition-dfn"&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;) is
used to indicate the term being defined within the context of a
definition phrase or sentence.&lt;/p&gt;

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece
donan, Latine voluptatem vocant. Confecta res esset. Duo Reges:
constructio interrete. Scrupulum, inquam, abeunti; &lt;/p&gt;

&lt;p&gt;Negare non possum. Dat enim intervalla et relaxat. Quonam modo?
Equidem e Cn. Quid de Pythagora? In schola desinis. &lt;/p&gt;

&lt;p&gt;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? &lt;/p&gt;

&lt;p&gt;Because of all of that, we decided to use the
&lt;code&gt;&lt;a href="#definition-dfn"&gt;&amp;lt;dfn&amp;gt;&lt;/a&gt;&lt;/code&gt; element for
this project.&lt;/p&gt;</pre>

<p>ここで {{htmlattrxref("id")}} 属性の <code>"definition-dfn"</code> の値をリンク先として使用して、定義を見ることができます。その後で、 <code>&lt;a&gt;</code> の {{htmlattrxref("href", "a")}} 属性を <code>"#definition-dfn"</code> に設定して、定義に戻るリンクを設定します。</p>

<h4 id="Result_2" name="Result_2">結果</h4>

<p>結果のコンテンツはこのようになります。</p>

<p>{{EmbedLiveSample("Links_to_definitions", 650, 300)}}</p>

<h3 id="Using_abbreviations_and_definitions_together" name="Using_abbreviations_and_definitions_together">略語と定義の両方の使用</h3>

<p>場合によっては、用語を定義する際に略語を使用したくなる場合もあるでしょう。これは <code>&lt;dfn&gt;</code> と {{HTMLElement("abbr")}} 要素を組み合わせて、このように実現できます。</p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;p&gt;The &lt;dfn&gt;&lt;abbr title="Hubble Space Telescope"&gt;HST&lt;/abbr&gt;&lt;/dfn&gt;
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.&lt;/p&gt;

&lt;p&gt;Indeed, the &lt;abbr title="Hubble Space Telescope"&gt;HST&lt;/abbr&gt; has
arguably done more to advance science than any device ever built.&lt;/p&gt;</pre>

<p><code>&lt;abbr&gt;</code> 要素が <code>&lt;dfn&gt;</code> の中で入れ子になっています。前者は用語が略語 ("HST") であることを示し、完全な用語 ("Hubble Space Telescope") を <code>title</code> 属性で定義します。後者は略語が定義される用語であることを表します。</p>

<h4 id="Result_3" name="Result_3">結果</h4>

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

<p>{{EmbedLiveSample("Using_abbreviations_and_definitions_together", 650, 200)}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dfn-element', '&lt;dfn&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '&lt;dfn&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;dfn&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<div>
<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>

<p>{{Compat("html.elements.dfn")}}</p>
</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>定義リスト関連要素: {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, {{HTMLElement("dd")}}</li>
 <li>{{HTMLElement("abbr")}}</li>
</ul>