HTML DFN Tag

The <dfn> tag stands for “definition”. It is used in HTML to indicate that a word or phrase is being defined for the first time in the surrounding context. It gives semantic meaning to the content.

Think of it like this: if you're writing an article or tutorial, and you're introducing a new technical term, you wrap that term inside the <dfn> tag. It helps search engines and screen readers understand that this word is a definition.

Syntax -

<dfn>HTML</dfn> is a standard language used to create web pages.

The term HTML is wrapped inside <dfn>, meaning we’re defining what it is. The rest of the sentence explains the definition.

Example -

Scenario1 - Simple Definition

<!DOCTYPE html>
<html>
	<head>
		<title>details tag text example.. </title>
	</head>
	<body>
	   <p><dfn>JavaScript</dfn> is a programming language 
		used to add interactivity to websites.</p>
	</body>
</html>

Output -

JavaScript is a programming language used to add interactivity to websites.

The word "JavaScript" is being defined here. So, we use <dfn> to show that this is the first mention and explanation of the term.

Scenario2 - Using <dfn> with a Title Attribute

<p><dfn title="Cascading Style Sheets">CSS</dfn> is used to 
	style the layout of web pages.</p>

Output -

CSS is used to style the layout of web pages.

The full form of "CSS" is stored in the title attribute. When users hover over "CSS", it shows “Cascading Style Sheets” as a tooltip.