What is the HTML <summary> tag?

 Introduction to the <summary> tag

The <summary> tag is an HTML element that creates a clickable heading for collapsible content. It always works in conjunction with the <details> tag to provide an interactive user experience without requiring any JavaScript.

If you want to master HTML and create modern, accessible web interfaces, our comprehensive HTML course will guide you step by step through learning all essential tags, including interactive elements like <summary>.

In this comprehensive guide, we will explore in depth how the <summary> tag works, its use cases, best practices to adopt, and common mistakes to avoid. You will discover how to create interactive FAQs, accordion menus, and many other useful components.

Definition and syntax of the <summary> tag

What is the <summary> tag?

The <summary> tag defines a summary, heading, or caption visible for the content of a <details> element. When the user clicks on the <summary>, the hidden content within <details> is displayed or hidden automatically.

This tag is part of the HTML5 specification and offers a native solution for creating collapsible interface elements, often called "disclosure widgets" or "accordions."

Basic syntax

Here is the fundamental syntax for using the <summary> tag:

<details>
  <summary>Click to learn more</summary>
  <p>Here is the hidden content that appears on click.</p>
</details>

The <summary> tag must always be the first child of the <details> element. If it is absent, the browser will display default text (usually "Details" depending on the browser's language).

Key characteristics

Here are the essential characteristics of the <summary> tag:

• Native interactive element: no JavaScript required for basic interactivity
• Accessible by default: screen readers recognize its role
• CSS customizable: you can modify the appearance of the indicator triangle
• Flexible content: can contain text, images, or other HTML elements
• Keyboard support: works with the Enter key and spacebar

Practical usage examples

Simple example: an interactive FAQ

One of the most common use cases for the <summary> tag is creating interactive FAQs (Frequently Asked Questions). Here is a complete example:

<section class="faq-believemy">
  <h2>Frequently Asked Questions about our courses</h2>
  
  <details>
    <summary>How long do I have access to the course?</summary>
    <p>You have unlimited lifetime access to all courses you purchase on Believemy. You can view them as many times as you want.</p>
  </details>
  
  <details>
    <summary>Can I get a certificate?</summary>
    <p>Yes, a completion certificate is automatically issued once you have completed all modules of the course.</p>
  </details>
  
  <details>
    <summary>Is support available?</summary>
    <p>Absolutely! Our teaching team is available to answer all your questions through the comment system integrated into each lesson.</p>
  </details>
</section>

This code creates a FAQ where each question can be expanded individually by the user, improving readability and user experience.

Advanced example: a styled accordion menu

We can go further by creating an accordion menu with custom styling. Here is a more elaborate example:

<nav class="accordion-menu">
  <details>
    <summary>
      <span class="menu-icon">📚</span>
      HTML & CSS Courses
    </summary>
    <ul>
      <li><a href="/courses/html-beginner">HTML for beginners</a></li>
      <li><a href="/courses/advanced-css">Advanced CSS</a></li>
      <li><a href="/courses/responsive-design">Responsive design</a></li>
    </ul>
  </details>
  
  <details>
    <summary>
      <span class="menu-icon">⚡</span>
      JavaScript Courses
    </summary>
    <ul>
      <li><a href="/courses/javascript-basics">JavaScript basics</a></li>
      <li><a href="/courses/dom-manipulation">DOM manipulation</a></li>
      <li><a href="/courses/modern-es6">Modern JavaScript ES6+</a></li>
    </ul>
  </details>
</nav>

The associated CSS to style this menu:

.accordion-menu details {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.accordion-menu summary {
  padding: 15px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.accordion-menu summary:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.accordion-menu details[open] summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.accordion-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.accordion-menu li a {
  display: block;
  padding: 12px 20px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.2s;
}

.accordion-menu li a:hover {
  background-color: #f5f5f5;
}

Example with the open attribute

You can use the open attribute on the <details> element to display the content expanded by default:

<details open>
  <summary>Important Section - Displayed by default</summary>
  <p>This content is visible from page load because the "open" attribute is present on the details element.</p>
</details>

This technique is useful when you want to highlight important information while still giving users the option to hide it.

Style customization with CSS

Modifying the indicator triangle

By default, browsers display a small triangle next to the <summary> text. You can customize or remove this triangle with CSS:

/* Remove the default triangle */
summary {
  list-style: none;
}

/* For Safari */
summary::-webkit-details-marker {
  display: none;
}

/* Add a custom indicator */
summary::before {
  content: '+';
  display: inline-block;
  width: 20px;
  font-weight: bold;
  color: #667eea;
  transition: transform 0.3s ease;
}

details[open] summary::before {
  content: '−';
}

You can also use icons or chevrons to create a more modern indicator:

summary::after {
  content: '▶';
  float: right;
  transition: transform 0.3s ease;
}

details[open] summary::after {
  transform: rotate(90deg);
}

Creating smooth transitions

Unfortunately, CSS transitions do not work directly on the opening/closing of <details> content. However, you can create visual effects on other properties:

details {
  border-radius: 8px;
  background-color: #f8f9fa;
  transition: box-shadow 0.3s ease;
}

details[open] {
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

details > *:not(summary) {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Best practices for usage

Accessibility

The <summary> tag is naturally accessible, but here are some recommendations to optimize the experience:

• Descriptive text: use clear, descriptive text that indicates what the section contains
• Avoid empty summaries: never leave a <summary> without text content
• Do not nest interactive elements: avoid placing links or buttons directly in the <summary>
• Logical order: ensure the hidden content makes sense in the document flow

When to use <summary> and <details>

These elements are particularly suited for:

• FAQs and Q&A sections
• Collapsible navigation menus
• Supplementary or advanced information
• Legal notices or disclaimers (terms of service, privacy policy)
• Spoilers or content to reveal
• Advanced settings in forms

However, avoid using them for:

• Essential content that must be immediately visible
• Main navigation elements
• Critical information for understanding the page

Browser compatibility

The <summary> tag enjoys excellent support in modern browsers:

For browsers that do not support these elements (primarily Internet Explorer), the content will simply be displayed in full, which constitutes an acceptable graceful degradation.

Common mistakes to avoid

<summary> without <details>

The <summary> tag has no effect if it is not inside a <details> element:

<!-- ❌ Incorrect: summary alone -->
<summary>This will not work</summary>
<p>Always visible content</p>

<!-- ✅ Correct: summary inside details -->
<details>
  <summary>This works correctly</summary>
  <p>Collapsible content</p>
</details>

<summary> incorrectly positioned

The <summary> tag must be the first child of <details>:

<!-- ❌ Incorrect: summary not first -->
<details>
  <p>Some text before</p>
  <summary>Title</summary>
  <p>Content</p>
</details>

<!-- ✅ Correct: summary first -->
<details>
  <summary>Title</summary>
  <p>Content</p>
</details>

Interactive content inside <summary>

Avoid placing interactive elements like links or buttons inside the <summary>:

<!-- ❌ Avoid: link in summary -->
<details>
  <summary>Learn more <a href="/page">here</a></summary>
  <p>Content</p>
</details>

<!-- ✅ Better approach: link in content -->
<details>
  <summary>Learn more</summary>
  <p>Content with <a href="/page">a link to more information</a>.</p>
</details>

Using with JavaScript

Although the <summary> tag works without JavaScript, you can enhance its behavior with a few lines of code. For example, to create an accordion where only one section can be open at a time:

// Select all details elements
const detailsElements = document.querySelectorAll('.exclusive-accordion details');

detailsElements.forEach(details => {
  details.addEventListener('toggle', function() {
    if (this.open) {
      // Close all other details elements
      detailsElements.forEach(otherDetails => {
        if (otherDetails !== this && otherDetails.open) {
          otherDetails.open = false;
        }
      });
    }
  });
});

The toggle event is triggered each time the open state of the <details> element changes, allowing you to react and implement custom behaviors.

Frequently asked questions about the <summary> tag

No, the <summary> tag is not technically required. However, if you do not provide one, the browser will display default text like "Details," which is generally not desirable. We strongly recommend always including an explicit <summary> with descriptive text to improve user experience and accessibility.

Yes, you can include images, icons, or even elements with CSS classes in a <summary>. This allows you to create visually appealing headers. Just make sure that alternative text or textual content remains accessible for screen readers.

You can check the open property of the <details> element. For example: document.querySelector('details').open will return true if the element is open and false if it is closed. You can also listen to the toggle event to react to state changes.

To master HTML and CSS, including all interactive tags like <summary> and <details>, we recommend following our HTML course. This course will guide you step by step through learning all the essential concepts for creating professional and accessible websites.