<dfn>

  • Revision slug: HTML/Element/dfn
  • Revision title: <dfn>
  • Revision id: 344873
  • Created:
  • Creator: medicdude
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML <dfn> element (or HTML Definition Element) represents the defining instance of a term.

HTML5 Usage Notes:
  • The <dfn> element marks the term being defined; the definition of the term should be given by the surrounding {{HTMLElement("p")}}, {{HTMLElement("section")}} or definition list group (usually a {{HTMLElement("dt")}}, {{HTMLElement("dd")}} pair).
  • The exact value of the term being defined is determined by the following rules:
    1. If the <dfn> element has a title attribute, then the term is the value of that attribute.
    2. Else, if it contains only an {{HTMLElement("abbr")}} element with a {{htmlattrxref("title", "abbr")}} attribute, then the term is the value of that attribute.
    3. Otherwise, the text content of the <dfn> element is the term being defined.

Attributes

This element includes the global attributes.


In HTML5, the title attribute has special meaning, as noted above.

Examples

The following examples are valid in HTML5.

<!-- Define "The Internet" -->
<p><dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.</p>

Later in the same document:

<dl>
  <!-- Define "World-Wide Web" and reference definition for "the Internet" -->
  <dt>
    <dfn>
      <abbr title="World-Wide Web">WWW</abbr>
    </dfn>
  </dt>
  <dd>The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on <a href="#def-internet">the Internet</a>.</dd>
</dl>

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-dfn-element', '<dfn>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'the-dfn-element.html#the-dfn-element', '<dfn>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'text.html#h-9.2.1', '<dfn>')}} {{Spec2('HTML4.01')}}  

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatGeckoMobile("1.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}

See also

  • Elements related to definition lists: {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, {{HTMLElement("dd")}}
  • {{HTMLElement("abbr")}}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The <strong>HTML <code>&lt;dfn&gt;</code> element</strong> (or <em>HTML Definition Element</em>) represents the defining instance of a term.</p>
<div class="note">
  <strong>HTML5 Usage Notes:</strong>
  <ul>
    <li>The <code>&lt;dfn&gt;</code> element marks the term being defined; the definition of the term should be given by the surrounding {{HTMLElement("p")}}, {{HTMLElement("section")}} or definition list group (usually a {{HTMLElement("dt")}}, {{HTMLElement("dd")}} pair).</li>
    <li>The exact value of the term being defined is determined by the following rules:
      <ol>
        <li>If the <code>&lt;dfn&gt;</code> element has a <strong>title</strong> attribute, then the term is the value of that attribute.</li>
        <li>Else, if it contains only an {{HTMLElement("abbr")}} element with a {{htmlattrxref("title", "abbr")}} attribute, then the term is the value of that attribute.</li>
        <li>Otherwise, the text content of the <code>&lt;dfn&gt;</code> element is the term being defined.</li>
      </ol>
    </li>
  </ul>
</div>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</li>
  <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>, but no {{HTMLElement("dfn")}} element must be a descendant.</li>
  <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
  <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li>
  <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li>
</ul>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<p><br />
  <p>In HTML5, the <strong>title</strong> attribute has special meaning, as noted above.</p>
</p>
<h2 id="Examples">Examples</h2>
<p>The following examples are valid in HTML5.</p>
<pre class="brush: html">
&lt;!-- Define "The Internet" --&gt;
&lt;p&gt;&lt;dfn id="def-internet"&gt;The Internet&lt;/dfn&gt; is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.&lt;/p&gt;
</pre>
<p>Later in the same document:</p>
<pre class="brush: html">
&lt;dl&gt;
  &lt;!-- Define "World-Wide Web" and reference definition for "the Internet" --&gt;
  &lt;dt&gt;
    &lt;dfn&gt;
      &lt;abbr title="World-Wide Web"&gt;WWW&lt;/abbr&gt;
    &lt;/dfn&gt;
  &lt;/dt&gt;
  &lt;dd&gt;The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on &lt;a href="#def-internet"&gt;the Internet&lt;/a&gt;.&lt;/dd&gt;
&lt;/dl&gt;
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-dfn-element', '&lt;dfn&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'the-dfn-element.html#the-dfn-element', '&lt;dfn&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'text.html#h-9.2.1', '&lt;dfn&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoDesktop("1.0")}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoMobile("1.0")}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>Elements related to definition lists: {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, {{HTMLElement("dd")}}</li>
  <li>{{HTMLElement("abbr")}}</li>
</ul>
Revert to this revision