HTML5 Features & Platform APIs

HTML5 is not a version number anymore — it's the living standard. But the features introduced during the HTML5 era represent the most significant expansion of web capabilities since the platform's inception: semantic elements, multimedia without plugins, offline storage, real-time communication, and device access.

Semantic Elements

HTML5 introduced elements that carry meaning beyond visual presentation:

<header>    <!-- Site/section header -->
<nav>       <!-- Navigation links -->
<main>      <!-- Primary content (one per page) -->
<article>   <!-- Self-contained, distributable content -->
<section>   <!-- Thematic grouping with a heading -->
<aside>     <!-- Tangentially related content -->
<footer>    <!-- Site/section footer -->
<figure>    <!-- Self-contained media with caption -->
<figcaption><!-- Caption for <figure> -->
<time>      <!-- Machine-readable date/time -->
<mark>      <!-- Highlighted/relevant text -->
<details>   <!-- Expandable disclosure widget -->
<summary>   <!-- Visible heading for <details> -->
<dialog>    <!-- Native modal/dialog -->
<output>    <!-- Result of a calculation -->
<progress>  <!-- Progress indicator -->
<meter>     <!-- Scalar measurement within a known range -->

Native Dialog Element

<dialog id="confirm-dialog">
  <h2>Are you sure?</h2>
  <p>This action cannot be undone.</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Confirm</button>
  </form>
</dialog>

const dialog = document.getElementById('confirm-dialog');
dialog.showModal();   // Opens as modal (with backdrop, traps focus)
dialog.show();        // Opens as non-modal
dialog.close('confirm'); // Closes with return value
 
dialog.addEventListener('close', () => {
  console.log(dialog.returnValue); // 'confirm' or 'cancel'
});

<dialog> provides: backdrop (::backdrop pseudo-element), focus trapping, Escape to close, inert on background content — all natively.

Details/Summary (Native Accordion)

<details>
  <summary>System Requirements</summary>
  <ul>
    <li>Node.js 18+</li>
    <li>4GB RAM</li>
    <li>macOS, Windows, or Linux</li>
  </ul>
</details>

No JavaScript needed. The browser handles open/close state and accessibility.

Native Form Features

HTML5 expanded forms with new input types and constraint validation:

<input type="email" required />        <!-- Email validation -->
<input type="url" />                   <!-- URL validation -->
<input type="tel" />                   <!-- Telephone (mobile keyboard) -->
<input type="number" min="0" max="100" step="5" />
<input type="range" min="0" max="100" />
<input type="date" />                  <!-- Native date picker -->
<input type="time" />
<input type="datetime-local" />
<input type="color" />                 <!-- Color picker -->
<input type="search" />               <!-- Search with clear button -->
<input type="file" accept=".pdf,.doc" multiple />
<input pattern="[A-Za-z]{3}" title="Three letters" />
<input minlength="3" maxlength="50" />
 
<datalist id="browsers">              <!-- Autocomplete suggestions -->
  <option value="Chrome" />
  <option value="Firefox" />
  <option value="Safari" />
</datalist>
<input list="browsers" />

Constraint Validation API

const input = document.querySelector('input[type="email"]');
 
input.validity.valid;           // Overall valid?
input.validity.valueMissing;    // Required but empty?
input.validity.typeMismatch;    // Wrong type (e.g., not an email)?
input.validity.patternMismatch; // Doesn't match pattern?
input.validity.tooShort;        // Below minlength?
input.validity.tooLong;         // Above maxlength?
input.validity.rangeUnderflow;  // Below min?
input.validity.rangeOverflow;   // Above max?
 
input.setCustomValidity('Custom error message');
input.reportValidity(); // Shows native validation tooltip

Canvas API

<canvas id="chart" width="600" height="400"></canvas>

const ctx = document.getElementById('chart').getContext('2d');
 
ctx.fillStyle = '#3b82f6';
ctx.fillRect(10, 10, 100, 50);
 
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2);
ctx.fill();
 
ctx.font = '16px Inter';
ctx.fillText('Hello Canvas', 50, 100);

Canvas is immediate mode (pixel-based). For declarative, retained-mode graphics, use SVG instead.

Web Storage

// localStorage — persists across sessions
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear();
 
// sessionStorage — cleared when tab closes
sessionStorage.setItem('form-draft', JSON.stringify(formData));
 
// Storage event — fires in OTHER tabs for the same origin
window.addEventListener('storage', (e) => {
  console.log(`${e.key}: ${e.oldValue} → ${e.newValue}`);
});

Feature	localStorage	sessionStorage	Cookies
Capacity	~5-10MB	~5-10MB	~4KB
Lifetime	Until cleared	Until tab closes	Configurable (Expires/Max-Age)
Sent with requests	No	No	Yes (every request)
Accessible from JS	Yes	Yes	Yes (unless `HttpOnly`)
Scope	Origin-wide	Per tab	Configurable (domain, path)

Drag and Drop API

element.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', element.id);
  e.dataTransfer.effectAllowed = 'move';
});
 
dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
});
 
dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  dropZone.appendChild(document.getElementById(id));
});

Geolocation API

navigator.geolocation.getCurrentPosition(
  (pos) => console.log(pos.coords.latitude, pos.coords.longitude),
  (err) => console.error(err.message),
  { enableHighAccuracy: true, timeout: 5000 }
);
 
const watchId = navigator.geolocation.watchPosition(callback);
navigator.geolocation.clearWatch(watchId);

History API

history.pushState({ page: 2 }, '', '/page/2');
history.replaceState({ page: 1 }, '', '/page/1');
 
window.addEventListener('popstate', (e) => {
  renderPage(e.state);
});

This is the foundation of all single-page application routers.

Other Key HTML5 APIs

API	Purpose
WebSocket	Full-duplex real-time communication
Web Workers	Background threads for CPU-intensive work
Service Workers	Offline support, push notifications, caching
IndexedDB	Client-side structured data storage
Fetch API	Modern HTTP requests (replaced XMLHttpRequest)
Notification API	System-level push notifications
Page Visibility	Detect tab visibility changes
Fullscreen API	Request fullscreen mode
Web Audio	Audio processing and synthesis
MediaDevices	Camera and microphone access
Clipboard API	Read/write system clipboard
Web Share	Native share dialog (mobile)
Intersection Observer	Detect element visibility

Content Attributes (data-*)

<button data-action="delete" data-id="42">Delete</button>

const btn = document.querySelector('button');
btn.dataset.action;  // 'delete'
btn.dataset.id;      // '42'

Custom data attributes provide a clean way to attach metadata to elements without non-standard attributes.

Interview Signal

Senior candidates demonstrate:

Semantic element purpose — Not just naming tags, but understanding ARIA role mapping, accessibility tree impact
Native form power — Constraint Validation API, input types with mobile keyboard implications, <datalist> for suggestions
<dialog> element — Native modal with focus trapping, backdrop, form method="dialog"
Storage trade-offs — localStorage vs sessionStorage vs cookies vs IndexedDB, capacity, scope, security
API breadth — Awareness of platform capabilities (geolocation, web workers, intersection observer) that reduce JavaScript framework dependency