Most asked interview questions with detailed answers
💬
Last updated Sep 2026
Expert Content
HTML Interview Q&A
Q: What's the difference between
and , and when would you use a generic wrapper over a semantic element?
is a block-level generic container (starts on a new line, takes full available width by default); is inline (flows within text, no forced line break). Both are correct choices when there is genuinely no semantic element that fits — a purely visual wrapper needed only for CSS styling or JavaScript hooking, with no inherent meaning of its own. The mistake is reaching for
first out of habit when a semantic element (nav, article, button) already fits the actual role of the content.
Q: Explain the difference between block-level and inline elements.
Block-level elements (div, p, h1-h6, section) start on a new line and take the full available width by default; inline elements (span, a, strong, em) flow within surrounding text and only take up as much width as their content needs. This is a default display value, not a permanent property — CSS can override it (display: inline-block, display: flex), but understanding the native default explains a lot of "why doesn't width do anything on this element" confusion (an unstyled inline element ignores width/height by default).
Q: What's the difference between id and class, in practice?
id must be unique per page and is meant for a single specific target — anchor navigation (#pricing), a label for= connection, or one specific JavaScript hook. class can apply to any number of elements and is the right default for anything reusable, including most CSS styling. Using id for styling that's meant to apply to multiple elements is a common beginner habit that makes CSS harder to reuse later — the practical rule is "class for style, id for one unique target."
Q: Why does the alt attribute matter, and what makes a good vs. bad one?
alt provides the textual equivalent of an image for screen reader users and for the case where the image fails to load. A bad alt restates the obvious ("image of a mug") or is left as the raw filename (alt="IMG_4821.jpg", which screen readers will read out literally). A good alt describes what the image actually communicates in context — for a product photo, the product and relevant visual detail; for a purely decorative image, alt="" (empty, not omitted) so assistive technology skips it entirely rather than announcing something meaningless.
Q: What's the real difference between and a clickable
with an onclick handler?
A real is automatically keyboard-focusable (Tab reaches it), activates on both Enter and Space, and is announced as "button" by screen readers — all for free. A
with onclick gets none of this by default: it's not in the tab order, doesn't respond to keyboard activation, and is announced as generic content, not an interactive control. Making it accessible requires manually adding tabindex="0", role="button", and a keydown handler for Enter/Space — real, extra work that a native needs none of.
Q: Why is using a
for page layout considered a real problem, not just outdated style?
A screen reader announces a
as tabular data — number of rows, number of columns, header relationships — which is actively wrong and confusing when the table is really just a layout grid with no genuine data relationship between its cells. It's also rigid to make responsive compared to CSS Grid or Flexbox, which were specifically built for layout. The fix is reserving
for genuinely tabular data only, and using CSS Grid/Flexbox for everything layout-related.
