<dfn>: The Definition element #

::: section-content The <dfn> HTML element is used to indicate the term being defined within the context of a definition phrase or sentence. The ancestor <p> element, the <dt>/ <dd> pairing, or the nearest <section> ancestor of the <dfn> element, is considered to be the definition of the term. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <dfn> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

A validator is a program that checks for syntax errors in code or documents.

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} /* stylelint-disable-next-line block-no-empty */ dfn { } ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Attributes #

::: section-content This element's attributes include the global attributes.

The title attribute has special meaning, as noted below. :::

Usage notes #

::: section-content There are some not-entirely-obvious aspects to using the <dfn> element. We examine those here. :::

Specifying the term being defined #

::: section-content The term being defined is identified following these rules:

If the <dfn> element has a title attribute, the value of the title attribute is considered to be the term being defined. The element must still have text within it, but that text may be an abbreviation (perhaps using <abbr>) or another form of the term.
If the <dfn> contains a single child element and does not have any text content of its own, and the child element is an <abbr> element with a title attribute itself, then the exact value of the <abbr> element's title is the term being defined.
Otherwise, the text content of the <dfn> element is the term being defined. This is shown in the first example below.

::: {#sect1 .notecard .note} Note: If the <dfn> element has a title attribute, it must contain the term being defined and no other text. ::: :::

Links to `<dfn>` elements #

::: section-content If you include an id attribute on the <dfn> element, you can then link to it using <a> elements. Such links should be uses of the term, with the intent being that the reader can quickly navigate to the term's definition if they're not already aware of it, by clicking on the term's link.

This is shown in the example under Links to definitions below. :::

Examples #

::: section-content Let's take a look at some examples of various usage scenarios. :::

Basic identification of a term #

::: section-content This example uses a plain <dfn> element to identify the location of a term within the definition.

HTML #

::: code-example [html]{.language-name}

<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>

:::

Since the <dfn> element has no title, the text contents of the <dfn> element itself are used as the term being defined.

Result #

::: {#sect2 .code-example} ::: iframe ::: ::: :::

Links to definitions #

::: section-content To add links to the definitions, you create the link the same way you always do, with the <a> element.

HTML #

::: code-example [html]{.language-name}

<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>

:::

Here we see the definition — now with an id attribute, "definition-dfn", which can be used as the target of a link. Later on, a link is created using <a> with the href attribute set to "#definition-dfn" to set up the link back to the definition.

Result #

::: {#sect3 .code-example} ::: iframe ::: ::: :::

Using abbreviations and definitions together #

::: section-content In some cases, you may wish to use an abbreviation for a term when defining it. This can be done by using the <dfn> and <abbr> elements in tandem, like this:

HTML #

::: code-example [html]{.language-name}

<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>

:::

Note the <abbr> element nested inside the <dfn>. The former establishes that the term is an abbreviation ("HST") and specifies the full term ("Hubble Space Telescope") in its title attribute. The latter indicates that the abbreviated term represents a term being defined.

Result #

::: {#sect4 .code-example} ::: iframe ::: ::: :::

Technical summary #

::: section-content

Content categories	Flow content, phrasing content, palpable content.
Permitted content	Phrasing content, but no `<dfn>` element must be a descendant.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	`term`
Permitted ARIA roles	Any
DOM interface	`HTMLElement`

:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-dfn-element]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

      Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

dfn 15 12 1 Yes 15 6 4.4 18 4 14 6 1.0 :::

<dfn>: The Definition element #

Try it #

HTML Demo: <dfn> #

Output #

Console Output #

Attributes #

Usage notes #

Specifying the term being defined #

Links to <dfn> elements #

Examples #

Basic identification of a term #

HTML #

Result #

Links to definitions #

HTML #

Result #

Using abbreviations and definitions together #

HTML #

Result #

Technical summary #

Specifications #

::: _table #

Specification #

Browser compatibility #

See also #

Links to `<dfn>` elements #