HTML5 New Elements Overview

Discover key HTML5 additions: details/summary, dialog, progress, meter, datalist, and template.

Overview

HTML5 (the current standard) introduced many new elements beyond semantic layout tags. These elements handle common UI patterns natively no JavaScript required for basic behavior. Key HTML5 elements you should know: - <details> + <summary>: native accordion/disclosure widget - <dialog>: native modal/dialog overlay - <progress>: progress bar - <meter>: a gauge for a known range - <datalist>: autocomplete suggestions for text inputs - <template>: HTML fragment that is parsed but not rendered - <picture>: responsive image selection

Key Points

•<details>+<summary> creates a native accordion no JS needed for toggle
•<dialog> is a native modal; call showModal() or open attribute
•<progress value="70" max="100"> renders a progress bar at 70%
•<meter> is for gauges with a known range (like disk usage, scores)
•<datalist> provides autocomplete suggestions for <input> via list attribute
•<picture> with <source media="..."> enables responsive/art-directed images

Examples

Details and summary native accordion

<details>
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard language for creating web pages.</p>
</details>

<details open>
  <summary>Open by default</summary>
  <p>Adding the open attribute makes this panel open on load.</p>
</details>

Clicking <summary> toggles the panel open/closed no JavaScript needed.

Progress and meter

<!-- Upload progress: 60 of 100 -->
<label>Upload progress:</label>
<progress value="60" max="100">60%</progress>

<!-- Disk usage gauge -->
<label>Disk used: <meter value="70" min="0" max="100" low="20" high="80" optimum="50">70 GB</meter></label>

Datalist for autocomplete

<label for="browser">Browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

Users can type and see matching suggestions, or type anything not in the list.

Responsive picture element

<picture>
  <source media="(max-width: 600px)" srcset="hero-mobile.jpg">
  <source media="(max-width: 1200px)" srcset="hero-tablet.jpg">
  <img src="hero-desktop.jpg" alt="Team photo">
</picture>

The browser picks the first matching source. The <img> is the fallback.

Common Mistakes

Using <progress> for gauges (use <meter>) or <meter> for progress (use <progress>)
Forgetting that <datalist> only suggests users can still type anything
Using <details>/<summary> when a styled accordion in CSS/JS gives more design control

Note

<details>/<summary> is perfect for FAQ pages and changelogs pure HTML, accessible, and browser-native. For complex accordions with animations, CSS transitions or JavaScript give more control.

HTML5 New Elements Overview

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does clicking <summary> inside <details> do?