HTML <dfn> Tag

The HTML <dfn> tag is used to represent the defining instance of a term. It is typically used when introducing a new term or concept, helping to make the document semantically clear and accessible.

The <dfn> tag is generally accompanied by text that provides the definition of the term being marked. In many cases, assistive technologies highlight the term as a defining instance, making it easier for users to identify key terms.

Basic Syntax of HTML <dfn> Tag

The <dfn> tag is written as:

</>
Copy
<dfn>Term</dfn>

Browsers often render the term inside the <dfn> tag in italics to distinguish it as a defining instance.

Attributes of HTML <dfn> Tag

  • Global Attributes: The <dfn> tag supports all global attributes, such as id, class, style, and data-*.
  • Event Attributes: The <dfn> tag supports all event attributes, such as onclick, onmouseover, and onkeydown.

Basic Example of HTML <dfn> Tag

Here’s a simple example of using the <dfn> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Basic Example</h2>
        <p>The term <dfn>HTML</dfn> stands for HyperText Markup Language.</p>
    </body>
</html>
Basic Example of HTML <dfn> Tag

Explanation: In this example, the word “HTML” is marked as a defining instance with the <dfn> tag, making it semantically meaningful.

Using the HTML <dfn> Tag with title Attribute

You can add additional information to the defining term using the title attribute:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Example with Title Attribute</h2>
        <p>The term <dfn title="A markup language for creating web pages">HTML</dfn> is essential for web development.</p>
    </body>
</html>

Explanation: The title attribute provides additional context about the term “HTML,” which can be displayed as a tooltip when hovered over.

Styling the <dfn> Tag with CSS

You can style the <dfn> tag using CSS to make it visually distinct:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            dfn {
                font-style: italic;
                color: #007BFF;
            }
        </style>
    </head>
    <body>
        <h2>Styled <dfn> Example</h2>
        <p>The term <dfn>JavaScript</dfn> refers to a popular programming language for the web.</p>
    </body>
</html>
Styling the <dfn> Tag with CSS

Result: The term “JavaScript” appears italicized and in blue to emphasize it as a defining instance.

Practical Applications of the <dfn> Tag

  • Glossaries: Use the <dfn> tag to define terms in glossaries or documentation.
  • Technical Writing: Mark key terms in articles or tutorials for better readability and semantic clarity.
  • Accessibility: Help assistive technologies identify and emphasize defining instances of terms.

Nested Example: Using <dfn> with <abbr> Tag

You can combine the <dfn> tag with the <abbr> tag to define abbreviations:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Example with Abbreviation</h2>
        <p>The term <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> refers to a language used for styling web pages.</p>
    </body>
</html>
Nested Example: Using <dfn> with <abbr> Tag

Explanation: The <dfn> tag highlights the term “CSS” as a defining instance, and the <abbr> tag provides additional context via the title attribute.