details: The Details disclosure element

The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an “open” state. A summary or label must be provided using the <summary> element.

A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the <summary> element are used as the label for the disclosure widget.

Attributes

Specific attributes

Allowed attributes

open indicates whether the details are currently visible. The default value is false, meaning the details are not visible.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<details>
  <summary>Getting Started with Your Personal Website</summary>
  <p>Building your own website gives you control over your online presence and data. Here are the key steps:</p>
  <ul>
    <li>Choose a meaningful domain name</li>
    <li>Select reliable hosting or use a static site generator</li>
    <li>Start with simple HTML and CSS</li>
    <li>Add content that represents your interests and values</li>
  </ul>
</details>

<details open>
  <summary>Why Own Your Content?</summary>
  <p>When you publish on social media platforms, you're building value for someone else's business. Owning your content means:</p>
  <ul>
    <li>Full control over your data and how it's used</li>
    <li>No algorithm determining who sees your content</li>
    <li>Freedom from platform policy changes</li>
    <li>Direct connection with your audience</li>
  </ul>
</details>

<details>
  <summary>IndieWeb Technologies</summary>
  <p>The IndieWeb community has developed several technologies to help independent websites communicate:</p>
  <ul>
    <li><strong>Webmention:</strong> Send notifications when you link to other sites</li>
    <li><strong>Microformats:</strong> Add semantic meaning to your HTML</li>
    <li><strong>IndieAuth:</strong> Use your domain as your identity</li>
  </ul>
</details>