HTML <dfn> Definition Tag
Tags: learnhtml, htmld
Published: 2021-05-10 08:40:48

---
title: HTML <dfn> Definition Tag
published: true
date: 2021-02-23 20:43:00 UTC
tags: LearnHTML,HTMLD
canonical_url: https://sharepointanchor.com/learn-html/html-dfn-definition-tag/
---

The HTML **<dfn> Definition Tag** used to **define the term** , that is specified in the **context of the definition phrase or sentence**. If a term is contained within the **<dfn>** element then browsers understand that nearby text contains a definition of the term.

The **<p>** tag, the **<dt>/<dd>** pair, or the **<section>** tag is considered to be the term’s definition. Mostly the browsers will display the text found within the **<dfn>** tag as **italicized text**. You can change this behavior with **CSS** property.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 5 minutes

## Syntax:

The definition tag contains both the **starting <dfn> tag** and **ending </dfn> tag**. The content is written between these two tags.

```

<dfn> Definition term </dfn> - Definition.

```

### HTML <dfn> Tag Characteristics:
<style> th, td{ padding: 20px; } </style>

| HTML <dfn> tag | Specifies a definition term |
| Content categories | Flow content, phrasing content, palpable content. |
| Permitted content | Phrasing content. But not <dfn> element must be a descendant. |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any HTML element that accepts phrasing content. |
| Implicit ARIA role | term |
| Permitted ARIA roles | Any |
| DOM interface | HTML Element |

## Sample of the HTML <dfn> Tag:

```

<!DOCTYPE html>
<html>
  <head>
    <title>HTML <dfn> Tag</title>
  </head>
  <body>
<h3>Example for Definition tag</h3>
    <p>
<dfn>HTML</dfn> - It is the technology used to create web pages
    </p>
  </body>
</html>

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-25.png)<figcaption>Result</figcaption>

### Download Sample File:

[HTML-dfn-tag](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-dfn-tag.html)[Download](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-dfn-tag.html)

- The term inside the <dfn> tag can be any of the following:
  - Just as the content of the **<dfn>** element
  - With the **“title”** attribute 
  - With a **<abbr>** tag inside the <dfn> tag
  - With the **“id”** attribute, and you can refer back to the definition with the **<a>** tag

### Example of HTML <dfn> tag with a “title” Attribute:

```

<!DOCTYPE html>
<html>
  <head>
    <title>HTML <dfn> Tag</title>
  </head>
  <body>
<h3>HTML <dfn> Tag with "title" attribute</h3>
    <p>
 	<dfn title="HyperText Markup Language">HTML</dfn> - It is the technology used to create web pages.
    </p>
  </body>
</html>

```

### Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/res1.png)<figcaption>Result</figcaption>

### Example of HTML <dfn> tag with the <abbr> tag:

```

<!DOCTYPE html>
<html>
  <head>
    <title>HTML <dfn> Tag</title>
  </head>
  <body>
<h3>HTML <dfn> Tag with <abbr> tag</h3>
    <p>
 	<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> - It is the technology used to create web pages.
    </p>
  </body>
</html>

```

### Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/result-with-abbr.png)<figcaption>Result</figcaption>

### Example of HTML <dfn> Tag with the “id” Attribute:

```

<!DOCTYPE html>
<html>
 <head>
    <title>HTML <dfn> Tag</title>
  </head>
<body>
<h3>HTML <dfn> Tag with "id" attribute</h3>
<p><dfn id="html-def">HTML</dfn> is the standard markup language for creating web pages.</p>

<p>This is some text...</p>
<p>This is some text...</p>
<p>This is some text...</p>
<p>This is some text...</p>
<p>This is some text...</p>
<p>This is some text...</p>
<p>Learn <a href="#html-def">HTML</a> now.</p>
</body>
</html>

```

### Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/LrCEQgs8jN.gif)<figcaption>Result</figcaption>

## Attributes:

The  **<dfn>**  Definition tag supports the  **global attributes**  and the  **event attributes** in HTML.

<style> th, td{ padding: 20px; } </style>

| Attribute | Value | Description |
| --- | --- | --- |
| title | | This attribute will **specify the abbreviation of the definition term** when hovering the mouse over the term. |

## Styling Methods for <dfn> Tag:

You can use the following properties to style an HTML **<[dfn](https://en.wikipedia.org/wiki/Template:Dfn)>** Definition tag.

### Properties to style the visual weight/emphasis/size of the text in <dfn> tag:

- **CSS font-style** – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
- **CSS font-family** – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
- **CSS font-size** – This CSS property will help to set the size of the font.
- **CSS font-weight** – This CSS property used to define whether the font should be bold or thick.
- **CSS text-transform** – This CSS property will control the text case and capitalization.
- **CSS test-decoration** – This CSS property specifies the decoration added to text such as **text-decoration-line** , **text-decoration-color** , **text-decoration- style**.

### Styles to coloring the text in <dfn> Tag:

- **CSS color** – This CSS property will specify the color of the text content and decorations.
- **CSS background-color** – This CSS property helps to set the background color of an element. 

### Text layout styles for <dfn> Tag:

- **CSS text-indent** – This CSS property is used to specify the indentation of the first line in a text block.
- **CSS text-overflow ** – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
- **CSS white-space** – This CSS property describes how white-space inside an element is handled.
- **CSS word-break**  – This CSS property decides where the lines should be broken.

### Other Properties for <dfn> Tag:

- **CSS text-shadow**  – This CSS property helps to add the shadow to text.
- **CSS text-align-last**  – This CSS property will set the alignment of the last line of the text.
- **CSS line-height** – This CSS property defines the height of a line.
- **CSS letter-spacing** – This CSS property helps to decide the spaces between letters/characters in a text.
- **CSS word-spacing** – This CSS property specifies the spacing between every word.

## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Browser-Support-10.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <dd> Definition Description Tag](https://sharepointanchor.com/learn-html/html-dd-definition-description/)**
- **[HTML <center> Center Tag](https://sharepointanchor.com/learn-html/html-center-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**
- **[HTML <code> Code Tag](https://sharepointanchor.com/learn-html/html-code-tag/)**
- **[HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**

The post [HTML <code><dfn></code> Definition Tag](https://sharepointanchor.com/learn-html/html-dfn-definition-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).