HTML5 APIs Reference

This lesson explains HTML5 APIs Reference with clear examples, use cases, and best practices so you can use HTML5 APIs confidently in real web applications.

HTML5 APIs by Category

HTML5 APIs give modern websites powerful browser capabilities such as storage, graphics, media, location, drag and drop, background processing, real-time communication, offline support, and device access. These APIs help developers build faster, richer, and more interactive web applications without relying only on external plugins.

This guide organizes the most important HTML5 and modern Web APIs by category so developers can quickly understand what each API is used for and when to apply it in real-world projects.

HTML5 APIs Syntax Reference

The following table provides a quick reference to the most commonly used HTML5 and modern Web APIs, including their primary syntax and typical use cases. Bookmark this table as a handy cheat sheet while developing web applications.

API	Basic Syntax	Primary Use
Local Storage	`localStorage.setItem(key, value)`	Persistent browser storage
Session Storage	`sessionStorage.setItem(key, value)`	Temporary browser storage
IndexedDB	`indexedDB.open("database")`	Large structured client-side database
Cache API	`caches.open("v1")`	Offline caching
Fetch API	`fetch("/api/users")`	HTTP requests
WebSocket API	`new WebSocket(url)`	Real-time communication
Server-Sent Events	`new EventSource(url)`	Server push events
WebRTC	`new RTCPeerConnection()`	Audio and video calls
Geolocation API	`navigator.geolocation.getCurrentPosition()`	User location
Clipboard API	`navigator.clipboard.writeText(text)`	Read and write clipboard
File API	`input.files[0]`	Access uploaded files
FileReader API	`reader.readAsText(file)`	Read file contents
File System Access API	`window.showOpenFilePicker()`	Read and write local files
Canvas API	`canvas.getContext("2d")`	2D graphics
WebGL API	`canvas.getContext("webgl")`	3D graphics
WebGPU API	`navigator.gpu.requestAdapter()`	GPU rendering
Web Audio API	`new AudioContext()`	Audio processing
MediaDevices API	`navigator.mediaDevices.getUserMedia()`	Camera and microphone access
MediaRecorder API	`new MediaRecorder(stream)`	Record audio and video
Picture-in-Picture API	`video.requestPictureInPicture()`	Floating video player
Notification API	`Notification.requestPermission()`	Desktop notifications
History API	`history.pushState(state, "", url)`	SPA navigation
URL API	`new URL(location.href)`	URL parsing
Fullscreen API	`element.requestFullscreen()`	Fullscreen mode
Service Worker API	`navigator.serviceWorker.register()`	Offline support
Push API	`registration.pushManager.subscribe()`	Push notifications
Web Workers API	`new Worker("worker.js")`	Background processing
Shared Worker API	`new SharedWorker("worker.js")`	Shared background thread
Intersection Observer	`new IntersectionObserver(callback)`	Lazy loading
Resize Observer	`new ResizeObserver(callback)`	Element resize detection
Mutation Observer	`new MutationObserver(callback)`	DOM change detection
Performance API	`performance.now()`	Performance measurement
Drag & Drop API	`element.addEventListener("dragstart")`	Drag-and-drop interactions
Broadcast Channel API	`new BroadcastChannel("channel")`	Tab-to-tab communication
Gamepad API	`navigator.getGamepads()`	Game controller input
Device Orientation API	`window.addEventListener("deviceorientation")`	Device motion sensing
Page Visibility API	`document.visibilityState`	Detect active browser tab

1. Storage APIs

Local Storage API
Stores key-value data in the browser with no expiration date. Useful for preferences, themes, and small client-side settings.
Session Storage API
Stores key-value data for the current browser tab session and clears when the tab is closed.
IndexedDB API
Stores large amounts of structured data in the browser. Useful for offline apps, caching, and client-side databases.
Cache API
Stores network requests and responses for offline support and performance optimization, commonly used with service workers.

2. Offline & Progressive Web App APIs

Service Worker API
Runs scripts in the background to support offline access, caching, push notifications, and background sync.
Web App Manifest
Defines installable app metadata such as name, icons, theme color, and display mode for Progressive Web Apps.
Background Sync API
Allows web apps to retry failed network requests when the connection is restored.
Push API
Enables web applications to receive push notifications from a server even when the site is not open.

3. Graphics & Drawing APIs

Canvas API
Provides a drawable 2D surface for charts, games, animations, image editing, and visualizations.
SVG
Creates scalable vector graphics using XML-based markup. Useful for icons, diagrams, charts, and responsive illustrations.
WebGL API
Renders 2D and 3D graphics using GPU acceleration inside the browser.
WebGPU API
Provides modern GPU access for advanced graphics, compute workloads, games, simulations, and high-performance visual applications.

4. Audio, Video & Media APIs

HTML Media API
Controls audio and video playback using native audio and video elements.
MediaDevices API
Accesses camera, microphone, and screen-sharing devices with user permission.
MediaRecorder API
Records audio, video, or screen streams directly in the browser.
Web Audio API
Processes and synthesizes audio for games, music apps, visualizers, and advanced sound effects.
Picture-in-Picture API
Displays videos in a floating window while users continue browsing.

5. Device & Hardware APIs

Geolocation API
Retrieves a user's location with permission. Useful for maps, delivery apps, local search, and location-based services.
Device Orientation API
Detects device rotation and orientation for games, motion interfaces, and augmented reality experiences.
Vibration API
Provides vibration feedback on supported mobile devices.
Battery Status API
Provides battery information where supported, though browser support is limited due to privacy concerns.
Gamepad API
Allows browser games and apps to read input from game controllers.

6. Communication APIs

Fetch API
Makes network requests to servers and APIs using modern promise-based syntax.
WebSocket API
Provides real-time two-way communication between browser and server.
Server-Sent Events API
Streams one-way real-time updates from server to browser.
WebRTC API
Enables real-time audio, video, and peer-to-peer data communication.
Broadcast Channel API
Allows communication between browser tabs, windows, iframes, and workers from the same origin.

7. Worker & Background Processing APIs

Web Workers API
Runs JavaScript in background threads to keep the user interface responsive during heavy processing.
Shared Workers API
Allows multiple browser contexts to share the same background worker.
Service Workers API
Intercepts network requests, manages caching, and powers offline web applications.
Worklets
Runs lightweight scripts for specialized rendering, audio processing, layout, animation, and paint tasks.

8. File, Clipboard & Drag-and-Drop APIs

File API
Allows users to select, read, and process local files in the browser.
FileReader API
Reads file contents as text, data URLs, array buffers, or binary data.
File System Access API
Allows supported browsers to read and write files with user permission.
Clipboard API
Reads from and writes to the system clipboard with user permission.
Drag and Drop API
Enables dragging files, text, or elements within web applications.

9. Performance & Monitoring APIs

Performance API
Measures loading time, runtime performance, and custom performance marks.
Navigation Timing API
Measures page load performance and navigation timing metrics.
Intersection Observer API
Detects when elements enter or leave the viewport. Useful for lazy loading and infinite scrolling.
Resize Observer API
Detects changes to an element's size without polling.
Mutation Observer API
Watches DOM changes such as added elements, removed nodes, or attribute updates.

10. Browser UI & User Experience APIs

History API
Updates browser history and URLs without full page reloads, commonly used in single-page applications.
URL API
Parses, reads, and modifies URLs and query parameters.
Fullscreen API
Displays an element or application in full-screen mode.
Page Visibility API
Detects whether a page is visible or hidden to optimize performance and pause background activity.
Notification API
Displays system notifications after user permission is granted.

Pro Tip

Start with the APIs that solve common real-world problems: Fetch for server communication, Local Storage and IndexedDB for client storage, Canvas for graphics, Geolocation for location features, and Service Workers for offline support. As your application grows, explore advanced APIs such as WebRTC, WebGL, Web Audio, and WebGPU.