details, summary, time, address and other Semantic Elements

details and summary

A collapsible disclosure widget, built in, keyboard accessible, and requiring no JavaScript at all.

<details>
  <summary>What documents do I need?</summary>
  <p>A photocopy of your identity card, two photographs and the original receipt.</p>
</details>

• summary is the visible label and must be the first child. It is focusable and toggles on Enter or Space.
• Everything else inside details is the panel.
• The open attribute makes it start expanded.

<details open>
  <summary>Term dates</summary>
  <p>Teaching runs from 15 July to 30 November.</p>
</details>

An accordion

Give several details the same name and only one can be open at a time - an exclusive accordion with no script.

<details name="faq">
  <summary>How do I apply?</summary>
  <p>Fill in form D-2 at the examination office.</p>
</details>

<details name="faq">
  <summary>When do applications close?</summary>
  <p>On 30 June, at five in the afternoon.</p>
</details>

Styling

details {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;          /* remove the default triangle */
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  float: right;
}
details[open] summary::after { content: "2212"; }

Two things to know

• Content inside a closed details is still in the DOM and is found by the browser find command, which will open the panel to reveal a match. That is a feature.
• The panel cannot be animated with a simple height transition, because the browser toggles between no box and a full box. Recent CSS makes this possible; older approaches need a wrapper element.

time

Marks a date or a time in a machine readable form. The visible text can be written however you like; the datetime attribute carries the exact value.

<time datetime="2026-06-01">1 June 2026</time>
<time datetime="2026-06-01T17:00">five in the afternoon</time>
<time datetime="2026-06-01T17:00+05:30">17:00 IST</time>
<time datetime="2026-06">June 2026</time>
<time datetime="PT2H30M">two and a half hours</time>

Why bother: calendars can offer to add the event, search engines can show the date in a result, scripts can sort by it, and translation tools can reformat it. Next Tuesday means nothing to a machine; datetime="2026-06-02" does.

<article>
  <h2>Open day</h2>
  <p>Published <time datetime="2026-03-02">two weeks ago</time></p>
  <p>The next open day is <time datetime="2026-06-14T10:00+05:30">14 June, ten in the morning</time>.</p>
</article>

address

Contact details for the nearest article or for the page as a whole. It is not a general purpose element for postal addresses.

<footer>
  <address>
    Written by <a href="mailto:meera@example.edu">Meera Iyer</a>.<br>
    Riverside College, Sadar Bazaar Road, Pune 411001<br>
    <a href="tel:+912026001234">+91 20 2600 1234</a>
  </address>
</footer>

A shop listing its branch addresses should not use address for each one - those are data, not contact details for the author of the content.

progress and meter

Two elements that look similar and mean different things.

<!-- progress: a task moving towards completion -->
<label for="upload">Uploading</label>
<progress id="upload" value="42" max="100">42%</progress>

<!-- indeterminate: no value attribute -->
<progress></progress>

<!-- meter: a measurement within a known range -->
<label for="storage">Storage used</label>
<meter id="storage" value="7.4" min="0" max="10" high="8" optimum="0">7.4 of 10 GB</meter>

progress is for something being completed. meter is for a static measurement - disk usage, a score, a rating - and the low, high and optimum attributes let the browser colour it as good or bad.

Other elements worth knowing

Important rules

• summary must be the first child of details, and there may be only one.
• A details with no summary gets a browser generated label such as Details.
• datetime must be a valid date or duration string, not free text.
• address must not contain anything other than contact information.
• progress and meter both need a label; neither is self describing.
• Fallback text between the tags of progress and meter is shown by browsers that do not support them.

Common mistakes

• Building an accordion with three hundred lines of JavaScript when details would do.
• Putting summary anywhere but first.
• Using time with no datetime, which throws away the entire benefit.
• Using address for every postal address on the page.
• Using meter for progress or progress for a measurement.
• Hiding important content inside a closed details that a reader has no reason to open.

Best practices

• Reach for details before writing a disclosure component.
• Use the name attribute for exclusive accordions.
• Wrap every date in time with a correct datetime.
• Write summary text as a question when the panel is an answer.
• Keep address for authorship and site contact only.
• Label progress and meter, and put the numbers in text as well.

Practice

1. Build a six question FAQ with details, then make it exclusive with the name attribute.
2. Style a details so the marker is a plus that becomes a minus when open.
3. Mark up three dates written in different visible formats with correct datetime values.
4. Build a storage indicator with meter and set high so it changes colour near the limit.