Top 50 HTML & CSS Interview Questions & Answers (2026 Advanced Guide)
HTML and CSS are the absolute foundation of the web. No matter what JavaScript framework you use (React, Angular, Vue), it all compiles down to HTML and CSS in the browser.
In 2026, Frontend interviews are heavily focused on Web Accessibility (a11y), responsive design, Flexbox, and CSS Grid. Here are the Top 50 Advanced HTML & CSS Interview Questions you must know to land a UI/UX or Frontend Developer role.
🌐 Part 1: HTML5 Core & Semantics
1. What is HTML5?
HTML5 is the latest version of the HyperText Markup Language. It introduced semantic elements (like <header>, <footer>), multimedia tags (<audio>, <video>), and APIs like Geolocation, LocalStorage, and Canvas, reducing reliance on third-party plugins like Flash.
2. What are Semantic HTML Elements?
Semantic elements clearly describe their meaning to both the browser and the developer. Examples include <article>, <nav>, and <section>. Non-semantic elements like <div> and <span> tell nothing about their content.
3. Why is Semantic HTML important?
It is crucial for two reasons: SEO (Search Engine Optimization), as crawlers can better understand page hierarchy, and Accessibility (a11y), as screen readers rely on semantic tags to navigate the page for visually impaired users.
4. What is the DOM (Document Object Model)?
The DOM is a programming interface for web documents. It represents the page so that programs (like JavaScript) can change the document structure, style, and content. It acts as a tree of nodes/objects.
5. Explain the purpose of the <!DOCTYPE html> declaration.
It is an instruction to the web browser about what version of HTML the page is written in. <!DOCTYPE html> specifically tells the browser to render the page in HTML5 standards mode, preventing "quirks mode".
6. What are `data-` attributes in HTML5?
They are used to store custom, invisible data directly on HTML elements (e.g., data-user-id="123"). This data can then be easily accessed and manipulated using JavaScript via the dataset property.
7. Explain the difference between `script`, `script async`, and `script defer`.
A normal script blocks HTML parsing until it downloads and executes. async downloads the script in the background and executes it immediately when ready (blocking parsing temporarily). defer downloads in the background but waits to execute until the HTML parsing is completely finished.
8. What is the purpose of the `alt` attribute on images?
The alt attribute provides alternative text if an image fails to load. More importantly, it is read aloud by screen readers for visually impaired users, and search engines use it to understand image content for SEO.
9. What is an iframe?
An Inline Frame (<iframe>) is used to embed another document (like a YouTube video or Google Map) directly inside the current HTML document. It operates in its own isolated browsing context.
10. What is LocalStorage vs SessionStorage vs Cookies?
LocalStorage: Stores data with no expiration date (5-10MB limit). SessionStorage: Stores data for one session (cleared when the tab closes). Cookies: Store small amounts of data (4KB) sent back and forth to the server with every HTTP request.
Practice Web Dev on the go! 🚀
Don't just read theory. Download TechQuiz to take interactive mock tests and prepare for your Frontend interviews perfectly.
♿ Part 2: Forms & Web Accessibility (a11y)
11. What is Web Accessibility (a11y)?
Web accessibility ensures that websites and applications can be used by people with disabilities (visual, auditory, motor, cognitive). It is enforced through semantic HTML, ARIA roles, and high color contrast.
12. What are ARIA roles?
Accessible Rich Internet Applications (ARIA) roles provide extra information to screen readers. For example, if you build a custom toggle switch using a <div>, you must give it role="switch" so screen readers know what it is.
13. Explain the `tabindex` attribute.
tabindex specifies the tab order of an element. tabindex="0" allows an element to be focusable sequentially. tabindex="-1" makes an element focusable via JavaScript but removes it from the sequential keyboard navigation flow.
14. What is the purpose of the `
A <label> provides a user interface for an input. By associating a label with an input (using the for attribute matching the input's id), users can click the label text to focus or toggle the input, greatly improving usability on mobile devices.
15. Difference between GET and POST in HTML forms?
GET appends form data to the URL (visible in history, limited length, used for fetching data). POST sends form data inside the HTTP request body (secure, no size limit, used for updating/submitting sensitive data).
16. What are HTML5 Form Validations?
HTML5 introduced built-in browser validation using attributes like required, minlength, maxlength, pattern (Regex), and specific input types like type="email" or type="url".
17. What is the Canvas element?
The <canvas> element is used to draw graphics on the fly via JavaScript. It is heavily used for browser games, data visualization (charts), and complex animations.
18. Canvas vs SVG?
Canvas is pixel-based (raster), drawn via JavaScript, and loses quality if zoomed; great for games. SVG is vector-based (XML), infinitely scalable without losing quality, and supports CSS styling and DOM events; great for icons and logos.
19. What is a Web Worker?
Because JavaScript is single-threaded, heavy computations freeze the UI. A Web Worker allows you to run JavaScript in a background thread, separate from the main execution thread of a web application.
20. What is the Shadow DOM?
Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree. It encapsulates CSS styles and HTML, ensuring that styles inside a component don't leak out, and external styles don't leak in (crucial for Web Components).
Take Your UI/UX Skills to the Next Level! 🎨
Join the smartest developers who use TechQuiz to land high-paying frontend tech jobs.
🎨 Part 3: CSS Fundamentals & Selectors
21. Explain the CSS Box Model.
Every HTML element is wrapped in a box. From inside to outside, it consists of: Content (text/images), Padding (transparent space around content), Border (line wrapping padding), and Margin (transparent space separating the box from other elements).
22. What does `box-sizing: border-box` do?
By default (content-box), adding padding or borders increases an element's total width. border-box forces the padding and border to be included *inside* the defined width/height, making layout math much easier.
23. What is CSS Specificity?
Specificity determines which CSS rule is applied when multiple rules target the same element. The hierarchy is: Inline styles (highest) > IDs > Classes, Attributes, and Pseudo-classes > Elements and Pseudo-elements (lowest).
24. Why should you avoid `!important`?
!important overrides all normal specificity rules. Using it heavily makes CSS impossible to maintain and debug because it breaks the natural cascading behavior of stylesheets.
25. Difference between `display: none` and `visibility: hidden`?
display: none completely removes the element from the document flow; it takes up zero space. visibility: hidden makes the element invisible, but it still takes up the exact same physical space in the layout.
26. Explain position: relative vs absolute.
relative positions an element relative to its *normal* position in the document flow. absolute removes the element from the normal flow and positions it exactly relative to its nearest positioned ancestor (an ancestor with relative, absolute, or fixed positioning).
27. What does `position: sticky` do?
It acts as a hybrid between relative and fixed. It behaves relatively until the user scrolls past a defined offset (e.g., top: 0), at which point it becomes "fixed" to the viewport (great for sticky headers).
28. What are Pseudo-classes? (e.g., :hover, :nth-child)
A pseudo-class defines the special state of an element. For example, a:hover applies styles only when the user's mouse is over the link. li:nth-child(even) targets every even list item.
29. What are Pseudo-elements? (e.g., ::before, ::after)
Pseudo-elements allow you to style a specific part of an element, or inject content. ::before and ::after are commonly used to insert decorative icons or shapes dynamically via the CSS content property without adding extra HTML tags.
30. What is a CSS Sprite?
A technique where multiple small images (like icons) are combined into one single large image file. CSS background-position is then used to display only the needed part. It drastically reduces HTTP network requests, improving load times.
Struggling with CSS Selectors? 🧠
The TechQuiz app uses spaced repetition to help you memorize complex CSS syntax and UI rules effortlessly.
📐 Part 4: CSS Layouts (Flexbox & Grid)
31. Flexbox vs CSS Grid?
Flexbox is designed for 1-dimensional layouts (either a row OR a column). It excels at aligning items and distributing space. CSS Grid is designed for 2-dimensional layouts, handling both rows AND columns simultaneously.
32. How do you perfectly center a div?
The modern way using Flexbox: On the parent container, apply display: flex; justify-content: center; align-items: center;. The child div will be perfectly centered horizontally and vertically.
33. Explain `justify-content` vs `align-items`.
In Flexbox, justify-content aligns items along the Main Axis (horizontally, if flex-direction is row). align-items aligns items along the Cross Axis (vertically, if flex-direction is row).
34. What does `flex: 1` do?
It is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%;. It tells a flex child to grow and consume all available empty space inside the flex container equally with other children that have flex: 1.
35. What is the `fr` unit in CSS Grid?
The fractional unit (fr) represents a fraction of the available free space in the grid container. grid-template-columns: 1fr 2fr; creates two columns, where the second column is exactly twice as wide as the first.
36. Explain `gap` (or grid-gap).
The gap property defines the empty space (gutters) between rows and columns in both CSS Grid and Flexbox layouts. It replaces the older, messier method of applying margins to child elements and dealing with edge cases.
37. How does `grid-template-areas` work?
It allows you to map out your layout visually using named grid areas in strings. Example: "header header" "sidebar main" "footer footer". You then assign elements to these areas using grid-area: header;.
38. What does `flex-wrap` do?
By default, flex items will try to squeeze onto one line. flex-wrap: wrap; allows items to wrap onto multiple lines if there is not enough space, which is critical for responsive design.
39. What is z-index and when does it work?
z-index controls the vertical stacking order of elements that overlap. An element with a higher z-index appears in front. Crucially, z-index only works on positioned elements (relative, absolute, fixed, or sticky) and flex/grid children.
40. What is a Stacking Context?
A stacking context is a three-dimensional conceptualization of HTML elements. Certain properties (like opacity < 1, transform, or z-index on positioned elements) create a new stacking context. Child elements within a stacking context are completely trapped by their parent's z-index.
Interview Coming Up? Don't Panic! ⏰
Accelerate your preparation. Thousands of real-world Frontend questions await you in the TechQuiz app.
📱 Part 5: Animations, Responsiveness & Advanced
41. What are Media Queries?
Media queries allow you to apply different CSS rules based on the device's characteristics, usually viewport width. Example: @media (max-width: 768px) { ... } is used to change layouts for mobile devices.
42. Mobile-first vs Desktop-first approach?
Mobile-first: You write the default CSS for small screens, then use min-width media queries to scale up to desktop. (Considered best practice). Desktop-first: You write CSS for desktop, and use max-width to scale down.
43. Explain relative units: em, rem, vh, vw.
em is relative to the font-size of the parent element. rem is relative to the font-size of the root (<html>) element, making it much safer for scaling. vh and vw represent 1% of the viewport's height and width.
44. What are CSS Variables (Custom Properties)?
Declared using double hyphens (--main-color: #333;), they allow you to store values and reuse them throughout the stylesheet via var(--main-color). Unlike SASS variables, they can be updated dynamically at runtime using JavaScript.
45. Transitions vs Animations?
Transitions provide a smooth change between two states (e.g., normal and :hover) and are triggered by user interaction. Animations (using @keyframes) allow complex, multi-step movements that can run automatically or loop infinitely.
46. How do you optimize CSS performance?
Minify CSS files, use CSS Sprites, avoid overly complex nested selectors (they slow down rendering), use <link rel="preload"> for critical fonts, and rely on hardware-accelerated properties like transform and opacity for animations.
47. What is the `transform` property?
It allows you to visually manipulate elements by translating (moving), scaling, rotating, or skewing them in 2D or 3D space. Crucially, transform does not affect document flow and is highly optimized by the GPU.
48. What are CSS Preprocessors?
Tools like SASS/SCSS and LESS extend CSS with programming features like nesting, mixins, and inheritance. Browsers cannot read them, so they must be compiled into standard CSS during the build process.
49. What is BEM?
Block Element Modifier (BEM) is a popular naming convention for CSS classes. It creates highly readable, specific class names (e.g., .card__title--active) to prevent CSS conflicts in large-scale applications.
50. What is Tailwind CSS / Utility-First CSS?
It is a modern framework where, instead of writing custom CSS classes, you apply dozens of predefined, single-purpose utility classes directly in your HTML (e.g., class="flex justify-center mt-4"). It heavily speeds up development.
🔥 Explore More Interview Guides
Preparing for multiple roles? Check out our other in-depth technical interview guides:
Comments
Post a Comment