HTML5 Features & APIs
HTML5 beyond basic markup
HTML5 introduced more than just new tags — it brought built-in APIs that used to require plugins (like Flash) or complex JavaScript libraries. Let's explore the most useful ones.
The <details> and <summary> elements
A native disclosure widget — no JavaScript needed:
HTML
<details>
<summary>What is your return policy?</summary>
<p>You can return items within 30 days of purchase for a full refund.</p>
</details>This creates a collapsible section. The
<summary> is the clickable heading, and everything else inside <details> is hidden until clicked.You can use the
open attribute to have it expanded by default:HTML
<details open>
<summary>Shipping info</summary>
<p>Free shipping on orders over $50.</p>
</details>The <dialog> element
A native modal dialog:
HTML
<dialog id="my-dialog">
<h2>Confirm action</h2>
<p>Are you sure you want to delete this item?</p>
<form method="dialog">
<button value="cancel">Cancel</button>
<button value="confirm">Confirm</button>
</form>
</dialog>
<button onclick="document.getElementById('my-dialog').showModal()">
Delete item
</button>showModal() opens the dialog with a backdrop. method="dialog" on the form automatically closes the dialog when a button is clicked. This handles focus trapping and Escape key automatically — things that are notoriously hard to implement correctly with custom modals.Web Storage: localStorage and sessionStorage
HTML5 defines Web Storage — a simple key-value store in the browser, accessed from JavaScript but scoped to your site's origin (protocol + domain + port). Nothing in the HTML markup itself holds the data; instead, the HTML page is the host that scripts read and write. Understanding the two storage objects helps you choose the right persistence model before writing a line of JS.
localStorage keeps data after the tab or browser closes — ideal for user preferences like theme, sidebar collapse state, or draft form text the user should not lose accidentally:
JavaScript
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme'); // "dark"
localStorage.removeItem('theme');sessionStorage uses the same API but clears when the tab closes. Use it for data that should not leak across sessions — multi-step wizard state within one visit, or temporary filters on a search results page.
Limitations:
- Only stores strings (use
JSON.stringify/JSON.parsefor objects). - 5–10 MB limit per origin.
- Synchronous — don't store large amounts of data.
- No expiration — localStorage data stays until manually removed or the user clears browser data.
- Never store secrets (tokens, passwords) — any script on the same origin can read it.
getItem returns null.The <template> element
Holds HTML that isn't rendered until you clone it with JavaScript:
HTML
<template id="card-template">
<div class="card">
<h3 class="card-title"></h3>
<p class="card-body"></p>
</div>
</template>JavaScript
const template = document.getElementById('card-template');
const clone = template.content.cloneNode(true);
clone.querySelector('.card-title').textContent = 'Hello';
clone.querySelector('.card-body').textContent = 'World';
document.body.appendChild(clone);This is useful for rendering lists of items without writing HTML strings in JavaScript.
Content Editable
Make any element editable directly in the browser:
HTML
<div contenteditable="true">
Click here and start typing...
</div>This is how many rich text editors work under the hood.
Drag and Drop
HTML5 has a native drag and drop API:
HTML
<div draggable="true" ondragstart="event.dataTransfer.setData('text', 'hello')">
Drag me
</div>
<div ondrop="alert(event.dataTransfer.getData('text'))" ondragover="event.preventDefault()">
Drop here
</div>The
ondragover="event.preventDefault()" is necessary — by default, elements don't allow drops.Geolocation API
Get the user's location (requires permission):
JavaScript
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position.coords.latitude, position.coords.longitude);
},
(error) => {
console.log('Location access denied');
}
);Always provide a fallback for users who deny permission.
The <picture> element for art direction
Beyond responsive sizing,
<picture> lets you serve entirely different images based on conditions:HTML
<picture>
<source media="(prefers-color-scheme: dark)" srcset="logo-dark.png" />
<source media="(max-width: 600px)" srcset="logo-small.png" />
<img src="logo.png" alt="Site logo" />
</picture>Canvas and SVG in HTML
HTML5 added
<canvas> — a bitmap drawing surface you paint with JavaScript (charts, games, image filters). The element itself is just a rectangular placeholder; all pixels are drawn programmatically:HTML
<canvas id="chart" width="400" height="200"></canvas>Inline SVG embeds vector graphics directly in the document tree. Unlike canvas, SVG shapes remain DOM nodes — styles, scripts, and accessibility attributes can target individual paths:
HTML
<svg viewBox="0 0 100 100" width="100" height="100" aria-label="Progress ring">
<circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" stroke-width="8" />
</svg>Choose canvas when you need pixel-level animation at high frame rates; choose SVG (or
<img src="diagram.svg">) for logos, icons, and diagrams that should scale crisply and stay accessible. Both integrate with CSS and JavaScript in modern browsers without plugins.Progressive enhancement mindset
HTML5 APIs work best when the page remains usable without them. A
<details> FAQ still shows content if JavaScript fails. A geolocation feature should offer manual address entry. Storage-backed theme toggles should respect prefers-color-scheme on first visit before any script runs. Build the HTML foundation first, then layer APIs where they genuinely improve the experience.Key takeaway
HTML5 provides powerful features beyond basic markup. Native
<details>, <dialog>, <template>, local storage, and geolocation reduce your dependency on JavaScript libraries. Use them — they're well-supported across modern browsers and more accessible by default.