78 HTML interview questions with answers (2026)

All HTML interview questions

What is DOCTYPE? Why is it necessary?
What does the basic structure of an HTML document consist of?
How do block-level and inline elements differ?
What is an attribute? Give examples.
What is a boolean attribute? Give examples.
What are custom data attributes (data-*)?
How do the `id` and `class` attributes differ?
What is semantic HTML? Why does it matter?
What is the difference between `<div>` and `<section>`?
How do `<article>` and `<section>` differ?
When should you use `<header>`, `<footer>`, `<nav>`, `<main>`, `<aside>`?
What are `<figure>` and `<figcaption>` used for?
How do `<mark>`, `<strong>`, and `<em>` differ?
What is the `<time>` element used for?
How does semantic HTML affect SEO?
When should you use `<dl>`, `<dt>`, and `<dd>`?
How do `<details>` and `<summary>` work?
What new features does HTML5 introduce compared to HTML4?
How do Canvas and SVG differ?
What is a Progressive Web App (PWA)?
What is the History API used for?
How does WebSocket differ from HTTP?
What is the Intersection Observer API?
What technologies make up Web Components?
How do GET and POST methods differ?
What input types does HTML5 provide?
Why is the `<label>` element important?
How do `<select>` and `<datalist>` differ?
What are `<fieldset>` and `<legend>` used for?
What validation attributes does HTML5 provide for forms?
How do `readonly` and `disabled` differ?
What values does the enctype attribute accept?
How does the autocomplete attribute work?
What is the Constraint Validation API?
What is the FormData API used for?
What features does `<input type='file'>` support?
How do you create custom form validation?
How do you optimize a form for mobile?
What is accessibility (a11y)? Why does it matter?
What is ARIA?
Why is alt text important?
What is WCAG? How many conformance levels are there?
How do aria-label, aria-labelledby, and aria-describedby differ?
Why is keyboard navigation important?
How does the tabindex attribute work?
What does WCAG require for color contrast?
When should you use aria-live?
What are skip links and why are they needed?
Why is focus management important in SPAs?
Why is the heading hierarchy (h1-h6) important?
How do `defer` and `async` differ on a `<script>` tag?
Web Storage API: how do `localStorage` and `sessionStorage` differ?
The `<dialog>` element: how does `showModal()` differ from `show()` / `close()`?
Why should opening a link in a new tab include `rel="noopener"` with `target="_blank"`?
Why can a `div` with `onClick` not replace a `<button>`?
What are the ways to associate a `<label>` with an input? Can `placeholder` replace a label?
How should `alt` text be written, and when should it be empty?
What is the first rule of ARIA? When should you NOT add a `role` or ARIA attribute?
Where does an element's accessible name come from, and in what order of precedence?
When a form submit fails, how do you make sure a screen reader knows which field is wrong and why?
How do you announce dynamic updates (toasts, search results, cart count) to screen readers?
What is the correct focus handling when opening and closing a modal?
What keyboard support does a hand-rolled dropdown menu need? What is roving tabindex?
How should `prefers-reduced-motion` be used? Does it mean killing every animation?
How do you test the accessibility of a page?
What does a correctly built custom Tabs component require?
Where do hand-written focus traps break? What do `inert` and `aria-hidden` actually solve?
What do you gain by moving a custom modal to `<dialog>`, and what still needs manual work?
What are the ways to hide content, and which one hides it visually while keeping it available to screen readers?
A designer hands you light grey text that fails contrast — how do you handle and explain it? Which WCAG 2.2 criteria get overlooked?
What does WCAG 1.4.1 Use of Color require? What is wrong with a red error border or a color-coded chart?
Zooming the browser to 400% breaks the layout and forces horizontal scrolling. What do WCAG 1.4.10, 1.4.4 and 1.4.12 require?
What is a keyboard trap (2.1.2)? Does a tab order that differs from the visual order violate 2.4.3?
On a bilingual Vietnamese-English page, where does the `lang` attribute belong to satisfy 3.1.1 and 3.1.2?
What does WCAG 1.3.1 Info and Relationships require? How should data tables and radio groups be marked up?
Why do "Read more" links get flagged in a WCAG 2.4.4 audit? What about icon-only links?
Which context changes does WCAG 3.2.1 / 3.2.2 treat as unexpected? Does auto-submitting on `<select>` change violate them?
An outsourcing contract with an EU client requires WCAG 2.1 AA. How do you deliver and prove conformance?

All HTML interview questions

What is DOCTYPE? Why is it necessary?

What does the basic structure of an HTML document consist of?

How do block-level and inline elements differ?

What is an attribute? Give examples.

What is a boolean attribute? Give examples.

What are custom data attributes (data-*)?

How do the `id` and `class` attributes differ?

What is semantic HTML? Why does it matter?

What is the difference between `<div>` and `<section>`?

How do `<article>` and `<section>` differ?

When should you use `<header>`, `<footer>`, `<nav>`, `<main>`, `<aside>`?

What are `<figure>` and `<figcaption>` used for?

How do `<mark>`, `<strong>`, and `<em>` differ?

What is the `<time>` element used for?

How does semantic HTML affect SEO?

When should you use `<dl>`, `<dt>`, and `<dd>`?

How do `<details>` and `<summary>` work?

What new features does HTML5 introduce compared to HTML4?

How do Canvas and SVG differ?

What is a Progressive Web App (PWA)?

What is the History API used for?

How does WebSocket differ from HTTP?

What is the Intersection Observer API?

What technologies make up Web Components?

How do GET and POST methods differ?

What input types does HTML5 provide?

Why is the `<label>` element important?

How do `<select>` and `<datalist>` differ?

What are `<fieldset>` and `<legend>` used for?

What validation attributes does HTML5 provide for forms?

How do `readonly` and `disabled` differ?

What values does the enctype attribute accept?

How does the autocomplete attribute work?

What is the Constraint Validation API?

What is the FormData API used for?

What features does `<input type='file'>` support?

How do you create custom form validation?

How do you optimize a form for mobile?

What is accessibility (a11y)? Why does it matter?

What is ARIA?

Why is alt text important?

What is WCAG? How many conformance levels are there?

How do aria-label, aria-labelledby, and aria-describedby differ?

Why is keyboard navigation important?

How does the tabindex attribute work?

What does WCAG require for color contrast?

When should you use aria-live?

What are skip links and why are they needed?

Why is focus management important in SPAs?

Why is the heading hierarchy (h1-h6) important?

How do `defer` and `async` differ on a `<script>` tag?

Web Storage API: how do `localStorage` and `sessionStorage` differ?

The `<dialog>` element: how does `showModal()` differ from `show()` / `close()`?

Why should opening a link in a new tab include `rel="noopener"` with `target="_blank"`?

Why can a `div` with `onClick` not replace a `<button>`?

What are the ways to associate a `<label>` with an input? Can `placeholder` replace a label?

How should `alt` text be written, and when should it be empty?

What is the first rule of ARIA? When should you NOT add a `role` or ARIA attribute?

Where does an element's accessible name come from, and in what order of precedence?

When a form submit fails, how do you make sure a screen reader knows which field is wrong and why?

How do you announce dynamic updates (toasts, search results, cart count) to screen readers?

What is the correct focus handling when opening and closing a modal?

What keyboard support does a hand-rolled dropdown menu need? What is roving tabindex?

How should `prefers-reduced-motion` be used? Does it mean killing every animation?

How do you test the accessibility of a page?

What does a correctly built custom Tabs component require?

Where do hand-written focus traps break? What do `inert` and `aria-hidden` actually solve?

What do you gain by moving a custom modal to `<dialog>`, and what still needs manual work?

What are the ways to hide content, and which one hides it visually while keeping it available to screen readers?

A designer hands you light grey text that fails contrast — how do you handle and explain it? Which WCAG 2.2 criteria get overlooked?

What does WCAG 1.4.1 Use of Color require? What is wrong with a red error border or a color-coded chart?

Zooming the browser to 400% breaks the layout and forces horizontal scrolling. What do WCAG 1.4.10, 1.4.4 and 1.4.12 require?

What is a keyboard trap (2.1.2)? Does a tab order that differs from the visual order violate 2.4.3?

On a bilingual Vietnamese-English page, where does the `lang` attribute belong to satisfy 3.1.1 and 3.1.2?

What does WCAG 1.3.1 Info and Relationships require? How should data tables and radio groups be marked up?

Why do "Read more" links get flagged in a WCAG 2.4.4 audit? What about icon-only links?

Which context changes does WCAG 3.2.1 / 3.2.2 treat as unexpected? Does auto-submitting on `<select>` change violate them?

An outsourcing contract with an EU client requires WCAG 2.1 AA. How do you deliver and prove conformance?