Advanced Level: HTML5 Interview Questions and Answers
1. What is the HTML5 Web Storage API?
It provides localStorage and sessionStorage for storing data in the browser. localStorage persists across sessions, while sessionStorage is cleared when the tab closes.
Example:
<script>
localStorage.setItem("key", "value");
console.log(localStorage.getItem("key")); // "value"
</script>
2. Explain the HTML5 Geolocation API.
It retrieves the user’s geographic location (latitude, longitude) with user permission.
Example:
<script>
navigator.geolocation.getCurrentPosition(position => {
console.log(position.coords.latitude, position.coords.longitude);
});
</script>
3. What is the Drag and Drop API in HTML5?
It enables dragging and dropping elements using attributes like draggable and events like dragstart, dragover, and drop.
Example:
<div draggable="true" ondragstart="event.dataTransfer.setData('text', 'data')">Drag me</div>
<div ondrop="event.preventDefault(); console.log(event.dataTransfer.getData('text'))" ondragover="event.preventDefault()">Drop here</div>
4. What is the purpose of the WebSocket API in HTML5?
It enables real-time, bidirectional communication between the browser and server.
Example:
<script>
let ws = new WebSocket("ws://example.com");
ws.onmessage = event => console.log(event.data);
</script>
5. What is the difference between <canvas> and SVG?
<canvas> is pixel-based and rendered via JavaScript, ideal for dynamic graphics. SVG is vector-based, scalable, and manipulable via DOM.
6. How does the requestAnimationFrame API work?
It schedules animations to sync with the browser’s refresh rate for smooth performance.
Example:
<script>
function animate() {
requestAnimationFrame(animate);
// Animation code
}
requestAnimationFrame(animate);
</script>
7. What is the content attribute in the <meta> tag for responsive design?
It defines viewport settings for responsive layouts.
Example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">8. What is the HTML5 History API?
It manipulates browser history, enabling single-page application navigation without reloading.
Example:
<script>
history.pushState({page: 1}, "title", "/page1");
</script>
9. What is the <picture> element in HTML5?
It provides multiple image sources for responsive or art-directed images.
Example:
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<img src="small.jpg" alt="Example">
</picture>
10. What is the Web Audio API?
It processes and synthesizes audio in web applications.
Example:
<script>
let ctx = new AudioContext();
let oscillator = ctx.createOscillator();
oscillator.connect(ctx.destination);
oscillator.start();
</script>
11. How does the aria-live attribute enhance accessibility?
It notifies screen readers of dynamic content changes.
Example:
<div aria-live="polite">Updated content</div>12. What is the fetch API, and how does it relate to HTML5?
It fetches resources asynchronously, often used with HTML5 for dynamic content loading.
Example:
<script>
fetch("data.json").then(response => response.json()).then(data => console.log(data));
</script>
13. What is the oninput event in HTML5 forms?
It triggers when an input’s value changes, unlike onchange which triggers on blur.
Example:
<input type="text" oninput="console.log(this.value)">14. What is the seamless attribute for iframes (deprecated)?
It was intended to make iframes blend with the parent document but is no longer supported.
15. How does HTML5 support offline applications?
Using the manifest attribute and Application Cache (deprecated) or Service Workers for modern offline support.
16. What is the crossorigin attribute in HTML5?
It specifies how cross-origin resources (e.g., images, scripts) are handled.
Example:
<img src="<https://example.com/image.jpg>" crossorigin="anonymous">17. What is the File API in HTML5?
It allows reading file contents via JavaScript, typically with <input type="file">.
Example:
<input type="file" onchange="console.log(this.files[0])">18. What is the rel attribute in the <link> tag?
It specifies the relationship between the document and the linked resource, e.g., stylesheet, icon.
Example:
<link rel="stylesheet" href="styles.css">19. What is the sandbox attribute in an <iframe>?
It restricts iframe content for security, allowing specific permissions.
Example:
<iframe src="page.html" sandbox="allow-scripts"></iframe>20. What is the WebRTC API, and how does it relate to HTML5?
It enables real-time communication, like video calls, in browsers.
Example:
<video id="localVideo" autoplay></video>
<script>
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
document.getElementById("localVideo").srcObject = stream;
});
</script>
21. What is the translate attribute?
It specifies whether an element’s content should be translated.
Example:
<p translate="no">Do not translate</p>22. How does the <template> element work?
It holds reusable HTML content that isn’t rendered until activated via JavaScript.
Example:
<template id="myTemplate">
<p>Template content</p>
</template>
<script>
let template = document.getElementById("myTemplate").content.cloneNode(true);
document.body.appendChild(template);
</script>
23. What is the autocomplete attribute in forms?
It suggests autofill values for form fields, like on, off, or specific types.
Example:
<input type="text" autocomplete="name">24. What is the purpose of the aria-hidden attribute?
It indicates whether an element is hidden from screen readers.
Example:
<div aria-hidden="true">Hidden from screen readers</div>25. How does HTML5 support microdata?
It uses attributes like itemscope, itemtype, and itemprop to embed machine-readable data.
Example:
<div itemscope itemtype="<http://schema.org/Person>">
<span itemprop="name">John Doe</span>
</div>
26. What is the onerror event in HTML5?
It triggers when an error occurs, like a failed image or script load.
Example:
<img src="invalid.jpg" onerror="console.log('Image load failed')">27. What is the srcdoc attribute in an <iframe>?
It specifies inline HTML content for the iframe.
Example:
<iframe srcdoc="<p>Inline content</p>"></iframe>28. What is the inputmode attribute?
It hints at the type of data expected, like numeric or email, for virtual keyboards.
Example:
<input type="text" inputmode="numeric">29. How does the Fullscreen API work with HTML5?
It allows elements to enter full-screen mode.
Example:
<button onclick="document.documentElement.requestFullscreen()">Go Fullscreen</button>30. What is the popover API in HTML5?
It creates overlay content that can be toggled, like tooltips or dialogs, using attributes like popover.
Example:
<button popovertarget="myPopover">Show</button>
<div id="myPopover" popover>Popover content</div>