HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <details> Tag

The <details> tag is used to create a collapsible content block that the user can open or close.
It is often used for FAQs, additional information, or disclosure sections.

The <summary> tag is typically used inside <details> to define the visible heading that toggles the content.

Syntax

html

<details>
  <summary>Title or heading</summary>
  <!-- Hidden content that can be expanded -->
</details>

Attributes

AttributeDescription
openBoolean attribute. If present, the details are expanded by default.
idAssigns a unique identifier.
classSpecifies one or more class names.
styleInline CSS styling.
titleProvides additional information about the element.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Details Tag Example</title>
</head>
<body>
  <h1>Frequently Asked Questions</h1>

  <details>
    <summary>What is HTML?</summary>
    <p>HTML (HyperText Markup Language) is the standard markup language for creating web pages.</p>
  </details>

  <details open>
    <summary>What is CSS?</summary>
    <p>CSS (Cascading Style Sheets) is used to style and layout HTML content.</p>
  </details>
</body>
</html>

Output

Browser Output

html

You will see a collapsible block with a heading defined by <summary>.
Clicking the summary toggles the visibility of the hidden content.
Use our TryIt Editor to see the expand/collapse effect live.

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

All major browser supports <details> tag except of IE

Notes

  • <details> provides interactive content without JavaScript.
  • Works well for FAQs, hints, or optional content.
  • The open attribute allows the block to be expanded by default.
  • Styling can be applied with CSS for better appearance.

Conclusion

The <details> tag is perfect for collapsible content sections.
It enhances user experience by hiding non-essential information until needed and is semantically meaningful.

PreviousHTML <main> TagNextHTML <summary> Tag