easyvalidation attrs required pattern
What does the following code create?
<input type="password" name="pass">HTML · PRACTICE
HTML interview questions.
HTML is the document layer of the web. Getting it right is most of accessibility and a surprising amount of SEO.
574questions
124easy
225medium
225hard
Semantic element choice, form and label association, the accessibility tree, parser quirks around nesting, and how script loading attributes change execution order.
Where it shows up: Every frontend role, plus email, content and accessibility-focused engineering work.
Sample HTML questions
Twenty real HTML questions from the library, code snippet included. Nothing here is paraphrased for search engines. It is the same text a signed-in user sees.
easycontent models
What does the following code create?
<button type="button">Click Me</button>easyparagraphs
What does the following HTML code create?
<p>This is <em>emphasized</em> text.</p>easyparagraphs
What does the following HTML code create?
<p>This is <b>bold</b> text.</p>easycontent models
What does the following code do?
<ul>\n <li>Item 1</li>\n <li>Item 2</li>\n</ul>mediumcontent models
What does the following HTML create?
<ul>\n <li>Item 1</li>\n <li>Item 2\n <ul>\n <li>Subitem</li>\n </ul>\n </li>\n</ul>easyparagraphs
What does the following HTML create?
<blockquote>\n <p>This is a quote.</p>\n</blockquote>mediumaccessible tables scope caption
What does the following code create?
<table>\n <thead>\n <tr><th>Header</th></tr>\n </thead>\n <tbody>\n <tr><td>Data</td></tr>\n </tbody>\n</table>hardaccessible-name algorithm
The accessible name computation algorithm (accname) has a strict precedence order for computing an element's name. For an <input type="text"> that has aria-labelledby, aria-label, an associated <label>, a title, and a placeholder all present, which source wins and why?
<label for="f">Native label</label>
<input id="f" type="text"
aria-labelledby="a b" aria-label="aria label"
title="the title" placeholder="type here">
<span id="a">First</span><span id="b">Second</span>easyparagraphs br hr
Given the markup below, how does the browser render the whitespace between "Hello" and "world"?
<p>Hello
world</p>mediumfieldset legend
Why does this accessible grouping of radio buttons rely on `<fieldset>` and `<legend>` rather than a `<label>`?
<fieldset>
<legend>Shipping speed</legend>
<label><input type="radio" name="s" value="std"> Standard</label>
<label><input type="radio" name="s" value="exp"> Express</label>
</fieldset>mediumvideo audio tracks
A video has two <track> elements: a subtitles track marked default and a captions track. Both have the same srclang. Which track does the browser auto-enable on load?
<video controls>
<source src="clip.mp4" type="video/mp4">
<track kind="subtitles" src="en.vtt" srclang="en" label="English" default>
<track kind="captions" src="en-cc.vtt" srclang="en" label="English CC">
</video>mediumfieldset legend
You wrap several inputs in a `<fieldset disabled>`. The fieldset's `<legend>` contains a `<button>`. What happens to that button inside the legend?
<fieldset disabled>
<legend><button>Toggle</button></legend>
<input name="a">
<input name="b">
</fieldset>hardform-associated custom elements ElementInternals
A class declares static formAssociated = true and calls this.attachInternals() in its constructor. Which set of lifecycle reactions does the engine ONLY invoke for form-associated custom elements (and never for a plain custom element)?
class XInput extends HTMLElement {
static formAssociated = true;
#internals = this.attachInternals();
}harddeclarative shadow DOM
A declarative shadow root is serialized back to a string. Which mechanism allows the serializer to emit the shadow root's contents as a <template shadowrootmode> rather than dropping them, and what does it require of a 'closed' root?
el.getHTML({ serializableShadowRoots: true, shadowRoots: [closedRoot] });mediumadvanced inputs date range color
You set `<input type="range" min="0" max="10">` but provide NO `value` attribute and never interact with it. What value does it report?
<input type="range" min="0" max="10">mediumvalidation attrs required pattern
An input uses `pattern` to restrict input. Which statement about how the title attribute interacts with `pattern` is correct?
<input pattern="[A-Z]{2}\d{4}" title="Two letters then four digits">mediumdatalist output
A text input is associated with a `<datalist>` of suggestions. A user types a value that is NOT in the datalist and submits (no `pattern` or `required`). What happens?
<input list="colors" name="c">
<datalist id="colors">
<option value="Red">
<option value="Green">
</datalist>easyhead vs body
You put a `<p>Loading...</p>` element directly inside `<head>` instead of `<body>`. What does the browser do?
<head>
<title>Demo</title>
<p>Loading...</p>
</head>hardobservedAttributes
A custom element's class declares `observedAttributes` as a `static` class field initialized from a helper that reads from a config object. The element is defined, then the config object is mutated and a NEW subclass is defined that inherits (does not redeclare) `observedAttributes`. How does the engine resolve `observedAttributes` for the subclass, and what does this reveal about where the list lives?
const cfg = { attrs: ['a'] };
class Base extends HTMLElement {
static get observedAttributes(){ return cfg.attrs; }
attributeChangedCallback(n){ console.log('base', n); }
}
customElements.define('x-base', Base);
cfg.attrs = ['a', 'b'];
class Sub extends Base {} // no own observedAttributes
customElements.define('x-sub', Sub);Sign in to answer
Everything above is free to read. Answering needs a free account.
We keep the correct answer, the explanation and the scoring behind sign-in so the platform stays honest, which is why the answer options and the worked explanation for every HTML question stay behind a free account. Signing in is free and takes a few seconds.
HTML topics covered
46 distinct HTML topics are tagged across the library. These are the real topic labels stored on the questions, not a hand-written list.
- content models (41)
- validation attrs required pattern (39)
- advanced inputs date range color (29)
- rel values usage (27)
- accessible tables scope caption (22)
- video audio tracks (20)
- datalist output (20)
- picture srcset (19)
- slotted part exportparts (18)
- iframe sandbox (17)
- links a href (16)
- ARIA basics (16)
- async defer parsing internals (16)
- dialog element (14)
- paragraphs (13)
- accessible-name algorithm (13)
- fieldset legend (13)
- meta viewport charset (12)
- loading lazy decoding (12)
- declarative shadow DOM (12)
- entities and encoding (11)
- microdata data attributes (11)
- custom-element lifecycle (11)
- parsing and tokenization states (10)
- doctype (9)
- form-associated custom elements ElementInternals (9)
- template element (9)
- the preload scanner (9)
- head vs body (8)
- setFormValue setValidity (8)
- details summary (8)
- shadow DOM open closed (8)
- observedAttributes (8)
- DOM tree construction (8)
- parser error recovery quirks mode (8)
- tabindex focus order (7)
- headings (7)
- speculation rules prerender (6)
- host and host-context (6)
- the accessibility tree (5)
- br hr (4)
- Popover API top layer (4)
- accessibility tree (3)
- preload scanner (3)
- the accessible-name algorithm (2)
- paragraphs br hr (2)
Search and filter every HTML question
…
Difficulty