summary: The Disclosure Summary element

The <summary> HTML element specifies a summary, caption, or legend for a <details> element’s disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.

The <summary> element must be the first child of the <details> element.

Attributes

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>Setting Up Your Development Environment</summary>
  <p>A good development environment makes building websites more efficient and enjoyable:</p>
  <ul>
    <li>Choose a text editor you're comfortable with (VS Code, Vim, Sublime Text)</li>
    <li>Set up version control with Git</li>
    <li>Install a local web server for testing</li>
    <li>Configure browser developer tools</li>
  </ul>
</details>

<details>
  <summary>Open Web Standards</summary>
  <p>Building with open standards ensures your website works everywhere and stays future-proof:</p>
  <ul>
    <li><strong>HTML:</strong> Structure your content semantically</li>
    <li><strong>CSS:</strong> Style your content for accessibility and beauty</li>
    <li><strong>JavaScript:</strong> Add interactivity when needed</li>
    <li><strong>Web APIs:</strong> Connect with other services and data</li>
  </ul>
</details>

<details>
  <summary>Community Resources</summary>
  <p>The IndieWeb community provides many resources for independent web creators:</p>
  <ul>
    <li>IndieWeb Wiki with documentation and tutorials</li>
    <li>Homebrew Website Club meetups in many cities</li>
    <li>IndieWebCamp events for hands-on learning</li>
    <li>Chat channels for real-time help and discussion</li>
  </ul>
</details>