HTML Tutorial / Create Expandable Content with details and summary
details and summary create content users can expand and collapse without writing JavaScript. They suit optional explanations, longer instructions, or answers readers may want to reveal on demand.
Create a basic disclosure
<details> <summary>View opening hours</summary> <p>We are open Monday through Friday, 9 a.m. to 6 p.m.</p> </details>
Put the code in an HTML document's body and open it in a browser. Initially, only “View opening hours” appears. Activate that text with a pointer or keyboard to reveal the paragraph; activate it again to close it. Put summary first inside details. The browser supplies the basic disclosure state and interaction; you do not need a script merely to open and close it.
The marker and borders can look different across browsers or after CSS styling. What matters is that the label remains clear, the content opens and closes, and the keyboard focus remains visible.
Show the content initially
Add the open attribute when the panel should start expanded. Users can still close and reopen it.
<details open> <summary>Delivery information</summary> <p>Arrival times vary by area.</p> </details>
open is a boolean attribute. Writing open="false" still leaves the attribute present and starts the panel open. Remove the attribute entirely to start closed. Do not hide a condition everyone must read as though it were optional supplementary information.
Choose useful summaries
Several details elements can appear together, but each summary should identify what it reveals. Repeating “More information” makes the items hard to distinguish. A frequently asked question may fit this pattern, but if its answer is short and immediately useful, ordinary visible text may be faster for readers.
Test the result with a keyboard and on a narrow screen. The MDN details reference describes its structure and attributes.
If it does not work
Check that summary is inside details and that the closing tags are present. If you styled the control, make sure the clickable area and visible focus indicator were not removed. A disclosure makes readers take an extra action, so reserve it for genuinely optional or lengthy content rather than using it just for visual effect.
HTML Tutorial / Find Errors and Validate an HTML Document
Use the Nu HTML Checker to find markup errors, repair a duplicate ID, and supplement validation with browser and keyboard checks.
HTML Tutorial / Images: img, Alt Text, and Dimensions
Add an image with HTML img, write useful alternative text, and set width and height correctly. A downloadable example helps you test file paths and sizing.
HTML Tutorial / Links: Paths, Page Fragments, and Email
Create HTML links with absolute or relative URLs, jump to a document fragment, and add email, new-tab, or download links. Learn what to verify before publishing.
HTML Tutorial / Form Validation with required, Length, and Range Limits
Apply built-in required, length, and numeric constraints, test error states, and understand why server-side validation remains necessary.
HTML Tutorial / Lists: ul, ol, dl, and Nested Lists
Choose the right HTML list for ordered items, unordered items, and name–description pairs. Try a complete example, custom numbering, and correctly nested lists.
HTML Tutorial / Responsive Images: srcset, sizes, and picture
Offer image resolutions with srcset and sizes, and switch crops with picture. Downloadable files let you test the examples in a browser.
HTML Tutorial / Text Semantics: Emphasis, Quotations, Abbreviations, and Code
Learn when to use HTML em, strong, q, blockquote, abbr, code, and kbd. Examples show how each element conveys meaning rather than just changing the appearance of text.
HTML Tutorial / Headings and Paragraphs
Learn when to use h1–h6 headings, p paragraphs, and br line breaks in HTML. Examples show document hierarchy, browser output, and common mistakes.
HTML Tutorial / Set the Page Title, Description, Language, and Encoding
Build a complete HTML document with title, meta description, language, UTF-8 encoding, and viewport settings, then check their effects.
HTML Tutorial / Table Basics: table, tr, th, and td
Build a basic HTML data table with rows and header or data cells, then organize its headings and body without using tables for page layout.