Interview questions
Top 30 HTML Interview Questions (with answers)
Revision list of 30 html interview questions for frontend engineers, with concise answers and links to deeper Frontend Beauty guides. Composite list for practice—not a ranked survey.
Composite practice list based on common frontend interview themes and publicly discussed fundamentals. Ordering is editorial for learning, not a statistical “most asked” ranking from a single company.
- 30 questions
- html
How to use this list
- Answer out loud in 60–90 seconds, then check the written answer.
- Where a “Deeper guide” link appears, open it after you attempt the answer yourself.
- Pair with DSA, machine coding, and playground drills.
html
1.What is semantic HTML and why does it matter?
Use elements that match meaning (nav, main, button, label) so browsers, assistive tech, and crawlers understand structure. CSS can fake appearance; it cannot replace missing semantics without extra ARIA and keyboard work.
2.When should you use a link versus a button?
Links navigate with href (open in new tab, bookmarkable, crawlable). Buttons perform actions on the page. Do not fake either with divs unless you reimplement keyboard and accessibility fully.
3.Why should a page have a single main landmark?
main identifies primary content and should appear once. It enables skip links and AT landmark navigation. Header/nav/footer sit outside main.
4.How do you correctly label form controls?
Associate a label via for/id or wrap the control. Placeholder is a hint, not a label. Unlabeled inputs fail accessibility and often fail Testing Library role queries.
5.What are the rules of thumb for img alt text?
Informative images need meaningful alt. Decorative images use empty alt (alt=""). Do not stuff keywords. Provide width/height or CSS aspect-ratio to limit CLS.
6.What is the difference between section, article, and div?
div is generic styling/hook with no semantics. section is a thematic grouping with a heading. article is self-contained content that could stand alone (post, card widget).
7.How should heading levels be structured?
Use logical h1–h6 order that reflects the outline. Do not skip levels just for visual size—style with CSS. Headings are navigation landmarks for screen-reader users.
8.What is the accessibility tree?
A structure derived from the DOM, plus ARIA, that assistive technologies use. Broken semantics produce a poor accessibility tree even if the page “looks fine.”
9.What do native HTML5 input types buy you?
Types like email, tel, url, number improve mobile keyboards and basic validation. They are progressive enhancement—not a substitute for server validation.
10.What is the purpose of fieldset and legend?
They group related controls (especially radio sets) and provide an accessible group name. Useful for screen-reader context on multi-control questions.
11.When are HTML tables appropriate?
For tabular data with headers—not for page layout. Use th, scope or headers/id associations so assistive tech announces relationships.
12.What are srcset and the picture element for?
srcset/sizes let the browser pick among candidates by density/width. picture adds art direction (different crops by media query). Do not lazy-load the LCP image.
13.How does the dialog element help accessibility?
Native dialog with showModal uses the top layer, handles Escape more sanely, and reduces custom modal bugs. You still manage focus return and labeled titles.
14.What is a skip link?
A first focusable link that jumps to main content so keyboard users can bypass repetitive nav. It should become visible on focus.
15.Why set the lang attribute on html?
It declares the document language for assistive tech pronunciation, hyphenation, and translation tools. Wrong lang harms accessibility.
16.What meta tags matter for SEO and sharing?
Unique title, meta description, canonical URL, and Open Graph/Twitter tags for previews. Structured data (JSON-LD) helps machines understand page type.
17.What is the difference between readonly and disabled on inputs?
readonly keeps the field focusable and typically still submits its value. disabled prevents interaction and excludes the value from submit. Pick based on UX and form data needs.
18.What does autocomplete help with?
Hints browsers and password managers about the field’s meaning (email, current-password, etc.). Correct tokens improve checkout and login UX.
19.What is progressive enhancement in HTML terms?
Core content and critical actions work with basic HTML; CSS/JS enhance. Avoid trapping essential text only inside client-rendered bundles when SEO/a11y matter.
20.When is ARIA necessary versus harmful?
Prefer native elements first. ARIA can expose roles/states for custom widgets but wrong ARIA is worse than none. Follow ARIA Authoring Practices for patterns.
21.What does the sandbox attribute on iframes do?
It restricts iframe capabilities (scripts, forms, top-navigation, etc.) to reduce risk from third-party or untrusted content. Open only the permissions you need.
22.What is the template element used for?
It holds inert DOM that is not rendered until cloned. Useful for client-side rendering patterns and Web Components.
23.Why can contenteditable be problematic?
Editing behavior is inconsistent across browsers, and raw HTML output is an XSS risk. Prefer established editor libraries for production rich text.
24.What is the difference between strong/em and b/i?
strong/em convey importance/emphasis semantics. b/i are primarily presentational without that emphasis meaning. Prefer semantic tags when meaning matters.
25.How do you mark up a navigation region accessibly?
Use nav, and if there are multiple navs, label them (aria-label). Current page links can use aria-current="page". Keep lists of links structured.
26.What is the button type default inside forms?
A button inside a form defaults to type="submit". Use type="button" for non-submit actions to avoid accidental submits.
27.How do details and summary help?
They provide a native disclosure widget without JavaScript. Style carefully and ensure the summary is keyboard operable (it is by default).
28.What is the time element for?
It marks dates/times with an optional machine-readable datetime attribute—useful for posts, schedules, and clearer semantics.
29.What is Subresource Integrity (SRI)?
The integrity attribute lets the browser verify a fetched script/style matches a cryptographic hash—mitigates compromised CDNs. Pair with crossorigin as required.
30.Why reserve width and height on images?
They help the browser allocate layout space before the image loads, reducing cumulative layout shift (CLS). aspect-ratio in CSS is another modern approach.