New Semantic and Media Elements in HTML5

HTML5 (finalized 2014, and continuously extended since) brought a wave of new elements that reduced reliance on generic <div> soup and third-party plugins.

New semantic structure elements, covered in more depth in the Semantic HTML chapter:

<header>, <footer>, <nav>, <main>, <article>, <section>, <aside>, <figure>, <figcaption>, <details>, <summary>, <time>, <mark>

Two worth a closer look:

<details>
  <summary>Click to see more</summary>
  <p>Hidden content revealed when clicked — no JavaScript required.</p>
</details>

<time datetime="2026-09-11">September 11, 2026</time>

<details>/<summary> create a native collapsible section — the browser handles the open/close toggle entirely on its own. <time> marks up a human-readable date/time while providing a machine-readable version in datetime, which search engines and calendar apps can parse reliably.

New media elements, covered in the Images & Media chapter, replaced Flash-based plugins entirely:

<video controls src="movie.mp4"></video>
<audio controls src="song.mp3"></audio>
<canvas id="drawing-surface" width="400" height="300"></canvas>
<svg width="100" height="100"><circle cx="50" cy="50" r="40" /></svg>

<canvas> provides a blank drawing surface controlled entirely via JavaScript (used for games, charts, image editing), while <svg> embeds resolution-independent vector graphics directly in the markup.