HTML <dfn> Tag - codingCourses

Definition and Usage

The <dfn> tag represents the term being defined within the content.

It is used to clearly indicate that the term is being defined, and must appear only in sentences where both the term and its definition are present.

Basic Example

In the example above, the <dfn> tag indicates that the term “HTML” is being defined within the sentence. This tag is a semantic element used to clearly identify the term being defined alongside its definition. It serves to enhance the structure of information and the accuracy of semantic interpretation, rather than providing visual emphasis.

Important Considerations

The closest ancestor element of the <dfn> tag must contain the definition of the term. For example, the term and its definition should be presented together within tags such as paragraphs (<p>), description lists (<dl>, <dt>, <dd>), or general sections (<section>).

Using the `<dfn>` Tag Within Paragraphs

The <dfn> tag represents the term being defined, so the parent element of the <dfn> tag should contain the phrase or paragraph that includes the definition of the term.

For example, consider the following HTML code:

In the example above, the <dfn> tag emphasizes the term "HTML", and the definition of this term is contained within its parent <p> tag. This allows users of the web page to quickly understand what the term means and easily find related information.

Using the `<dfn>` Tag Within Description Lists

The <dfn> tag can also be used to structure terms and their definitions within a description list (<dl>). By wrapping the term to be defined with <dfn> inside a <dt> tag, and placing the definition in the corresponding <dd> tag, you can clearly express the information.

Consider the following HTML:

HTML

<p>Descriptions of HTML and CSS.</p>
<dl>
    <dt><dfn>HTML</dfn></dt>
    <dd>
        An acronym for HyperText Markup Language,
        a markup language used to create web pages.
    </dd>
    <dt><dfn>CSS</dfn></dt>
    <dd>
        An acronym for Cascading Style Sheets,
        a stylesheet language used to specify the style and layout of web pages.
    </dd>
</dl>

In this example, the <dfn> tags indicate that the terms "HTML" and "CSS" are being defined. These terms are wrapped in <dfn> within the <dt> tags, and their definitions are located in the respective <dd> tags.

Using <dfn> inside description lists helps to structurally associate terms and definitions, improving the semantic clarity of the document.

Using the `<dfn>` Tag Within General Sections

The <dfn> tag can also be used within general content sections such as the <section> tag. In this case, the entire section forms the context for the term's definition, and the <dfn> tag clearly identifies the term being defined within that context.

HTML

<section>
    <h2>ARIA</h2>
    <p>
        <dfn>ARIA</dfn> stands for Accessible Rich Internet Applications,
        an accessibility technology that helps make web content
        usable with assistive technologies.
    </p>
</section>

In this example, the <section> tag focuses on the term "ARIA" as its main subject, with the term appearing in both the section heading and the paragraph. The <dfn> tag explicitly indicates that "ARIA" is being defined, and the definition is contained within the same section, making this a semantically correct usage.

Using the `title` Attribute

When the <dfn> tag includes a title attribute, the value of that attribute is treated as the official definition of the term.

Code Explanation
The title attribute provides advisory information or a descriptive label for the element it is applied to. In some desktop browsers, this information is displayed as a tooltip when the user hovers over the element.

In this case, the title attribute on the <dfn> tag—"Hypertext Markup Language"—serves as the definition of the term "HTML".

Important:
A title attribute on a parent or ancestor element does not affect the <dfn> tag. The definition must be declared directly on the <dfn> tag itself to be recognized as the defining instance.

Using the `<abbr>` Tag Inside `<dfn>`

You can also use the <abbr> tag inside a <dfn> tag. When the <abbr> tag includes a title attribute, its value serves as the official definition of the term.

Code Explanation
The <abbr> tag is used to mark up abbreviations or acronyms. It typically includes a title attribute that provides the full form or a human-readable explanation of the abbreviation.

In this example, the title attribute of the <abbr> tag inside the <dfn> element contains the full definition of the term "CSS"—"Cascading Style Sheets".

These examples demonstrate how the <dfn> tag works in conjunction with its content to define a term. By clearly marking terms with appropriate definitions—either through the tag’s content or a title attribute—the <dfn> tag helps clarify the meaning of terms in context and improves the reader’s understanding of the document.

Browser compatibility

Browser compatibility for the dfn tag
Tag	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	Safari
`<dfn>`	15	12	1	6

Specifications

Specification for the dfn tag
Specification
`<dfn>`	HTML Standard #the-dfn-element

Definition and Usage

Basic Example

Important Considerations

Using the <dfn> Tag Within Paragraphs

Using the <dfn> Tag Within Description Lists

Using the <dfn> Tag Within General Sections

Using the title Attribute

Using the <abbr> Tag Inside <dfn>