For the Love of <details>

by Justin Ferrell published on Dec 23, 2025

Skip to comments

When you list all the things HTML can do out of the box without the help of CSS or Javascript, it can seem like a short list. Headings and lists will come to mind. You will most likely think of things like images and video. Any good list of HTML elements will grow to include form elements like input and select, the original interactive elements, too. Recently, a lot of work and attention has turned to some of the lesser known semantic HTML elements too. The work of Heydon Pickering comes to mind, and his incredible effort to explain every HTML element in alphabetical order.

Among the lists and the images and the forms and the videos though, I think there is an unsung hero. There is a piece of semantic markup that exists at the intersection of SEO, accessibility, performance and interactivity.

I am talking of course about the <details> element and its partner, the <summary> element.

<details> Details

For the uninitiated, the <details> element acts as a disclosure widget. When I was getting my start in early 2011, the <details> element would have (incorrectly) been called an accordion if it existed at the time. It consists of an outer <details> element with a <summary> element nested directly beneath it. In its “closed” state, only the <summary> element is visible. When open (with an [open] attribute present on the <details> element) all of the content following the <summary> element is made visible.

The most remarkable thing about the <details> element is that this disclosure functionality requires no dependencies of any kind. It requires zero CSS or Javascript of any kind, is keyboard navigable and accessible out of the box and is widely understood by search engines and web crawlers alike, making it a semantic choice for things like FAQ’s.

Put simply, <details> is one of the few semantic, interactive elements HTML gives us. That scarcity makes it special.

<details> Are Always in Style

If an element gives you so much for free, surely it must fight back when you try to style it, right?

Not the case!

The triangle disclosure icon that you see in a <details> element is actually the list-item marker of the <summary> element. In modern browsers, you can target it with the summary::marker pseudo-element. You can change the size, color, icon and even if the symbol is present at all.

Because the open state of the <details> element is marked using an [open] attribute, it’s possible to target the <details> element, the <summary> element and anything therein just by using an attribute selector.

And using the ::details-content selector, you can target the inner content of the <details> element too! This ::details-content selector is particularly powerful when paired with the [open] attribute selector.

Though browser support isn’t perfect, it’s even possible to tweak the animation and transition of a <details> element from its open state to its closed state.

The Devil and the <details>

Just like its Cascading Counterpart, Javascript is no stranger to the <details> element.

The <details> element fires a toggle event when opened or closed. You can attach an event listener to that just like you would with any other element.

To really get at what makes the <details> element tick though, you can always set the open property of the element to true/false to open or close the widget respectively.

Prevails Through <details>

The power of <details> does not stop with how you can style it and how you can interact with it via Javascript. The <details> element has additional capabilities via good old HTML that are arguably more powerful than anything you can do it with Javascript.

Deeping Linking

A handy feature of most modern browsers (looking at you, Safari) is that navigating to an anchor or fragment inside a closed <details> will automatically open it so the user can see the target.

Remarkably, on-page search supports the <details> element too! Browsers support varies but in most modern browsers, traditional "Command/Control + F" search will query the contents of the <details> element and expand them as needed.

Exclusivity

Details elements support a name attribute to group them into an exclusive set (like radio buttons). If multiple <details> share the same name, opening one will automatically close any others in that group.

It's worth flagging the potential for accessibility issues related to this feature. Exclusive <details> elements are more likely to cause a higher cognitive load and make the comparison of details more difficult. Exclusive <details> elements are by nature more complicated to use with a keyboard and may also cause issues with visibility and screen readers.

"But her <details>!"

In 2025, <details> is well supported across major browsers, though some versions of Safari still have quirks like not auto-opening on anchor links. It’s pretty unlikely that you’ll run into meaningful issues but it’s always good to see what browsers your users are using.

In <summary>

While humble on the surface, the <details> element is an untapped treasure trove of interactivity. It can do so much out of the box but paired with some creative HTML and CSS, it’s easy to imagine dozens of uses for the <details> element that do not compromise on performance, accessibility or SEO visibility.

Here are 6 not-so-real world examples with a focus on accessibility and SEO.

• Frequently Asked Questions (FAQs): This really is the gold standard for this element. It can help keep pages tidy while ensuring the content is fully indexable by search engines and completely accessible to screen readers without complex ARIA attributes.
• Video & Audio Transcripts: A massive SEO and accessibility win. <details> allows you to include the full text of a podcast or video for keyword indexing and hearing-impaired users, without forcing users to scroll past a massive wall of text to reach the footer.
• Product Specification Tables: <details> allows you to hide dense, technical rows (dimensions, materials, voltages) that are crucial for technical SEO rankings but visually overwhelming for the average shopper.
• Table of Contents: Placing a collapsible "On this page" navigation widget at the top (or sticky side) of long articles helps bots understand page structure and helps users jump to relevant sections immediately.
• Long-form Content "TL;DR": Placing an Executive Summary at the very top of a long article that expands for the full breakdown. This improves "Time on Page" metrics by letting users get the gist immediately rather than bouncing because the article looks too long.
• Expanded Author Bios: Enhance your E-E-A-T (Experience, Expertise, Authoritativeness, and Trustworthiness) signals by including full credentials, past work, and social links in a bio that expands, rather than just a simple name and photo.

I hope you find even more uses for <details> in your own work!

About Justin Ferrell

Justin Ferrell is a web and mobile developer, creator of Mastowatch and Audracity. He is the Technical Director at Digital Relativity, an ad agency in West Virginia, where he has led web and mobile development since 2011.

Personal Blog: ferrell.rocks
LinkedIn: Justin Ferrell
Mastodon: @developerjustin