Top 50 HTML & CSS Interview Questions (with answers)

1. 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.

   Deeper guide →

2. css

   2.What is the CSS box model?

   Every box has content, padding, border, and margin. With content-box, width applies to content only; with border-box, width includes padding and border. Most layout systems set border-box globally.

   Deeper guide →

3. html

   3.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.

   Deeper guide →

4. css

   4.What is the difference between content-box and border-box?

   content-box: specified width/height size the content area; padding and border add outside. border-box: specified width/height include content, padding, and border—usually easier for column math and components.

5. html

   5.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.

6. css

   6.When do you use Flexbox versus Grid?

   Flexbox is strong for one-dimensional distribution (rows or columns of components). Grid is strong for two-dimensional page/section layouts. Real UIs often combine both.

7. html

   7.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.

8. css

   8.What do flex-grow, flex-shrink, and flex-basis do?

   flex-basis is the initial main size before free space is distributed. flex-grow shares positive free space. flex-shrink reduces items when space is tight. Defaults matter—know flex: 1 shorthand implications.

9. html

   9.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.

10. css

    10.What is the difference between align-items and justify-content in Flexbox?

    justify-content distributes along the main axis; align-items aligns on the cross axis. Direction depends on flex-direction. Interviewers often swap axis names—draw it.

11. html

    11.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).

12. css

    12.What is the fr unit in CSS Grid?

    fr represents a fraction of available free space in the grid container. repeat(3, 1fr) builds equal columns after accounting for gaps and fixed tracks.

13. html

    13.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.

14. css

    14.What is the difference between auto-fit and auto-fill?

    Both create as many tracks as fit. auto-fit collapses empty tracks so items can expand; auto-fill keeps empty track slots. Used with minmax for responsive grids without many breakpoints.

15. html

    15.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.”

    Deeper guide →

16. css

    16.How does position: sticky work?

    The element acts relatively until a scroll threshold, then sticks within its containing block. Overflow hidden/auto on ancestors is a common reason sticky “fails.”

17. html

    17.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.

18. css

    18.What is a stacking context?

    A local stacking order for z-index. Properties like opacity < 1, transforms, filters, and positioned elements with z-index can create new contexts—so z-index only competes inside that context.

19. html

    19.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.

20. css

    20.How does CSS specificity work?

    Roughly: inline styles > IDs > classes/attributes/pseudo-classes > elements. Equal specificity falls to source order. Cascade layers can override raw specificity between layers.

    Deeper guide →

21. html

    21.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.

22. css

    22.What are cascade layers (@layer) for?

    They let you order groups of styles (reset, base, components, utilities) so later layers win without escalating selector weight. Important rules reverse layer order—know that twist.

    Deeper guide →

23. html

    23.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.

24. css

    24.What are CSS custom properties good for?

    Tokens for color, space, and type that cascade and can change at runtime (theming). They are live in the cascade—unlike preprocessors variables that compile away.

25. html

    25.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.

    Deeper guide →

26. css

    26.What is the difference between em and rem?

    em is relative to the element’s computed font-size (and can compound). rem is relative to the root font-size—usually safer for spacing scales.

27. html

    27.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.

28. css

    28.Why can 100vh be problematic on mobile?

    Mobile browser chrome can make classic vh units jump. Prefer dvh/svh/lvh where supported, and test real devices for full-height layouts.

29. html

    29.Why set the lang attribute on html?

    It declares the document language for assistive tech pronunciation, hyphenation, and translation tools. Wrong lang harms accessibility.

30. css

    30.What are container queries?

    They let components respond to their container’s size rather than only the viewport—better for reusable cards in sidebars vs main columns.

31. html

    31.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.

32. css

    32.How does clamp() help fluid typography?

    clamp(min, preferred, max) sets a responsive value that won’t go below min or above max—common for type and spacing without many breakpoints.

33. html

    33.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.

34. css

    34.Why animate transform and opacity instead of top/left/width?

    transform/opacity are more often compositor-friendly and avoid layout thrash. Changing geometry properties frequently triggers layout and paint more expensively.

35. html

    35.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.

36. css

    36.What is :focus-visible and why use it?

    It styles focus for keyboard (and some other) modalities without forcing a ring on every mouse click. Never remove focus outlines without an accessible replacement.

    Deeper guide →

37. html

    37.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.

38. css

    38.What is the difference between :is() and :where()?

    Both group selectors. :where() always contributes zero specificity; :is() takes the specificity of its most specific argument—easy footgun with IDs inside :is().

39. html

    39.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.

40. css

    40.What does the :has() selector enable?

    Selecting a parent based on descendants/state (e.g. form:has(:invalid)). Powerful; use carefully for performance and complexity.

41. html

    41.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.

42. css

    42.How do you reduce layout shift from images and embeds?

    Reserve space with width/height or aspect-ratio, avoid inserting banners above content without reserved space, and be careful with web font swaps.

    Deeper guide →

43. html

    43.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.

44. css

    44.What is prefers-reduced-motion for?

    A user preference to minimize non-essential motion. Respect it by shortening or disabling decorative animations—important for vestibular accessibility.

45. html

    45.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.

46. css

    46.How do you implement dark mode thoughtfully?

    Use tokens with prefers-color-scheme and/or a class strategy, ensure contrast, and avoid relying on color alone for state. Test form controls and shadows in both themes.

47. html

    47.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.

48. css

    48.What is BFC (block formatting context) in practical terms?

    A layout region that contains floats and prevents margin collapse in certain cases. Triggers include overflow values, flex/grid items, etc. Useful vocabulary for older float bugs.

49. html

    49.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.

50. css

    50.Why might z-index appear to “not work”?

    The element may not be positioned, or a parent stacking context isolates it. Fix the stacking context structure rather than inventing huge z-index numbers.

All interview question lists · Interview hub · Learn