Interview Prep | HTML
HTML Interview Questions

Entry, Mid, and Advanced HTML questions with short answers. Use search to filter questions quickly.

🔍

HTML Entry Level Q&A

Back to Top ↑
🌐
Q1. What is the purpose of <!DOCTYPE html>?
A. It tells the browser to use standards mode (HTML5). Without it, the browser may fall back to quirks mode.
Entry
🌐
Q2. What is the difference between <head> and <body>?
A. <head> contains metadata/resources (title, meta, links, scripts). <body> contains the visible page content.
Entry
🌐
Q3. Block vs inline elements?
A. Block elements start on a new line and take full width by default. Inline elements flow within text.
Entry
🌐
Q4. What are void elements?
A. Elements without a closing tag, like <img>, <br>, <hr>, <input>, <meta>, <link>.
Entry
🌐
Q5. Why is alt important on images?
A. It provides text alternatives for screen readers and fallback text if the image fails to load.
Entry
🌐
Q6. How do you connect a label to an input?
A. Use <label for="id"> and set the input id, or wrap the input inside the label.
Entry
🌐
Q7. What is the meta viewport tag for?
A. It controls mobile layout scaling. Common: width=device-width, initial-scale=1.0.
Entry
🌐
Q8. What is semantic HTML?
A. Using meaningful elements like <header>, <main>, <article> for better accessibility/SEO/maintenance.
Entry

HTML Mid Level Q&A

Back to Top ↑
⚙️
Q1. defer vs async on <script>?
A. async executes as soon as downloaded (order not guaranteed). defer runs after parsing in order.
Mid
⚙️
Q2. What is the purpose of <picture>?
A. It enables art direction and format/media switching with <source> elements.
Mid
⚙️
Q3. What are srcset and sizes used for?
A. To serve responsive images. The browser chooses the best image candidate for the layout and device.
Mid
⚙️
Q4. What is ARIA and when to use it?
A. ARIA adds accessibility semantics when native HTML is not enough. Prefer native elements first.
Mid
⚙️
Q5. <button> vs <a> - when to use?
A. <a> is for navigation (href). <button> is for actions (submit/toggle).
Mid
⚙️
Q6. Where and how should you use headings?
A. Use a logical hierarchy (h1 then h2...). Do not skip levels for styling; use CSS for styling.
Mid
⚙️
Q7. cookies vs localStorage vs sessionStorage?
A. Cookies are sent with requests. localStorage persists. sessionStorage is per-tab session.
Mid
⚙️
Q8. How do you make forms accessible?
A. Use labels, fieldset/legend for groups, clear errors, and good keyboard/focus behavior.
Mid

HTML Advanced Level Q&A

Back to Top ↑
🚀
Q1. How does CSP help prevent XSS?
A. CSP restricts where scripts/resources can load from; strict CSP (nonces/hashes) reduces injected script impact.
Advanced
🚀
Q2. What are preload / preconnect / dns-prefetch?
A. Resource hints: preconnect warms connections, dns-prefetch resolves DNS, preload fetches critical assets early.
Advanced
🚀
Q3. How do you reduce CLS (layout shifts)?
A. Reserve space for images/ads (width/height or aspect-ratio), avoid injecting above content, handle fonts responsibly.
Advanced
🚀
Q4. SSR vs CSR vs hydration?
A. SSR renders HTML on server, CSR renders in browser, hydration attaches JS to SSR HTML (watch for mismatch).
Advanced
🚀
Q5. aria-label vs aria-labelledby?
A. aria-label is a string label; aria-labelledby points to existing elements text (preferred when visible text exists).
Advanced
🚀
Q6. How to safely render user-generated HTML?
A. Avoid raw HTML; sanitize with an allowlist and use a strict CSP. Escape output by default.
Advanced
🚀
Q7. Same-origin vs CORS?
A. Same-origin is a browser rule restricting access; CORS is a server opt-in mechanism via headers.
Advanced
🚀
Q8. What are Web Components?
A. Custom elements + shadow DOM + templates enable reusable encapsulated UI components.
Advanced