-
Hajipur, Bihar, 844101
HTML Web APIs
HTML Web APIs are built-in browser features that allow your JavaScript code to interact with the browser, the device and the user’s environment. These APIs help your web pages do things like store data, detect location, send notifications, draw graphics, handle drag-and-drop, run background tasks and even communicate with servers in real time. Modern websites depend heavily on these APIs to create smooth, interactive experiences. In this chapter, you will learn what Web APIs are, how they work in the browser and how to use the most common ones with practical examples.
What Are Web APIs
A Web API is a set of ready-made methods provided by the browser. These APIs are not part of HTML itself but are closely related because you use them inside web pages. When you write JavaScript, you automatically get access to these browser APIs. They work as interfaces that allow you to perform tasks that normal HTML alone cannot handle.
Examples of Common Web APIs
-
Geolocation API
-
Web Storage API
-
Drag and Drop API
-
Web Workers API
-
Server-Sent Events (SSE)
-
Canvas API
-
Fetch API
-
Notifications API
These APIs turn simple pages into powerful web apps.
How Web APIs Work
When your JavaScript code runs, the browser gives it access to built-in objects. For example:
-
navigatorcontrols device information -
windowcontrols the browser window -
documentcontrols the page -
localStorageandsessionStoragestore data -
Workermanages background tasks -
EventSourceconnects to server push events
Your code uses these objects to trigger actions. The browser does the heavier work behind the scenes.
Why Web APIs Are Important
Web APIs give your website advanced capabilities without installing plugins. They allow you to:
-
track location for maps or delivery apps
-
store data even when offline
-
create drag-and-drop file uploads
-
run background tasks
-
update data in real time
-
access the camera, microphone and clipboard (with permission)
This is what makes modern web applications feel close to mobile apps.
A Simple Web API Example: Getting Browser Info
The navigator object gives you information about the user's browser.
<p id="info"></p>
<script>
document.getElementById("info").textContent =
"Your browser is " + navigator.userAgent;
</script>
This reads device details directly from the browser API.
The Fetch API (Basic Introduction)
Fetch is a Web API used to call servers and load data.
<script>
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(response => response.json())
.then(data => console.log(data));
</script>
This replaces older XMLHttpRequest methods.
Using Web APIs with Events
Most Web APIs work with event listeners.
<button id="btn">Click me</button>
<script>
document.getElementById("btn").addEventListener("click", () => {
alert("Button clicked using an API event!");
});
</script>
The browser triggers the event, and the API processes it.
DOM API (Foundation of All Web APIs)
Even though DOM methods are common, they are technically Web APIs. They allow you to access elements, change text, apply styles and create new nodes.
Example
<p id="demo">Hello</p>
<script>
document.getElementById("demo").style.color = "blue";
</script>
This is the core API used by almost every web page.
Timer API (setTimeout and setInterval)
The browser gives you timer functions to delay or repeat tasks.
Delay example
setTimeout(() => {
console.log("3 seconds passed");
}, 3000);
Repeat example
setInterval(() => {
console.log("Repeating every second");
}, 1000);
These help in animations, loaders and real-time updates.
Clipboard API (Copy Text Programmatically)
Many apps use the Clipboard API to copy content automatically.
Example
<button onclick="copyText()">Copy</button>
<script>
function copyText() {
navigator.clipboard.writeText("Sample text");
alert("Copied!");
}
</script>
This API requires user action, like a button click, for security.
Notifications API
The Notifications API lets your site show system-level alerts.
Example
<button onclick="notify()">Notify</button>
<script>
function notify() {
Notification.requestPermission().then(permission => {
if (permission === "granted") {
new Notification("Hello from your website!");
}
});
}
</script>
This is used in messaging apps and dashboards.
Canvas API (Short Overview)
Canvas is a Web API that lets you draw 2D shapes, charts and animations using JavaScript.
Example
<canvas id="board" width="300" height="150"></canvas>
<script>
const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "skyblue";
ctx.fillRect(20, 20, 100, 60);
</script>
You will learn the full canvas chapter next.
Combining Web APIs
Most modern apps use several APIs together. For example:
-
A drawing app uses Canvas + Web Storage
-
A delivery app uses Geolocation + Fetch
-
A chat app uses Web Workers + SSE
-
A dashboard uses Fetch + Notifications
Understanding these APIs helps you build real products.
A Practical Example: Simple Auto-Saving Note
This combines the DOM API and Web Storage API.
<textarea id="note" placeholder="Write something..."></textarea>
<script>
const box = document.getElementById("note");
// Load saved data
box.value = localStorage.getItem("note") || "";
// Auto-save on typing
box.addEventListener("input", () => {
localStorage.setItem("note", box.value);
});
</script>
This shows how easy it is to build helpful features using APIs.
Summary of HTML Web APIs
Web APIs give web pages the power to interact with the browser, device and server. You learned how APIs work, why they matter and how they support modern web applications. You also saw practical examples like fetch, notifications, clipboard access, timers and DOM manipulation. These APIs are the foundation for advanced chapters like geolocation, drag and drop, web workers and SSE.
Practice Questions
Q1. Use DOM API to change the text of an HTML element with ID title.
Q2. Create a button that fetches user data using fetch() from a dummy API.
Q3. Store the user's name in localStorage and retrieve it on page load.
Q4. Use navigator.geolocation to get user location and display it.
Q5. Copy a message to clipboard using the Clipboard API.
Q6. Store a theme color in sessionStorage and apply it on page load.
Q7. Use Fetch API to POST data to an API endpoint.
Q8. Display a browser notification using the Notification API.
Q9. Draw something on <canvas> using the Canvas API.
Q10. Play an audio file using the HTML Audio API and control playback.
