HTML Details Tag

The <details> tag is new in HTML5.

The <details> tag is used when you want to create expandable and collapsible content on a webpage. It allows users to click and reveal more information, kind of like a spoiler or a drop-down FAQ answer.

It’s handy when you want to keep your page clean and let users choose when they want to read extra info. By default, the content inside the <details> tag is hidden until the user clicks on it.

Syntax -

<details>
  <summary>Click to learn more</summary>
  <p>This is the hidden content that shows when you click the summary above.</p>
</details>

The <summary> tag defines the visible title (like a heading or question). The content inside the <details> (but not in <summary>) is hidden at first and appears when clicked.

Example -

Scenario1 - A Simple FAQ Block

<!DOCTYPE html>
<html>
	<head>
		<title>details tag text example.. </title>
	</head>
	<body>
		<details>
		  <summary>What is HTML?</summary>
		  <p>HTML stands for HyperText Markup Language. 
			It is used to structure content on the web.</p>
		</details>
	</body>
</html>

Output -

What is HTML?

HTML stands for HyperText Markup Language. It is used to structure content on the web.

Tip! Click on it to exapnd the summary.

The question “What is HTML?” is always visible. When the user clicks it, the answer appears underneath.

Scenario2 - Opening It by Default

<details open>
  <summary>Always open on page load</summary>
  <p>This content is visible without clicking.</p>
</details>

Output -

Always open on page load

This content is visible without clicking.

Useful when you want a section expanded unless the user collapses it.