HTML questions go beyond tag names. Interviewers check semantic markup, forms and accessibility, because the right element gives you keyboard support, screen reader support and better SEO for free.
Below are 60 HTML questions with the correct answer and a short explanation, grouped from fresher to experienced level. Try each one before you open the answer.
Which HTML element is the correct semantic choice to wrap the main menu links of a website?
Answer: C. <nav>
The <nav> element marks a block of major navigation links. Screen readers expose it as a navigation landmark so users can jump to it directly. A div has no meaning, and section or aside describe different kinds of content.
An image is purely decorative and adds no information. What is the best alt attribute for it?
Answer: A. alt="" (empty)
An empty alt tells screen readers to skip the image. If alt is missing, many screen readers read the file name instead, which is noise. Describing a decorative image wastes the user time, so empty alt is correct.
What is the computed padding of the paragraph?
html { font-size: 16px; }
.card { font-size: 20px; }
.card p { padding: 1rem; }Answer: D. 16px
rem means "root em": it is always relative to the font size of the root html element, here 16px. The em unit is the one that follows the font size of the current element, which would give 20px. Using rem keeps spacing consistent and still respects the user changing the default font size.
What should the <main> element wrap on a page?
Answer: B. The primary content unique to that page
<main> marks the central content of the page, excluding repeated parts like the header, sidebar and footer. There should be one visible <main> per page. Screen reader users can jump straight to it.
A blog list page shows ten post cards, each of which makes sense on its own and could be shared. Which element should wrap each card?
Answer: D. <article>
<article> is for self-contained content that could stand alone, such as a post, a product card or a comment. <section> groups related content within a page, usually with a heading. <aside> is for side content.
An Arabic page has <html lang="en"> by mistake. What is the main problem?
Answer: A. Screen readers read the Arabic with English rules
lang tells assistive technology, translation tools and browsers which language the text is in. A wrong value makes screen readers mispronounce everything and can affect hyphenation and fonts. Use lang="ar" (with dir="rtl") for Arabic.
Tag chips should sit side by side in a line of text but each have a fixed height and padding that pushes neighbours. Which display value fits?
Answer: A. inline-block
inline-block boxes flow inline like words, so they sit next to each other, but they also respect width, height and vertical padding and margin like blocks. Plain inline elements ignore width and height.
You want 16px between every flex item but no extra space at the outer edges. What is the cleanest way?
Answer: C. gap: 16px on the flex container
gap adds space only between items, both in flexbox and grid, and it works with wrapping too. Margins on every item also add space at the edges, and space-around puts half gaps at the ends.
The root font size is 16px. What is the font size of the inner span?
<div style="font-size: 1.5em"> <span style="font-size: 1.5em">Total</span> </div>
Answer: B. 36px
For font-size, em is relative to the parent’s font size. The div is 1.5 × 16 = 24px, and the span is 1.5 × 24 = 36px. This compounding is why rem is often preferred for font sizes.
Why is nothing shown for this rule?
.required::before {
color: red;
margin-right: 4px;
}Answer: B. It has no content property
::before and ::after only generate a box when content is set, even content: "". Add content: "*" here. Note that ::before does not work on replaced elements such as <img> or <input>.
A 1200px wide image overflows its column on a 360px phone. Which rule fixes this for all images?
Answer: C. img { max-width: 100%; height: auto }
max-width: 100% lets the image shrink to its container but never grow past its natural size, and height: auto keeps the aspect ratio. overflow on the img itself does not resize it.
Which selector shades the 1st, 3rd, 5th and so on rows of a table body?
Answer: C. tbody tr:nth-child(odd)
:nth-child(odd) is the same as :nth-child(2n+1), matching positions 1, 3, 5 and onward. 2n (or even) matches 2, 4, 6. tr + tr matches every row except the first.
Which CSS makes a button’s background fade from blue to dark blue over 200 ms on hover?
Answer: A. .btn { transition: background-color 200ms } plus a :hover colour
A transition animates a property between two values when it changes, so you need the transition on the element and a rule that changes the value, such as :hover. Putting transition on the base rule makes it animate both in and out.
A spinner uses @keyframes spin { to { transform: rotate(360deg) } }. Which declaration keeps it spinning?
Answer: C. animation: spin 1s linear infinite
animation applies keyframes by name with a duration, a timing function and an iteration count. infinite repeats forever, and linear keeps the speed even. transition cannot run keyframes.
A card reveals buttons only on :hover, so phone users never see them. Which media query targets devices that can really hover?
Answer: D. @media (hover: hover) and (pointer: fine)
The hover and pointer media features describe the main input device. Use them to add hover-only reveals for mouse users while keeping the buttons visible by default for touch users. Screen width does not tell you whether a device can hover.
A control opens a modal dialog on the same page without changing the URL. Which element should it be?
Answer: A. A <button>
Links navigate to a new location; buttons perform actions such as opening dialogs or submitting forms. Using the right element gives screen reader users accurate expectations and the right keyboard behaviour (Space activates buttons).
A form has three radio buttons labelled 'Standard', 'Express' and 'Same day' under the question 'Delivery speed'. What markup best ties the question to the group?
Answer: D. <fieldset> with a <legend>
A <fieldset> with a <legend> groups related controls, and screen readers announce the legend with each option, for example 'Delivery speed, Standard, radio button'. Plain text above the group is not linked to the inputs.
How many visible <main> elements should a typical web page have?
Answer: D. One
A page should have one visible <main> element containing its primary content. Screen reader users can jump straight to it with landmark navigation, and it also supports skip links.
What is the simplest way to tell assistive technology that an email input is mandatory?
Answer: B. Add the required attribute
The HTML required attribute exposes the required state to assistive technologies and enables browser validation. A visible indicator, such as an asterisk explained at the top of the form, should accompany it for sighted users.
Which landmark role does a page-level <footer> (not inside an article or section) map to?
Answer: B. contentinfo
A top-level <footer> maps to the contentinfo landmark, which usually holds copyright, contact and policy links. A top-level <header> maps to banner and <aside> to complementary.
You open a confirmation using the native <dialog> element with dialog.showModal(). Which behaviour do you get from the browser without extra code?
Answer: D. Content outside becomes inert, focus moves into the dialog, and Escape closes it
showModal places the dialog in the top layer, makes the rest of the page inert so focus cannot leave, moves focus inside and closes on Escape. It also exposes the right dialog role to assistive technology. You still decide which element gets initial focus and style the ::backdrop yourself.
Text jumps down as product images load, hurting CLS. What is the simplest fix?
Answer: A. Add width and height attributes to each img
With width and height attributes, the browser knows the aspect ratio before the file arrives and reserves the right space. CSS like width: 100%; height: auto still makes the image responsive. Without them, the box starts at zero height and grows.
Two scripts are loaded with async: <script async src="lib.js"> then <script async src="app.js">. app.js uses lib.js. What can go wrong?
Answer: D. app.js may run first if it downloads first
async scripts download in parallel and each runs as soon as it arrives, in no fixed order. That suits independent scripts like analytics. For scripts that depend on each other, use defer (runs in document order) or ES modules.
A click listener is on a <button> that contains an <svg> icon. The user clicks the icon. What are event.target and event.currentTarget?
Answer: D. target is the svg part; currentTarget is the button
event.target is the deepest element actually clicked, which can be the icon or its path. event.currentTarget is the element whose listener is running. Reading data attributes from target instead of currentTarget is a common bug.
A custom "Save" control calls form.submit(). The required fields are skipped and the submit handler never runs. What should it call instead?
Answer: C. form.requestSubmit()
form.submit() submits directly, skipping constraint validation and the submit event. form.requestSubmit() behaves like clicking a submit button: it validates, fires submit (so your handler can preventDefault) and then submits.
Keyboard users must press Tab 40 times to get past the mega menu on every page. What is the standard fix?
Answer: A. A "Skip to main content" link as the first focusable element
A skip link at the start of the page jumps focus to <main>. It can be visually hidden until focused. Removing links from the tab order or hiding them would make the menu unusable for keyboard and screen reader users.
An element has style="color: blue" and a stylesheet rule .note { color: red !important }. Which colour shows?
Answer: B. Red
Inline styles beat normal stylesheet rules, but an !important declaration beats normal inline styles. Only an inline !important would win over it. Overusing !important makes CSS hard to change, so keep it for utilities and overrides.
A design system wants base link styles that any app class can override easily. Why use :where(nav, footer) a instead of :is(nav, footer) a?
Answer: D. :where() adds zero specificity
Both match the same elements. :is() takes the specificity of its most specific argument, while :where() always counts as zero. So :where(nav, footer) a has specificity (0, 0, 1), and any class rule overrides it.
Cards that contain an image should get a different padding. Which pure CSS selector does this?
Answer: A. .card:has(img)
:has() matches an element if the selector inside it matches something relative to it, so .card:has(img) selects cards that contain an img. It is supported in all modern browsers. :parent, < and :contains() are not valid CSS.
In a 3-column grid, a featured product card should be twice as wide as the others. Which rule goes on that card?
Answer: B. grid-column: span 2
grid-column: span 2 makes the item cover two column tracks from wherever it is placed. grid-row: span 2 would make it taller instead, and width: 200% would overflow its cell rather than take a second track.
A 640px-wide grid has grid-template-columns: repeat(3, 1fr) and column-gap: 20px. How wide is each column?
Answer: D. 200px
Gaps are taken out before fr units share the space. Three columns have two gaps: 640 − 2 × 20 = 600px, and 600 ÷ 3 = 200px per column.
An icon gets position: relative; top: 4px. What happens to the elements around it?
Answer: C. They stay put; the icon’s original space is kept
Relative positioning moves the box visually but layout still treats it as being in its original place. Neighbours do not move, and the element may overlap them. It also makes the element a containing block for absolute children.
A site serves English and Arabic (dir="rtl"). An icon needs space between it and the text that follows. Which property flips correctly with direction?
Answer: B. margin-inline-end
Logical properties follow the writing direction: inline-end is the right side in English and the left side in Arabic. Physical properties like margin-right stay on the right and look wrong in RTL layouts.
Designers dislike focus rings after mouse clicks, but keyboard users need them. What is the right CSS?
Answer: D. Style :focus-visible and leave the ring for keyboard focus
:focus-visible matches when the browser decides a focus indicator is helpful, mainly for keyboard focus, and usually not for mouse clicks on buttons. Removing outlines with :focus breaks navigation for keyboard users.
In BEM naming, what does card__title--large describe?
Answer: B. The card block’s title element, large variant
BEM is block__element--modifier. card is the block, title is an element inside it, and large is a variation. The flat, explicit names keep specificity low and make it clear where a style belongs.
Clicking a link to #pricing scrolls the section heading under a 72px sticky header. What is the simplest fix?
Answer: B. scroll-margin-top: 72px on the target sections
scroll-margin-top adds space above an element when it is scrolled into view, by anchor links or scrollIntoView, without changing layout. Setting it to the header height stops headings landing underneath. scroll-padding-top on the scroll container also works.
A service worker uses cache-first for every request, including index.html. After a deploy, users still see the old site. Why?
Answer: D. index.html is always served from the old cache
With cache-first for the HTML, the old page is served before the network is ever asked, and it links to old bundles. Use network-first or stale-while-revalidate for HTML, and version the service worker caches.
Which change helps meet WCAG 1.3.5 Identify Input Purpose on a sign-up form?
<input id="email" name="user_mail" type="text">
Answer: B. Add autocomplete="email" to the input
1.3.5 asks that inputs collecting user information use the right autocomplete tokens, such as name, email or tel. Browsers can then autofill, and assistive tools can add icons, which helps people with memory or motor difficulties.
A page has a main menu and a footer menu, both in <nav> elements. How can screen reader users tell them apart in a landmarks list?
Answer: A. Give each nav a unique aria-label
When a landmark type appears more than once, each instance should have a unique accessible name, such as aria-label="Main" and aria-label="Footer". Avoid repeating the word 'navigation', as the role is already announced.
A page has three tables. How can each be given a name that screen readers announce when users reach it?
Answer: A. A <caption> inside each table
The <caption> element gives a table an accessible name, announced when users enter the table and visible to everyone. It helps users choose the right table without reading its contents.
Your service worker serves index.html with a stale-while-revalidate strategy. After a deploy, users see the old app on the first reload and the new one on the second. Why?
Answer: B. The worker answers immediately from the cache and fetches the new HTML in the background to update the cache for next time
Stale-while-revalidate trades freshness for speed: it returns the cached copy at once and refreshes the cache in the background. That is great for avatars or non-critical data, but for the HTML shell it means one stale visit after each deploy. Use network-first for HTML or show an "update available" prompt when a new worker is waiting.
A whole off-screen cart drawer has aria-hidden="true", but its buttons can still be reached with Tab. What is the problem?
Answer: C. Users focus buttons that screen readers announce as nothing
aria-hidden removes content from the accessibility tree but does not stop keyboard focus. Screen reader users then land on silent, invisible controls. Use the inert attribute or display: none on closed drawers so their contents cannot be focused.
In a single-page app, clicking a nav link swaps the content but keyboard focus stays on the old link and screen readers say nothing. What is the usual fix?
Answer: A. Move focus to the new heading and update the title
Full page loads reset focus and announce the new title, but client-side routing does not. Moving focus to the new h1 (with tabindex="-1") or main region and updating document.title tells users where they are. A live region over the whole page would be noisy.
A web component renders a <button> inside an open shadow root. The page stylesheet has button { background: red }. What happens?
Answer: B. The rule does not reach the button inside the shadow root
Shadow DOM scopes styles: page selectors do not match elements inside a shadow root, and the component’s styles do not leak out. Inherited properties like color and font still pass through, and custom properties and ::part() let the page theme it on purpose.
A <template id="row"> holds a <tr> with an <img src="a.png">. What happens before you clone it?
Answer: D. Nothing renders and the image is not fetched
Template content is parsed into an inert DocumentFragment: it is not rendered, images do not load and scripts do not run. You clone it with template.content.cloneNode(true) and insert the copy, which then behaves normally.
A form shows "Passwords do not match" forever, even after the user fixes it. What is missing?
confirm.addEventListener("input", () => {
if (confirm.value !== pass.value) {
confirm.setCustomValidity("Passwords do not match")
}
})Answer: C. An else branch calling confirm.setCustomValidity("")
Any non-empty custom validity message keeps the field invalid. You must reset it with setCustomValidity("") when the value becomes valid. Otherwise the form will never submit.
A container holds only floated images and collapses to zero height, so its border does not wrap them. What is the modern fix?
Answer: C. display: flow-root on the container
Floats are taken out of normal flow, so a parent that only has floats has no in-flow height. display: flow-root makes the parent a new block formatting context, which contains its floats, without the old clearfix hack.
A box inside a 400px wide, 1000px tall container has padding-top: 50%. How tall is that padding?
Answer: A. 200px
Percentage padding and margin, even on top and bottom, are based on the containing block’s width. So 50% of 400px is 200px. This was the old trick for fixed aspect ratios, now replaced by the aspect-ratio property.
A modal with position: fixed sits inside a wrapper with transform: translateX(0). The modal now scrolls with the page and is clipped. Why?
Answer: B. The transformed wrapper becomes its containing block
An ancestor with transform, filter, perspective or certain contain values becomes the containing block for fixed descendants. The modal is then fixed to that wrapper, not the viewport. Render modals near the end of body (for example with a portal).
Cards in a grid each have a title, text and a button. Long titles make buttons sit at different heights across a row. Which CSS feature lines up the inner parts of every card?
Answer: C. grid-template-rows: subgrid on each card
With subgrid, a card that spans several rows of the parent grid uses those parent rows for its own children. Titles, text and buttons across cards then share the same row tracks and line up. Subgrid is supported in all modern browsers.
A photo gallery uses grid-auto-flow: dense to fill holes left by wide images. What is the side effect?
Answer: C. Items can appear out of their DOM order
dense lets the grid place later items into earlier gaps, so the visual order can differ from the source order. That is fine for a photo wall, but for content that is read or tabbed through it breaks the expected order.
A transition on --angle in background: conic-gradient(from var(--angle), ...) jumps instead of animating smoothly. What makes it animate?
Answer: D. Register --angle with @property as an <angle>
Unregistered custom properties are just token strings, so the browser cannot interpolate them and flips at the midpoint. @property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg } gives it a type, so it can be transitioned and animated.
A 300×200 dialog box has position: absolute; inset: 0. What else centres it inside its positioned parent?
Answer: B. width: 300px; height: 200px; margin: auto
With all four insets set and a fixed width and height, the leftover space is shared by auto margins on both axes, centring the box. This is the classic way to centre an absolute element without transforms.
Comments on a UAE site can be in Arabic or English, and Arabic ones show punctuation in the wrong place. What fixes direction per comment?
Answer: D. dir="auto" on each comment element
dir="auto" makes the browser pick the direction from the first strong character in that element, so Arabic comments become RTL and English ones LTR. text-align only moves the text; it does not fix the order of punctuation and mixed words.
A 200px wide tooltip inside a 1000px wide parent has position: absolute; left: 50%; transform: translateX(-50%). Where is its left edge?
Answer: B. At 400px from the parent’s left edge
left: 50% is relative to the containing block, so it places the left edge at 500px. translateX(-50%) is relative to the element’s own width, moving it back 100px. The edge ends at 400px and the tooltip is centred.
A developer uses CSS order on a flex container to show the price above the product name, while the DOM has name, then description, then price. A screen reader reads them in DOM order. When does this become a WCAG 1.3.2 failure?
.card { display: flex; flex-direction: column; }
.price { order: -1; }Answer: B. When the order change alters the meaning
1.3.2 Meaningful Sequence fails only when the reading order differs in a way that changes meaning. Large differences between visual and DOM order also confuse keyboard users, so keeping the DOM in a logical order is the safest approach.
A script inserts <div aria-live="polite">Saved</div> into the page at the moment it wants the message read. Many screen readers stay silent. Why?
Answer: B. The region should already exist, then get the text
Live regions are most reliable when the empty container is in the DOM before its content changes; screen readers then notice the update. Inserting a region and its text together is often missed, except with role="alert" in some browsers.
A developer puts aria-label="Product details" on a <div> with no role. What is the result?
Answer: C. It is not supported and often ignored
Generic elements like a plain <div> or <span> do not support naming, so aria-label is prohibited there and is often ignored. Give it a suitable role, such as region or group, or use a visible heading instead.
A developer adds role="presentation" to a <table> that holds a real data grid. What do screen reader users lose?
Answer: C. Table semantics such as headers
role="presentation" (or none) removes the element's implicit semantics, and for tables the row and cell structure too. Users can no longer navigate by cell or hear headers, so it suits only layout tables.
A screen reader reads your email as "table with 5 rows and 3 columns" again and again. What fixes this?
Answer: A. Add role="presentation" to the layout tables
role="presentation" tells assistive technology that the table is for layout, not data, so it reads the content without announcing rows and columns. Also set lang on the html element and use real text for headings.
Take a 15-question HTML MCQ test with a score at the end, or practise the full HTML question bank and earn points on the leaderboard.