Here are the Top 20 Advanced HTML Interview Questions and Answers for experienced web developers:
1. What are data- attributes in HTML5?*
Answer:data-* attributes allow you to store extra information (custom data) on HTML elements without using JavaScript or cluttering class/id attributes.
<div data-user-id="12345" data-role="admin">User Info</div>
2. Explain the difference between <script defer> and <script async>.
Answer:
async: Script is executed as soon as it’s downloaded. Doesn’t guarantee order.defer: Script is executed after HTML is parsed, in order.
<script src="script.js" async></script>
<script src="script.js" defer></script>
3. What is the purpose of the rel="noopener noreferrer" attribute in anchor tags?
Answer:
Used to:
- Improve security by preventing access to
window.opener. - Avoid performance issues and phishing attacks.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit</a>
4. What is the difference between <section> and <div>?
Answer:
<section>: Semantic element used for thematic grouping with headings.<div>: Generic container, non-semantic.
Top 20 Advanced HTML Interview Questions and Answers
5. What is the purpose of the <template> tag?
Answer:
Holds client-side content that is not rendered until it is activated via JavaScript.
<template id="my-template">
<p>Hello, this is a template!</p>
</template>
6. How is contenteditable used in HTML?
Answer:
Makes an element editable in the browser.
<div contenteditable="true">Edit me!</div>
7. What’s the difference between localStorage, sessionStorage, and cookies in HTML5?
Answer:
localStorage: Persistent, no expiry.sessionStorage: Clears on tab close.Cookies: Sent with every HTTP request, size-limited (~4KB).
8. What are the main differences between HTML4 and HTML5?
Answer:
- New semantic tags (
<article>,<section>,<header>) - Multimedia support (
<audio>,<video>) localStorage,canvas,geolocationAPI
9. What is the use of the <meta charset="UTF-8"> tag?
Answer:
Defines character encoding, supports special characters like emojis and symbols.
10. What is the role of ARIA (Accessible Rich Internet Applications) attributes?
Answer:
Used to improve accessibility for screen readers and assistive tech.
Example:
<div role="button" aria-pressed="false">Toggle</div>
Top 20 Advanced HTML Interview Questions and Answers
11. What are semantic HTML elements and why are they important?
Answer:
They convey meaning and improve SEO and accessibility.
Examples: <article>, <footer>, <nav>, <aside>.
12. How does the <picture> element differ from <img>?
Answer:<picture> allows serving different images based on device conditions (e.g., screen size, resolution).
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<img src="small.jpg" alt="Responsive Image">
</picture>
13. What is the difference between id and class in HTML?
Answer:
id: Unique, used once per page.class: Can be reused, allows grouping.
14. What does the download attribute do in anchor tags?
Answer:
Forces the browser to download the file instead of navigating.
<a href="file.pdf" download>Download PDF</a>
15. What is Shadow DOM and how is it related to HTML?
Answer:
It allows encapsulation of HTML, CSS, and JavaScript in web components.
const shadow = element.attachShadow({ mode: 'open' });
shadow.innerHTML = `<style>p { color: red; }</style><p>Hello</p>`;
Top 20 Advanced HTML Interview Questions and Answers
16. How can you validate HTML5 forms without JavaScript?
Answer:
Using attributes like:
requiredpatternminlength,maxlengthtype="email"etc.
<input type="email" required pattern=".+@example\.com">
17. What is the difference between <b> and <strong>, <i> and <em>?
Answer:
<strong>/<em>: Have semantic meaning (importance/emphasis).<b>/<i>: Purely stylistic.
18. How can you embed SVG directly in HTML?
Answer:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" fill="red" />
</svg>
19. What is the sandbox attribute in iframes?
Answer:
Applies restrictions to content within an iframe.
<iframe src="page.html" sandbox="allow-scripts allow-forms"></iframe>
20. What are void (self-closing) elements in HTML?
Answer:
Elements that don’t need closing tags:
Examples: <br>, <img>, <hr>, <meta>, <input>
Top 20 Advanced HTML Interview Questions and Answers
Table of Contents
Top 20 Advanced HTML Interview Questions and Answers
Top 20 Advanced HTML Interview Questions and Answers
2 comments
[…] Top 20 Advanced HTML Interview Questions and… […]
[…] Top 20 Advanced HTML Interview Questions and… […]