• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Web APIs

← Previous Next →

Web APIs (Application Programming Interfaces) are built-in browser interfaces that allow web developers to interact with the browser, the user’s environment, or external services using JavaScript. These APIs are not part of HTML itself but are often used alongside HTML to create interactive web applications.

🔹 Commonly Used HTML Web APIs

Web API Description
DOM API Allows manipulation of HTML elements and content
Fetch API Used to make HTTP requests (GET, POST, etc.)
Geolocation API Gets the user’s geographical location
Local Storage Stores data in the browser that persists after reload
Session Storage Stores data per tab session
Canvas API Draws graphics using JavaScript
Audio/Video API Controls playback of media elements
Clipboard API Allows copying and pasting to/from the clipboard
Notification API Displays desktop notifications

💻 Examples

✅ DOM API
document.getElementById("demo").innerText = "Hello API!";
✅ Fetch API
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));
✅ Geolocation API
navigator.geolocation.getCurrentPosition(function(position) {
  console.log("Latitude: " + position.coords.latitude);
});
✅ Local Storage
localStorage.setItem("username", "Bikki");
let name = localStorage.getItem("username");
✅ Clipboard API
navigator.clipboard.writeText("Copied text!");

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.

HTML Web APIs Quiz

Q1: What does the Fetch API do?

A. Draw shapes
B. Fetch data from APIs
C. Store data locally
D. Update HTML only

Q2: Which API is used to find the user's current location?

A. Location API
B. Geo API
C. Navigator API
D. Geolocation API

Q3: What does localStorage.setItem() do?

A. Stores data temporarily
B. Stores data permanently in the browser
C. Deletes data
D. Clears all cookies

Q4: Which of these is used to access the DOM in JavaScript?

A. window.getElement()
B. document.querySelector()
C. html.selector()
D. dom.get()

Q5: Which method is used to write to the clipboard?

A. clipboard.copy()
B. window.clipboard()
C. navigator.clipboard.writeText()
D. copy.text()

Q6: What will navigator.geolocation return?

A. User's timezone
B. User's browser
C. User's coordinates
D. None

Q7: How long does data in sessionStorage last?

A. Forever
B. Until tab/browser is closed
C. 1 hour
D. 24 hours

Q8: Which API is used for drawing shapes via JavaScript?

A. Paint API
B. Canvas API
C. Draw API
D. SVG API

Q9: What must be done before using the Notification API?

A. Install plugin
B. Set headers
C. Ask user permission
D. Nothing

Q10: Which API allows showing pop-up desktop notifications?

A. Alert API
B. DOM API
C. Notification API
D. Prompt API
← Previous Next →
Login
Go Back Top