The <details> and <summary> tags are a pair of native HTML5 elements that create a semantic disclosure widget (accordion), explicitly linking a summary label (the trigger) to a detailed description (the content) in the DOM. Unlike JavaScript-based accordions, which are semantically opaque div soup, these tags give AI agents a hard-coded Question-Answer relationship: a native signal for importance hierarchy and logical content grouping during vector ingestion.
The Problem: The Accordion Trap and Vector Drift
For the last decade, frontend developers have built accordions using JavaScript, React state, and nested <div>s.
To a human, this looks fine. To an LLM or RAG pipeline, it's a disaster for three reasons:
Your FAQ page, which should be the single best source of truth for an AI answering questions about your product, becomes a fragmented mess of disconnected text strings. The AI reads the question but loses the answer.
The Solution: Native Q&A Modeling
The <details> element changes the game because it transforms layout into logic. When a crawler encounters this tag pair, it understands a clear hierarchy: the parent (<details>) is the container of the concept, the key (<summary>) is the high-level label, question, or entity name, and the value (everything else inside) is the explanation, answer, or nuance.
The Progressive Disclosure Heuristic for RAG
Advanced RAG scrapers (Perplexity, SearchGPT) are beginning to use a summarization-first strategy. First they scan the <summary> tags to get a high-level map of the page's topics. Then they decide which <details> block matches the user's intent. Finally they ingest only the content of that specific block. The AI navigates your page like a database, retrieving specific answers with high precision rather than ingesting the whole page and guessing the context.
Technical Implementation: The Perfect FAQ Block
To maximize visibility, pair the semantic HTML with Schema.org structured data. A double-tap of clarity: one for the HTML parser, one for the JSON-LD parser. Don't add onclick events. Use the native open attribute if you want it expanded by default, though it's best to let the user control it.
Notice the use of the name attribute (new in Chrome 120+). It enables exclusive accordion behavior (opening one closes others) natively, without a single line of JavaScript.
The Caveat Pattern (Brand Safety)
One of the best uses for <details> is to hide caveats, disclaimers, or complex terms that are necessary for truth but clutter the UI. By placing legal disclaimers inside a <details> tag labeled "View Terms & Conditions," you ensure the text is accessible to the AI (protecting you from brand hallucinations about your policies) without ruining the visual experience.
JS Accordions vs. Semantic HTML
Feature | JS Accordion (<div>) | Semantic HTML (<details>) |
Semantics | Generic (no meaning) | Explicit (parent/child/label) |
Crawler Visibility | Risk (depends on rendering) | High (text always available) |
Accessibility (a11y) | Requires ARIA attributes | Native (keyboard/screen reader ready) |
JS Dependency | High (React/Vanilla JS) | Zero (works without JS) |
RAG Utility | Low (context often lost) | High (logical Q&A pairs) |
Performance | Heavy (script execution) | Instant (browser native) |
The A11y / AI Overlap
Note the intersection between accessibility (a11y) and artificial intelligence. Screen readers (for the blind) and AI crawlers (for LLMs) function very similarly: they both traverse the DOM programmatically, relying on semantic tags to understand structure. If a screen reader knows that <summary> is a button that expands content, the AI knows it too. If your site is optimized for a11y (WCAG standards), it's almost always optimized for AEO. Using <details> isn't just an SEO tactic. It's an inclusive design pattern that pays dividends in machine readability, and it's why this disconnect shows up at the chunk level too, as we cover in The Semantic Schism.
Code Example: Dual-Layer Optimization
How to combine the semantic HTML with the JSON-LD for maximum ingestibility on your Entity Home FAQ section.
This looks redundant, but it's necessary redundancy. The HTML provides context for the page vectors. The JSON-LD provides the structured answer for the Knowledge Graph. Render the inner table cleanly to avoid the token tax.
Check whether your FAQ answers are reaching the AI.
Free audit. Flags JS accordions with hidden answers, missing FAQPage schema, and disconnected Q&A pairs.
Audit your FAQ structure →Key Takeaways
- Stop using divs for logic. If an element opens and closes to reveal information, it has to be a <details> tag.
- The summary is the hook. Treat the text inside <summary> as your H2: keyword-rich, phrased as a question or clear label.
- Native equals fast. Native HTML elements render faster than React components, and speed correlates with crawl depth.
- Implicit grouping. RAG parsers treat the content inside <details> as child data belonging to the <summary>, which protects your content from being taken out of context.
- Clean code. The <details> tag lets you delete hundreds of lines of JavaScript event listeners and CSS hackery. Less code means higher token density.
References & Further Reading
- MDN Web Docs: The Details disclosure element. Official documentation on the specs and accessibility features of the tag.
- W3C HTML5 Spec: Interactive Elements. The technical specification defining the summary/details relationship.
- Google Search Central: FAQ Structured Data. Guidelines on how to explicitly mark up questions and answers for rich results.
