69 HTML interview questions with detailed answers, sorted from basic to advanced. Free to practice, with progress saved automatically.
HTML is the markup language that describes the structure and meaning of web content, which browsers and assistive technologies rely on. The bank covers semantic elements, forms, accessibility and WCAG, focus handling around modals, the dialog element, defer versus async scripts, Web Storage, native elements, and basic security concerns.
and 11 more topics.
DOCTYPE (Document Type Declaration) states which HTML version the document uses and must be the first line. HTML5 needs a single line: It decides whether the browser renders in standards mode or quirks mode. Without it you get quirks mode: the browser emulates a few…
A minimal HTML document has four parts: - <!DOCTYPE html — switches on standards mode. - <html — the root element; lang directly affects screen readers and Google Translate. - <head — metadata that is never rendered: <title, <meta, <link, <script. - <body — everything…
The difference is how the element joins the line: a block takes a line of its own, an inline sits on the same line as the surrounding text. - Block (<div, <p, <h1): takes the remaining width, always starts a new line, and accepts width/height.…
An attribute adds information to an element and lives in the opening tag as name="value": Three common groups: - Global — valid on any element: id, class, style, title, hidden, data-. - Element-specific: href (a), src/alt (img), type/name (input). - Boolean — presence is the…
A boolean attribute has two states: present = true, absent = false. Whatever value you assign is ignored. Common ones: disabled, checked, selected, required, readonly, autofocus, hidden, multiple, defer, async. To turn it off you must remove the attribute, not change its value: Takeaway: the…
data- lets you attach arbitrary data to an element while staying valid per the HTML spec (an invented attribute such as userid="123" is not). It also works from CSS: Real uses: test hooks (data-testid), carrying an id for event delegation, expressing state for CSS instead…
id is unique per page, class is freely reusable. id class --------- Occurrences 1 many Specificity (1,0,0) (0,1,0) Used for anchor pricing, label[for], aria-labelledby styling, grouping Specificity is compared column by column from the left, not summed: one id (1,0,0) beats any selector made only…
Semantic HTML means using tags that describe the role of the content instead of neutral <div/<span. Four reasons it pays off: 1. Accessibility — a screen reader can jump straight to a landmark (main, nav, header); with <div there is nothing to jump to. 2.…
<div is a meaningless container; <section is a thematic block of content. How to decide: - You just need something to hang display:flex, padding or a background on → <div. - The block has its own heading and would belong in a page outline →…
<article is content that still makes sense on its own; <section is a part of the page's flow. The test: move the block into an RSS feed or another site — still understandable? <article. Needs the original page? <section. The two nest in both directions:…
Five landmark elements, each answering "what role does this block play": Element Per page Screen reader --------- <main exactly 1 target of "skip to content" <nav many listed among landmarks <header / <footer many (one per article) banner / contentinfo at page level, outside article/section…
<figure wraps self-contained illustrative content (image, chart, code block, video); <figcaption is its caption, placed first or last. The usual confusion: figcaption does not replace alt. Who uses it What it conveys --------- alt screen readers; shown in place of a broken image; read by…
All three carry semantics; they differ in the kind of emphasis: Element Meaning Default look --------- <strong high importance bold <em stress emphasis that changes the sentence italic <mark relevant to the current context (search term) yellow highlight Their counterparts <b and <i change appearance…
<time attaches a machine-readable timestamp to the text a reader sees. datetime must follow ISO 8601. Omit it and the inner text itself has to be a valid date string. Where it earns its keep: publication dates (Google reads them for search results), event calendars,…
Semantic HTML is not a direct ranking factor, but it helps indirectly in three ways: 1. Crawlers identify the real content. <main/<article separate the body from menus and sidebars, so search snippets come from the right place. <h1–<h3 build the document outline. 2. Rich results.…
<dl is a list of key–value or term–definition pairs. Good fits: article metadata, glossaries, product spec tables, FAQs (<dt the question, <dd the answer). When you need a styling wrapper, use <div — the spec allows <div around a dt/dd group inside <dl, but no…
<details is an accordion built into the browser, no JS required. What it gives you over a hand-rolled accordion: keyboard support (Enter/Space), the correct screen-reader role, and content that Ctrl+F can still find — the browser expands it for you. Note: animating the panel height…
HTML5 (2014) changed three areas compared with HTML4: 1. Semantics & media — landmark elements <header, <nav, <article, <section, <figure; <audio/<video without Flash; <canvas and inline SVG. The DOCTYPE shrinks to <!DOCTYPE html, because HTML5 is no longer based on SGML and drops the DTD…
The difference is what the browser remembers after drawing. - Canvas — a bitmap. You paint pixels with JS, and once painted the browser has no idea what shapes are there. - SVG — every shape is a DOM node: styleable with CSS, addressable by…
A PWA is a web app that uses a set of APIs to get close to a native experience: works offline, installs to the home screen, receives push notifications. Three core pieces: 1. HTTPS — service workers only run in a secure context (localhost is…
GET puts data in the URL, POST puts it in the body. GET POST --------- Where the data lives query string request body Bookmarkable / shareable yes no Recorded in history & server logs yes no Browser cache yes no Refresh after submit safe asks…
Each type changes the mobile keyboard, the control UI and the built-in validation. Three groups: - Text & numbers: text, password, email, number, tel, url, search. - Date & time: date, time, datetime-local, month, week. - Interactive & media: color, range, file, checkbox, radio, hidden,…
<label ties descriptive text to a control. Two ways to write it: Three things you get for free: 1. Clicking the text focuses or ticks the control — a much larger hit area on mobile, especially for small checkboxes. 2. Screen readers announce the field…
<select restricts the choice; <datalist only suggests, and the user can still type anything. <select <datalist --------- Value outside the list no yes Type to filter no (letter jump only) yes Value submitted option.value exactly what was typed How to choose: a fixed set where…
<fieldset groups related controls and <legend names the group. Its biggest payoff is radio/checkbox groups. Each radio has its own label ("Cash on delivery"), but nothing states which question is being answered. Screen readers announce the legend before each option → "Payment method, Cash on…
Built-in validation runs on submit, no JS needed: Attribute Applies to ------ required any control pattern text, tel, email, url, password, search min / max / step number, range, date/time minlength / maxlength text-entry types Style the states with pseudo-classes: With :invalid, fields turn red…
The decisive difference is whether the value reaches the server. readonly disabled --------- Editable no no Focusable / in tab order yes no Selectable, copyable yes no Submitted with the form yes no Default appearance unchanged dimmed Matches :disabled in CSS no yes How to…
enctype decides how the browser packages form data when method="post". Value When Body shape --------- application/x-www-form-urlencoded default, text data name=An&age=30 multipart/form-data file uploads boundary-separated parts text/plain debugging raw, unencoded Forgetting enctype="multipart/form-data" on an upload means the browser still submits, but sends only the file name…
autocomplete tells the browser what kind of data a field holds so it can offer the right saved value. It can sit on the <form (applying to everything) or per input. Reserve autocomplete="off" for genuinely single-use fields. Note: don't reuse autocomplete="current-password" on a "new password"…
The Constraint Validation API is the JavaScript side of built-in validation — it lets you read the state and set your own error messages. Flags on validity: valueMissing, typeMismatch, patternMismatch, tooShort, tooLong, rangeUnderflow, rangeOverflow, stepMismatch, customError. The submit handler above only runs on a form…
FormData collects a form into key–value pairs, files included, so you can submit it from JavaScript. Convert to JSON when the API expects it: Fields that never make it into FormData: - inputs without a name, even with an id and a value; - disabled…
Accessibility (a11y — the 11 letters between a and y) means making the web usable by everyone, including people with visual, hearing, motor and cognitive impairments. Four main reasons: 1. Real users — according to the WHO, about 1.3 billion people, or 16% of the…
ARIA (Accessible Rich Internet Applications) is a set of attributes that add semantics for screen readers when native HTML cannot express something. Three groups: ARIA rule number one: do not use ARIA if HTML already does the job. ARIA only changes how a screen reader…
alt describes an image for screen readers and appears when the image fails to load. What you write depends on the role of the image: Common mistakes, in order of frequency: - alt="IMG2043.jpg" — the screen reader reads the file name aloud. - alt="product image"…
WCAG (Web Content Accessibility Guidelines) is the W3C's set of criteria for measuring how accessible web content is. Four principles — POUR: Meaning Example criteria --------- Perceivable can be sensed image alt, captions, color contrast Operable can be operated keyboard access, enough time, no seizure…
All three give a screen reader text, and differ in where the text comes from and what role it plays: aria-label and aria-labelledby set the element's name (accessible name), while aria-describedby adds an extra description, announced after the name. Name computation order: aria-labelledby aria-label <label…
The keyboard is the only way in for people with motor impairments, screen reader users, and power users who just want speed. Conventional keys — get these wrong and users get stuck: Key Expected behavior ------ Tab / Shift+Tab move forward / back between controls…
tabindex decides whether an element participates in the Tab order. Value In tab order element.focus() --------- 0 yes, in DOM order yes -1 no yes 0 yes, jumps ahead of everything yes Links, buttons, inputs, selects and textareas are already focusable — adding tabindex="0" to…
Contrast ratio measures the luminance gap between text color and background, from 1:1 (identical) to 21:1 (black on white). Content AA AAA --------- Body text 4.5:1 7:1 Large text (=18pt ≈ 24px, or =14pt ≈ 18.66px bold) 3:1 4.5:1 Input borders, meaningful icons 3:1 —…
Both download the script in parallel with HTML parsing, so neither blocks rendering. The difference is when they execute: - async: runs as soon as it finishes downloading, possibly interrupting HTML parsing. Execution order is not guaranteed (first-downloaded runs first). Good for independent scripts: analytics,…
A <dialog opens in two modes: - showModal() — opens as a modal: promotes the dialog to the top layer, renders a ::backdrop behind it, traps focus inside, closes on Esc, and makes the rest of the page inert (non-interactive). - show() — opens as…
With target="blank", the new page receives a window.opener reference back to the original page. A destination page (especially an untrusted external link) can abuse it via window.opener.location = "phishing-page" — the reverse tabnabbing attack (swapping your old tab for a fake). The two tabs may…
Because onClick only provides mouse behavior. <button is a built-in interactive element that also ships with: - Keyboard focusability (it is in the natural tab order). - Activation via Enter and Space — the browser turns those into a click event. - The button role…
Two standard associations: The explicit form is preferred: more layout freedom and broader assistive-technology support. Note for matches the id, not the name. A correct association buys three things: the screen reader announces the label on focus, clicking the text moves focus into the field,…
alt describes the role the image plays in context, not the pixels. The same picture can need different alt text on two different pages. Three main cases: alt="" (empty but present) is for purely decorative images, or images whose content is already stated in adjacent…
The accessible name is the string a screen reader announces to identify an element (separate from its role and state). Browsers compute it with the accname algorithm, walking sources in order and stopping at the first non-empty one: 1. aria-labelledby — references other elements by…
A red border is a visual-only signal. Three pieces are required: 1. Mark the field: aria-invalid="true" so the screen reader announces "invalid" on focus. Set it back to false (or remove it) once the user fixes the value. 2. Attach the message: aria-describedby pointing at…
Use a live region: a DOM area carrying aria-live whose content changes are announced automatically, without moving focus. Choosing politeness: - aria-live="polite" (or role="status"): waits for a pause, then announces. Right for most cases — search results, "saved", cart count. - aria-live="assertive" (or role="alert"): interrupts…
Four steps; skipping any one of them strands keyboard users: 1. Remember the currently focused element before opening (document.activeElement). 2. Move focus into the modal on open — to the first interactive element, or to the container itself (given tabindex="-1") when the content is long…
A dropdown that only listens for click abandons every keyboard user. Minimum key set per the APG menu-button pattern: - Enter / Space / ArrowDown on the trigger: open the menu and focus the first item. - ArrowDown / ArrowUp: move between items (wrapping is…
prefers-reduced-motion is a media query reflecting the OS "reduce motion" setting. People who enable it often have vestibular disorders: parallax, large zooms, and elements flying across the screen can trigger dizziness and nausea. "Reduced" is not "none". The right move is to swap large motion…
Combine automated scanning with manual checks — automated tools catch only part of the problem (missing alt, contrast, missing labels, duplicate ids); the rest is logic a machine cannot judge. Automated: - axe DevTools or Chrome Lighthouse (Accessibility category) for a quick single-page scan. -…
Three separate criteria that get conflated: Criterion Level Requirement --------- 1.4.10 Reflow AA Content is usable at 320 CSS px wide without scrolling in two dimensions 1.4.4 Resize Text AA Text scales to 200% without losing content or function 1.4.12 Text Spacing AA Nothing breaks…
No Keyboard Trap (2.1.2, level A): if the keyboard can move focus into a region, it must be able to move focus out using standard keys (Tab, Shift+Tab, arrows). If a special key is required to leave, the user must be told beforehand. Three common…
