HTML <summary> Tag

The <summary> tag in HTML is used to define a heading for the content within a <details> element. This heading is visible to the user and acts as a toggle. When the user clicks on the <summary> element, the content within the <details> element is either revealed or hidden, creating an interactive and space-saving way to display content. Think of it as a clickable title for a collapsible section.

Syntax

<details>
  <summary>Summary Text</summary>
  <!-- Content to be revealed -->
</details>

Attributes

The <summary> tag does not have any specific attributes besides the global HTML attributes (e.g., id, class, style).

Example

<details>
  <summary>Click to reveal more about HTML</summary>
  <p>HTML stands for Hyper Text Markup Language. It is the standard markup language for creating web pages and web applications.</p>
</details>

More Examples

Example 1: Using Lists within Details

<details>
    <summary>My Favorite Fruits</summary>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>
</details>

This example shows how to embed a list inside of <details> tag and the user will be able to expand or collapse it.

Example 2: Styling the summary tag with CSS

<style>
    details > summary {
      background-color: #f0f0f0;
      padding: 10px;
      border: 1px solid #ccc;
      cursor: pointer;
    }

    details[open] > summary {
        background-color: #e0e0e0;
    }
    details > p {
        padding: 10px;
        margin: 0;
    }
</style>

<details>
  <summary>Custom Styled Summary</summary>
  <p>This is a summary element with a custom style. The background color changes on hover and when opened.</p>
</details>

This example showcases how you can style your summary tag with a custom background, padding and border, to make it look more appealing. We are also changing the background-color when the details element is opened with the details[open].

Example 3: Nested Details elements

<details>
    <summary>Parent Details</summary>
    <p>This is the parent details content.</p>
    <details>
        <summary>Child Details</summary>
        <p>This is a nested child details.</p>
    </details>
</details>

This example shows how the details tags can be nested to form complex collapsible content hierarchies.

Example 4: Using id for accessibility.

<details id="myDetails">
  <summary aria-controls="detailsContent" aria-expanded="false">Click to Expand Content</summary>
  <div id="detailsContent" style="display:none">
    <p>This is the detailed content.</p>
  </div>
</details>
<script>
  const details = document.getElementById('myDetails');
  const summary = details.querySelector('summary');
  const content = document.getElementById('detailsContent');
  summary.addEventListener('click', () => {
      const expanded = summary.getAttribute('aria-expanded') === 'true';
      summary.setAttribute('aria-expanded', !expanded);
      content.style.display = expanded ? 'none' : 'block';
  });
</script>

This example adds a script that allows you to change the display attribute on click and also add more accessibility attributes like aria-controls and aria-expanded.

Browser Support

The <summary> tag is well-supported by modern browsers:

• Chrome: Yes
• Edge: Yes
• Firefox: Yes
• Safari: Yes
• Opera: Yes

For older browsers you can always try to use a polyfill script.

Notes and Tips

• The <summary> tag must be the first child element of the <details> element.
• Use clear and concise text for the summary to convey the purpose of the content being revealed.
• For better accessibility, use aria-expanded and aria-controls attributes on the <summary> tag, specially if you are doing advanced styling.
• You can style the summary tag and content using CSS.
• It's an ideal solution for presenting FAQs, additional information, or any content that needs to be toggled.
• While using Javascript, you can use the open attribute on the details tag to expand or collapse the content.