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.Local Storage
Store data in the browser that persists even after the page is closed:
JavaScript
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme'); // "dark"
localStorage.removeItem('theme');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 — data stays until manually removed or the user clears browser data.
sessionStorage works the same but is cleared when the tab closes.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>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.