An API (Application Programming Interface) is a set of functions and protocols that allow one software program to interact with another.
In web development, HTML APIs provide interfaces that let web pages interact with the browser, the device, and the user.
HTML APIs are not part of HTML language itself, but they work together with HTML, CSS, and JavaScript to create modern web functionality.
Important
HTML alone defines structure only. For modern dynamic web apps, we need more power like access to media, user device, storage, etc. HTML APIs provide these capabilities.
Examples of what HTML APIs do:
- Access microphone and camera
- Store data on the browser
- Detect device orientation
- Handle clipboard
- Work offline
Types of HTML APIs
Here are some commonly used browser APIs:
| API Name | Description |
|---|---|
| DOM API | Manipulate HTML elements dynamically |
| Fetch API | Make network requests |
| Canvas API | Draw graphics on web pages |
| Web Storage API | Store data locally |
| Geolocation API | Get user location |
| Web Speech API | Speech recognition & synthesis |
| WebRTC API | Real-time communication |
| File API | Read files from user device |
| Drag & Drop API | Dragging elements interactively |
1. DOM API (Document Object Model)
The DOM API gives a structured representation of HTML as objects that JavaScript can change.
Example:
<!DOCTYPE html>
<html>
<body>
<h2 id="demo">Hello World!</h2>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
document.getElementById("demo").innerHTML = "Text Changed!";
}
</script>
</body>
</html>2. Fetch API
The Fetch API lets you request resources from the network.
Example:
<script>
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
</script>3. Canvas API
The Canvas API allows drawing graphics on an HTML <canvas> element.
Example:
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "#FF0000";
context.fillRect(20, 20, 150, 50);
</script>4. Canvas API
The Canvas API allows drawing graphics on an HTML <canvas> element.
Example:
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "#FF0000";
context.fillRect(20, 20, 150, 50);
</script>5. Web Storage API
Web Storage lets you store key/value pairs in the browser.
Local Storage Example:
<script>
localStorage.setItem("username", "dharmesh");
alert(localStorage.getItem("username"));
</script>6. Geolocation API
Get the user’s location (latitude & longitude).
Example:
<button onclick="getLocation()">Get Location</button>
<script>
function getLocation() {
navigator.geolocation.getCurrentPosition(position => {
alert("Lat: " + position.coords.latitude +
", Long: " + position.coords.longitude);
});
}
</script>7. Web Speech API
Use speech recognition and synthesis.
Speech Synthesis Example:
<button onclick="speak()">Speak</button>
<script>
function speak() {
var msg = new SpeechSynthesisUtterance("Hello from web API");
window.speechSynthesis.speak(msg);
}
</script>8. WebRTC API
WebRTC provides real-time peer-to-peer communication (audio/video).
Basic Example:
<video id="localVideo" autoplay playsinline></video>
<script>
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
const video = document.getElementById('localVideo');
video.srcObject = stream;
});
</script>9. File API
Read files selected by the user.
Example:
<input type="file" id="fileInput">
<script>
document.getElementById('fileInput').addEventListener('change', event => {
const file = event.target.files[0];
alert("File name: " + file.name);
});
</script>10. Drag & Drop API
Create elements that can be dragged:
Example:
<div id="dragItem" draggable="true">Drag Me</div>
<script>
const dragItem = document.getElementById("dragItem");
dragItem.addEventListener("dragstart", event => {
event.dataTransfer.setData("text/plain", event.target.id);
});
</script>Summary
HTML APIs give your web page advanced capabilities:
- Manipulate content dynamically (DOM API)
- Fetch data from servers (Fetch API)
- Draw graphics (Canvas API)
- Store data locally (Web Storage)
- Access device features like location & camera
Modern websites and web apps heavily rely on these APIs.