HTML Web APIs Overview
In this page:
What Counts as a Web API
A Web API is a set of JavaScript objects and methods that a browser exposes to let a page do more than static HTML alone allows -- reading the device's location, saving data across page visits, or opening a live connection to a server are all things HTML and CSS cannot do on their own, which is exactly the gap these APIs fill.
Note: Think of Web APIs as browser-provided tools your JavaScript can call, not as new HTML tags to memorize -- the HTML side is usually just the button or element that triggers the API call.
Warning: Not every browser supports every Web API equally; always check for feature availability (like if (navigator.geolocation)) before relying on one in production code.
Example: What Counts as a Web API
<script>
if (navigator.geolocation) {
console.log('Geolocation API is available');
}
</script>The Five APIs Covered in This Chapter
This chapter walks through five specific Web APIs in depth: Geolocation (reading the user's physical location), Drag and Drop (letting users drag page elements with the mouse), Web Storage (saving key-value data in the browser between visits), Web Workers (running JavaScript in a background thread), and Server-Sent Events (receiving a live, one-way stream of updates from a server).
Note: Read these five topics in order if you are new to Web APIs -- Geolocation and Web Storage are the simplest starting points before moving to Workers and SSE.
Warning: These five APIs solve very different problems; do not assume skills from one (like Web Storage) transfer directly to understanding another (like Web Workers) without reading its own topic.
Example: The Five APIs Covered in This Chapter
<!-- Topics covered: Geolocation, Drag and Drop, Web Storage, Web Workers, Server-Sent Events -->Permissions and User Trust
Several of these APIs -- most notably Geolocation -- require the browser to ask the user for explicit permission before any data is returned, since they touch sensitive information. A page cannot silently read a user's location; the browser always shows a visible permission prompt first, and the user can deny it.
Note: Always design a fallback experience for when a user denies a permission prompt -- never assume an API call will succeed.
Warning: Repeatedly asking for permission immediately on page load, before the user has taken any action, is a common pattern that leads users to reflexively deny the prompt.
Example: Permissions and User Trust
<button onclick="navigator.geolocation.getCurrentPosition(pos => console.log(pos))">
Share My Location
</button>Client-Side vs Server-Side Responsibilities
Web Storage and Drag and Drop are entirely client-side -- they run and store data in the user's own browser with no server involved at all. Server-Sent Events, on the other hand, requires cooperation from a server that keeps a connection open and pushes data through it, making it the one API in this chapter that depends on matching backend support.
Note: Before building a feature around Server-Sent Events, confirm your backend framework actually supports keeping a long-lived SSE connection open.
Warning: Data saved with Web Storage lives only in that specific browser on that specific device -- it is never automatically synced to a server or to the same user on a different device.
Example: Client-Side vs Server-Side Responsibilities
<script>
localStorage.setItem('theme', 'dark');
const events = new EventSource('/updates');
</script>Where to Go Next
Each of the five topics that follow this one goes deep into a single API: its setup, its methods, common pitfalls, and complete working examples. This overview exists purely to frame how they relate to each other before diving into the specifics of Geolocation, Drag and Drop, Web Storage, Web Workers, and Server-Sent Events individually.
Note: Bookmark this overview page as a quick map back to all five API topics if you ever need a refresher on which API solves which problem.
Warning: Skipping straight to an advanced API topic (like Web Workers) without the basics from this overview can make some of its terminology feel unexplained.
Example: Where to Go Next
<!-- See the Geolocation, Drag and Drop, Web Storage, Web Workers, and SSE tutorials -->- Assuming every one of these APIs is guaranteed to work without a permission prompt -- Geolocation, and increasingly other sensitive APIs, require explicit user permission before they will return any data.
- Reaching for a Web Worker for every slow task, when many "slow" operations are actually fast enough to run on the main thread and the added complexity of a worker is not worth it.
- Forgetting that these are JavaScript APIs accessed through browser-provided global objects (like navigator.geolocation), not HTML tags or attributes themselves.
- Web APIs extend what a web page can do beyond static markup: sensing location, storing data, reacting to drag gestures, running background scripts, and receiving live server updates.
- Every API in this chapter is accessed through JavaScript, even though it is triggered from an HTML page and often ties directly into HTML elements and events.
- Most of these APIs require either explicit user permission (like Geolocation) or a compatible, modern browser -- always check support and handle the case where an API is unavailable.
Geolocation, Drag and Drop, Web Storage, Web Workers, and Server-Sent Events are all supported in every current major browser, though exact permission-prompt behavior varies slightly between browsers.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: