HTML Interview Questions — Complete Guide
A practical collection: fundamentals, semantics, forms, accessibility,
performance, security, modern HTML APIs, SEO, and more
Generated on August 13, 2025
Page 1
Overview
This guide collects the most important HTML interview questions with concise answers and a few practical
snippets. Use it to revise fundamentals, semantics, forms, a11y, performance, and modern APIs.
Core Concepts
Q: What is HTML and how is it different from CSS and JavaScript?
A: HTML defines document structure and semantics. CSS controls presentation. JavaScript handles
behavior/logic.
Q: What is a doctype and why is <!doctype html> important?
A: It tells the browser to use standards mode for modern, consistent rendering.
Q: Block vs inline elements—difference and examples?
A: Block elements (e.g., <div>, <section>, <p>) start on a new line and span full width; inline elements
(e.g., <span>, <a>, <em>) flow within text.
Q: What are semantic elements and benefits?
A: Elements like <header>, <nav>, <main>, <article>, <section> express meaning for accessibility, SEO,
and maintainability.
Q: What is the DOM?
A: The Document Object Model—the in-memory tree representation of the parsed HTML used by scripts
and the rendering engine.
Q: Why keep only one <h1> in a document?
A: For a clear, logical outline and better accessibility/SEO; subsequent headings form a hierarchy with
<h2>–<h6>.
Head & Metadata
Q: What goes inside <head>?
A: Metadata (charset, viewport), title, links to styles/icons, scripts (often with defer or module), SEO/social
tags.
Q: What does the viewport meta tag do?
A: It controls layout on mobile (e.g., width=device-width, initial-scale=1).
Q: Preload vs prefetch vs preconnect—when to use?
A: Preload critical assets for the current page; prefetch low-priority assets for likely future pages;
preconnect warms up connections.
Q: Canonical link—purpose?
A: Signals the preferred URL to search engines when content is duplicated across multiple URLs.
Page 2
Text & Semantics
Q: <strong>/<em> vs <b>/<i>?
A: <strong>/<em> carry semantic importance/emphasis; <b>/<i> are purely stylistic.
Q: What is <time> good for?
A: Machine-readable dates/times via datetime attribute, improving semantics and parsing.
Q: Use cases for <abbr>, <dfn>, <mark>, <cite>?
A: Abbreviation, defining term, highlight, title of a work—respectively.
Q: What are <bdi> and <bdo>?
A: <bdi> isolates bi-directional text; <bdo> overrides direction with dir='rtl'|'ltr'.
Images & Media
Q: How to implement responsive images with srcset/sizes?
A: Provide width descriptors in srcset and a sizes attribute describing the slot; the browser selects the best
candidate.
Q: When to use <picture>?
A: For art direction and/or serving different formats (AVIF/WebP) with fallbacks.
Q: Purpose of width/height on images?
A: Reserve space to prevent CLS; browsers infer aspect-ratio.
Q: What do loading, decoding, and fetchpriority do?
A: loading='lazy' defers offscreen loads; decoding='async' avoids blocking; fetchpriority hints critical
images.
Q: <audio>/<video> controls, autoplay, muted—differences?
A: controls shows UI; autoplay auto-plays (must be muted on many browsers); loop repeats; preload hints
buffering.
Links & Navigation
Q: Why rel='noopener' with target='_blank'?
A: Prevents reverse tabnabbing and performance issues by isolating the new tab's [Link].
Q: What is a skip link?
A: A visible-on-focus link that jumps to <main>, improving keyboard navigation.
Q: Best practice for anchor text?
A: Make it descriptive and unique (avoid 'click here'), aiding accessibility/SEO.
Page 3
Forms & Validation
Q: Why prefer semantic input types?
A: email, url, number, date, color, range provide native validation and better mobile keyboards.
Q: How to associate labels correctly?
A: Use <label for='id'> or wrap the input—crucial for accessibility and larger hit targets.
Q: Constraint Validation API basics?
A: Attributes like required/pattern/min/max tie into checkValidity(), reportValidity(), and
setCustomValidity().
Q: What is autocomplete with tokens?
A: Hints autofill (e.g., name, email, street-address, cc-number, current-password).
Q: What is inputmode and enterkeyhint?
A: inputmode suggests on-screen keyboard; enterkeyhint changes the enter key label (e.g., 'search').
Q: What does the form attribute on inputs do?
A: Associates a control with a <form> by id even if it’s not nested inside.
Q: Purpose of <datalist>?
A: Provides suggestions while keeping input free-form.
Accessibility (A11y)
Q: Native semantics vs ARIA—rule of thumb?
A: Use native elements first; add ARIA only to fill gaps without contradicting semantics.
Q: Managing focus order?
A: Keep logical DOM order, avoid positive tabindex, ensure visible focus styles.
Q: aria-label vs aria-labelledby vs aria-describedby?
A: aria-label provides a string; aria-labelledby references visible text; aria-describedby provides supportive
context.
Q: What is the inert attribute?
A: Temporarily removes a subtree from the focus order and accessibility tree (e.g., when a modal is open).
Q: <details>/<summary> accessibility benefits?
A: Native disclosure widget with keyboard and semantics built-in.
Modern HTML Elements & APIs
Q: What is <template>?
Page 4
A: Inert DOM that can be cloned via JS without executing scripts until inserted.
Q: Web Components overview?
A: Custom elements, Shadow DOM encapsulation, and <slot> content projection for reusable widgets.
Q: Correct use of <dialog>?
A: Use showModal() to trap focus; provide a close button; handle 'cancel' events; restore focus afterward.
Q: Popover attribute—what is it?
A: A native API for lightweight popovers that manage focus/esc dismissal.
Q: Lazy-loading iframes?
A: Add loading='lazy'; combine with sandbox/allow for security permissions.
Performance
Q: CSS loading best practices?
A: Keep critical CSS small; defer non-critical; avoid @import; consider preload as=style if needed.
Q: Script loading: async vs defer vs modules?
A: async executes ASAP (order not guaranteed); defer executes after parse in order; type='module' is
deferred and supports imports.
Q: Resource hints that help LCP?
A: preconnect, dns-prefetch, preload of critical font/image/script resources.
Q: Avoiding layout shift (CLS) with HTML alone?
A: Set width/height or aspect-ratio for images/iframes; reserve space for ads; avoid inserting content
above the fold.
Q: Priority hints?
A: fetchpriority on images/link nudges the browser’s request prioritization for critical assets.
Security
Q: How to mitigate reverse tabnabbing?
A: Use rel='noopener' (often with noreferrer) for target='_blank' links.
Q: What does the sandbox attribute on iframes do?
A: Restricts capabilities; grant only required tokens like allow-scripts, allow-same-origin, allow-popups.
Q: Password managers and autocomplete tokens?
A: Use current-password/new-password to assist managers; avoid disabling autocomplete unless
necessary.
Page 5
SEO & Social
Q: Most impactful SEO-related tags?
A: Title, meta description, canonical, robots directives, hreflang for multilingual, and JSON-LD structured
data.
Q: Open Graph and Twitter Cards?
A: Meta tags controlling social share previews (og:title, og:image, twitter:card).
Q: How does semantic HTML help SEO?
A: Clear document structure and meaning improve parsing and rich results eligibility.
Internationalization (i18n)
Q: Role of lang and dir on <html>?
A: lang informs screen readers/pronunciation; dir='rtl' handles right-to-left layout when needed.
Q: What are ruby annotations?
A: <ruby>, <rt>, <rp> provide pronunciation/glosses for East Asian text.
Tables & Data
Q: How to make tables accessible?
A: Use <th>, scope, headers/id for complex tables; add <caption>; ensure reading order is meaningful.
Q: Purpose of <col>/<colgroup>?
A: Apply properties/widths to columns, improving layout semantics and styling control.
Deprecated & Obsolete
Q: Which tags/attributes should be avoided today?
A: Presentational tags like <font>, <center>, <big>, <tt> and align/background attributes—use CSS
instead.
Testing & Tooling
Q: How to validate HTML?
A: Use the W3C validator, DevTools, and linters (e.g., html-validate) plus accessibility audits (axe,
Lighthouse).
Q: Practical accessibility testing steps?
A: Keyboard-only navigation, color contrast checks, focus traps, screen reader smoke tests.
Edge Cases & Pitfalls
Page 6
Q: Why not use placeholder as label?
A: Placeholders vanish on input; users and assistive tech lose context—always provide a visible label.
Q: DOM order vs visual order—why it matters?
A: Assistive tech follows DOM order; mismatches can confuse users; keep logical order in DOM.
Q: Common image pitfalls causing CLS?
A: Missing width/height or aspect-ratio; late-loading fonts without font-display; injected content above the
fold.
Mini Snippets
Q: Minimal modern HTML5 skeleton?
A: See snippet below.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta
name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title> <link rel="icon" href="/[Link]" sizes="any">
</head> <body> <header><h1>Page Title</h1></header> <main id="main">
<article> <h2>Heading</h2> <p>Hello, world.</p> </article> </main>
<footer>© 2025</footer> <script type="module" src="/[Link]"></script>
</body> </html>
Q: Responsive <img> with CLS-safe sizing?
A: Provide width/height and responsive candidates.
<img src="[Link]" srcset="[Link] 400w, [Link] 800w,
[Link] 1600w" sizes="(max-width: 600px) 90vw, 800px" width="800"
height="600" loading="lazy" decoding="async" fetchpriority="high"
alt="Sunset over hills">
Q: Basic accessible <dialog>?
A: Native modal with focus handling.
<button id="open">Open dialog</button> <dialog id="d"> <form
method="dialog"> <p>Confirm action?</p> <menu> <button
value="cancel">Cancel</button> <button value="ok">OK</button> </menu>
</form> </dialog> <script> const d = [Link]('d');
[Link]('open').addEventListener('click', () =>
[Link]()); </script>
Page 7