HTML APIs (HTML5 Features) — Interview Questions & Answers

Introduction to HTML APIs

Ques: What are HTML APIs?

Ans: HTML APIs are built-in interfaces provided by HTML5 that allow web pages to interact with browsers, devices, and data — making websites more dynamic and powerful without extra plugins (like Flash).

Ques: Name some popular HTML5 APIs.

Ans: Common HTML5 APIs include:

• Geolocation API
• Drag and Drop API
• Web Storage API
• Web Workers API
• WebSocket API
• Server-Sent Events (SSE)
• Canvas API
• Audio & Video API
• WebRTC API
• Service Worker API

Geolocation API

Ques: What is the HTML Geolocation API used for?

Ans: It’s used to get the geographical location (latitude, longitude) of a user’s device.

Ques: What method is used to get a user's location?

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

Example of getting user’s current location:

navigator.geolocation.getCurrentPosition(function(position) {
  console.log("Latitude: " + position.coords.latitude);
  console.log("Longitude: " + position.coords.longitude);
});

Ques: What are possible errors in Geolocation API?

• PERMISSION_DENIED – User blocked access
• POSITION_UNAVAILABLE – Location data not available
• TIMEOUT – Took too long to fetch location

Ques: Is Geolocation API secure?

Ans: Yes, it only works on HTTPS and requires user consent.

Drag and Drop API

Ques: What is the Drag and Drop API?

Ans: It allows users to drag elements and drop them in specific locations within a webpage.

Ques: Which HTML attribute enables an element to be draggable?

<img src="image.png" draggable="true">

Ques: Which events are used in drag and drop?

Example of Drag and Drop:

<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="logo.png" draggable="true" ondragstart="drag(event)">

function allowDrop(e) { e.preventDefault(); }
function drag(e) { e.dataTransfer.setData("text", e.target.id); }
function drop(e) {
  e.preventDefault();
  let data = e.dataTransfer.getData("text");
  e.target.appendChild(document.getElementById(data));
}

Web Storage API

Ques: What is the Web Storage API?

Ans: It allows websites to store key-value pairs in the browser — faster and more secure than cookies.

Ques: What are the two types of Web Storage?

Example of using localStorage:

localStorage.setItem("username", "John");
console.log(localStorage.getItem("username")); // John
localStorage.removeItem("username");

Example of using sessionStorage:

sessionStorage.setItem("theme", "dark");
console.log(sessionStorage.getItem("theme")); // dark
sessionStorage.clear();

Ques: Difference between Cookies and Web Storage:

Web Workers API

Ques: What is the Web Workers API?

Ans: Allows JavaScript code to run in the background without blocking the main UI thread.

Ques: Why use Web Workers?

• Improves performance
• Prevents UI freezing
• Handles heavy computations

Example of a Web Worker:

main.js

let worker = new Worker("worker.js");
worker.postMessage("Start");
worker.onmessage = e => console.log(e.data);

worker.js

onmessage = e => {
  postMessage("Worker received: " + e.data);
};

WebSocket API

Ques: What is the WebSocket API?

Ans: Enables real-time, two-way communication between browser and server using a single TCP connection.

Example:

let socket = new WebSocket("wss://example.com/socket");
socket.onopen = () => socket.send("Hello Server!");
socket.onmessage = e => console.log("Received: " + e.data);

Server-Sent Events (SSE)

Ques: What is the Server-Sent Events (SSE) API?

Ans: Enables one-way real-time updates from the server to the client over HTTP.

Example:

let eventSource = new EventSource("/events");
eventSource.onmessage = e => console.log("New message: " + e.data);

Canvas API

Ques: What is the Canvas API used for?

Ans: Used to draw 2D graphics, charts, animations, and game visuals dynamically in JavaScript.

Example of drawing a circle using Canvas:

<canvas id="myCanvas" width="200" height="100"></canvas>

let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Audio & Video API

Ques: What is the HTML5 Media API?

Ans: Provides methods to control audio/video playback programmatically.

Example of controlling video:

<video id="vid" src="movie.mp4" controls></video>

let video = document.getElementById("vid");
video.play();
video.pause();
video.currentTime = 10;

Service Workers API

Ques: What is a Service Worker?

Ans: A background script that enables offline support, push notifications, and caching in progressive web apps (PWAs).

Example of Service Worker registration:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(() => {
    console.log("Service Worker Registered");
  });
}

WebRTC API

Ques: What is WebRTC used for?

Ans: Enables real-time audio, video, and data sharing directly between browsers — used in video chat and conferencing.

API Comparison