Baseline Widely available
The <dfn>
HTML element indicates a term to be defined. The <dfn>
element should be used in a complete definition statement, where the full definition of the term can be one of the following:
<p>
element)<dt>
/<dd>
pairing<dfn>
element,<p>
A <dfn id="def-validator">validator</dfn> is a program that checks for syntax
errors in code or documents.
</p>
dfn {
/* Add your styles here */
}
Attributes
This element's attributes include the global attributes.
The title
attribute has special meaning, as noted below.
There are some not-entirely-obvious aspects to using the <dfn>
element. We examine those here.
The term being defined is identified following these rules:
<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.<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.<dfn>
element is the term being defined. This is shown in the first example below.Note: If the <dfn>
element has a title
attribute, it must contain the term being defined and no other text.
<dfn>
elements
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.
ExamplesLet's take a look at some examples of various usage scenarios.
Basic identification of a termThis example uses a plain <dfn>
element to identify the location of a term within the definition.
<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>
Since the <dfn>
element has no title
, the text contents of the <dfn>
element itself are used as the term being defined.
To add links to the definitions, you create the link the same way you always do, with the <a>
element.
<p>
The
<strong>HTML Definition element (<dfn id="definition-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>
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.
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:
<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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3