HTML5 Content Elements
1. Introduction
Beyond landmark elements, HTML5 provides a family of content-specific elements that add rich semantic meaning to text and media: <figure>, <figcaption>, <time>, <address>, <details>, <summary>, and <output>. These elements eliminate the need for meaningless <div>/<span> combinations and give assistive technologies, search engines, and developers a clear signal about every piece of content.
2. Concept
HTML5 Content Elements at a Glance
| Element | Semantic Purpose | Key Attribute |
|---|---|---|
<figure> |
Self-contained referenced content (image, chart, code) | — |
<figcaption> |
Caption/legend for a figure | — |
<time> |
Machine-readable date/time | datetime |
<address> |
Contact info for nearest ancestor article/body | — |
<details> |
Disclosure widget — hidden until expanded | open |
<summary> |
Visible toggle label for details | — |
<output> |
Result of a calculation or user action | for |
datetime attribute on <time> must use ISO 8601 format: YYYY-MM-DD for dates, HH:MM for times, YYYY-MM-DDTHH:MM for combined values. The visible text can be any human-friendly format you choose.<details> and <summary> create a native JavaScript-free accordion. Add the boolean open attribute to <details> to make the content visible by default on page load.<address> is strictly for contact information of the nearest ancestor <article> or <body>. Do not use it for arbitrary postal addresses in article body text — use a <p> there instead.3. Basic Example
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Content Elements Demo</title></head>
<body>
<!-- figure + figcaption -->
<figure>
<img
src="https://via.placeholder.com/600x300"
alt="Bar chart showing 23% Q1 sales growth across all regions"
width="600" height="300"
>
<figcaption>Figure 1 — Q1 2025 Sales Growth by Region</figcaption>
</figure>
<!-- time with machine-readable datetime -->
<p>Published: <time datetime="2025-03-10">10 March 2025</time></p>
<p>Event at <time datetime="2025-04-15T09:00">9 AM on 15 April 2025</time>.</p>
<!-- details + summary -->
<details>
<summary>What browsers support HTML5?</summary>
<p>All modern browsers — Chrome, Firefox, Safari, and Edge — fully support HTML5. Internet Explorer is end-of-life.</p>
</details>
<details open>
<summary>Is this course free?</summary>
<p>Yes — all lessons are completely free with no account required.</p>
</details>
<!-- address -->
<address>
Written by <a href="mailto:alice@devblog.com">Alice Smith</a>.
<a href="https://twitter.com/alice">@alice on Twitter</a>
</address>
</body>
</html>
4. How It Works
Step 1 — figure and figcaption
<figure> wraps content referenced from the main text that could move to an appendix without affecting the flow — images, diagrams, code blocks, tables, or SVGs. <figcaption> links a caption to it. Screen readers announce the caption alongside the figure. Place <figcaption> as the first or last child of <figure>.
Step 2 — time and datetime
Visible text is for humans; datetime is for machines. Search engines use it for “Published 3 days ago” rich snippets. Calendar apps can parse events. JavaScript date parsing becomes trivial via element.dateTime.
Step 3 — details and summary
Browsers render a disclosure triangle next to <summary>. Clicking toggles the open attribute, showing or hiding the rest of <details> content. Zero JavaScript required. The toggle event fires on state change for optional scripting.
Step 4 — address
Inside an <article>, <address> refers to the article author’s contact info. At page level, it refers to the website owner’s contact info. Never use it for generic body text postal addresses — semantic misuse confuses screen readers.
5. Real-World Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Annual Report 2024</title>
</head>
<body>
<main>
<article>
<header>
<h1>Annual Report 2024</h1>
<p>Published <time datetime="2025-02-28">28 February 2025</time></p>
</header>
<section>
<h2>Revenue Overview</h2>
<p>Total revenue reached £42 million — a 31% year-on-year increase (see Figure 1).</p>
<figure>
<img
src="/charts/revenue-2024.png"
alt="Line chart: revenue grew from £32m in 2023 to £42m in 2024"
width="720" height="400" loading="lazy"
>
<figcaption>Figure 1 — Annual Revenue 2022–2024 (GBP millions)</figcaption>
</figure>
</section>
<section>
<h2>Frequently Asked Questions</h2>
<details>
<summary>When will dividends be paid?</summary>
<p>Dividends of £0.32/share will be paid on <time datetime="2025-04-30">30 April 2025</time>.</p>
</details>
<details>
<summary>Who audited the accounts?</summary>
<p>Independently audited by Grant Thornton UK LLP, opinion dated <time datetime="2025-02-20">20 February 2025</time>.</p>
</details>
<details open>
<summary>How do I access full financial statements?</summary>
<p>Full audited statements are available on the <a href="/investor-relations">Investor Relations</a> page.</p>
</details>
</section>
<footer>
<address>
For investor enquiries contact
<a href="mailto:ir@company.com">ir@company.com</a> or call
<a href="tel:+442071234567">+44 207 123 4567</a>.
</address>
</footer>
</article>
</main>
</body>
</html>
6. Common Mistakes
❌ Using <p> for captions instead of <figcaption>
<figure>
<img src="chart.png" alt="Sales chart">
<p>Figure 1 — Sales data</p>
</figure>✓ Use <figcaption> — semantically linked to its figure
<figure>
<img src="chart.png" alt="Sales chart">
<figcaption>Figure 1 — Sales data</figcaption>
</figure>❌ Missing datetime attribute on <time>
<time>March 10, 2025</time>✓ Always include ISO 8601 datetime
<time datetime="2025-03-10">March 10, 2025</time>7. Try It Yourself
8. Quick Reference
| Element | Purpose | Key Notes |
|---|---|---|
<figure> |
Self-contained referenced content | Can contain image, code, table, SVG |
<figcaption> |
Caption for figure | First or last child of <figure> |
<time datetime> |
Machine-readable date/time | ISO 8601 in datetime attribute |
<address> |
Contact info | Not for general postal addresses in prose |
<details> |
Disclosure widget | boolean open = visible by default |
<summary> |
Toggle label | First child of <details> |
<output> |
Dynamic calculated result | Use for to link to form inputs |