HTML <dfn> Tag

The <dfn> tag in HTML is used to mark a term that is being defined within the context of a paragraph, sentence, or phrase. This tag semantically indicates that the enclosed text is a definition term, enhancing both the accessibility and search engine optimization (SEO) of your webpage.

Syntax

<dfn title="definition of term">term to be defined</dfn>

Attributes

Example

<p>
    The term <dfn title="The process of making a web application work correctly with all different types of browsers and devices.">Cross-browser compatibility</dfn> refers to the ability of a website or web application to function as intended across various web browsers and platforms.
</p>

More Examples

Basic usage without title

While the title attribute is highly recommended, you can use <dfn> without it, primarily for semantic purposes:

<p>
    The <dfn>HTTP</dfn> protocol is widely used on the internet.
</p>

Using dfn with abbr

You can combine <dfn> with <abbr> to define abbreviations or acronyms:

<p>
    <dfn><abbr title="Hypertext Markup Language">HTML</abbr></dfn> is the standard markup language for documents designed to be displayed in a web browser.
</p>

Defining multiple terms in a paragraph

Here's how to use <dfn> to define multiple terms in a single paragraph:

<p>
  In software development, <dfn title="The process of identifying and removing errors or bugs from software.">Debugging</dfn> is a critical step after <dfn title="The process of writing code or creating software using a programming language.">Coding</dfn>.
</p>

Styling the defined terms

You can use CSS to style the terms defined by the <dfn> tag:

<style>
  dfn {
    font-style: italic;
    font-weight: bold;
    color: #007bff;
  }
</style>

<p>
  <dfn title="A method for organizing related files on a storage device.">Directory</dfn> is a common way to store all type of files.
</p>

Complex Example

<article>
  <header>
    <h1>Understanding Core Web Concepts</h1>
  </header>
  <section>
    <h2>Key Definitions</h2>
    <p>
      In the context of the internet, <dfn title="A unique address used by computers to identify each other on a network.">IP Address</dfn> is fundamental for communication, as it provides routing information. 
        Furthermore, <dfn title="A system for connecting multiple networks together, forming a global network.">The Internet</dfn> itself is what makes all these networks communicate.
        The <dfn title="The application of scientific method in designing software.">Software Engineering</dfn> is the core foundation of a modern application development .
    </p>
     <p>
        To develop a new application with latest UI, a <dfn title="A frontend focused developer">UI Engineer</dfn> is the key person.
      </p>
      <p>
       In development,  <dfn title="A framework to develop complex application.">React</dfn> is one of the most used framework.
      </p>
    </section>
</article>

Browser Support

The <dfn> tag is supported by all major browsers:

• Chrome: Full support
• Edge: Full support
• Firefox: Full support
• Safari: Full support
• Opera: Full support

Notes and Tips

• Use the title attribute within the <dfn> tag to provide a comprehensive definition, making your content more accessible for screen readers and users who hover over the term.
• The <dfn> tag is primarily for marking the term being defined, not every instance of the term.
• Properly defining terms helps with SEO because search engines can understand the context and meaning of your content better.
• Use <dfn> along with the <abbr> tag to define acronyms or abbreviations.
• While styling the <dfn> element with CSS is perfectly fine, ensure that the styling enhances readability and does not detract from the semantic meaning.
• Use <dfn> within the appropriate context where the definition is clearly being established. Avoid using it for just any term.