HTML and CSS Interview Questions

What should you focus on for your HTML and CSS interview?

Which questions should you start with?

Start with the most asked questions in these interviews. The journey from entering a URL to seeing a page led the list, appearing in 12 of 157 interviews. The DOM and how JavaScript interacts with it came up in 9 of 157 interviews.

Check whether you can explain both processes, not just name the parts:

• Can you walk through what happens after you enter a URL?
• Can you explain what the DOM is and how JavaScript interacts with it?
• Can you explain how the virtual DOM differs from the real DOM?

Include the HTTP request and server response. Reviewed answers to the URL question missed an explicit description of the browser sending the request and receiving the response. Make both steps clear in your answer.

How should you explain your layout choices?

Flexbox versus Grid appeared in 8 of 157 interviews. Reviewed answers missed how specific layout needs determine which tool to use. Go beyond describing each tool: connect your choice to the layout you need.

• Does the layout need alignment across both rows and columns?
• How should the content reflow at breakpoints?
• How do those needs affect your choice of Flexbox or Grid?
• Can you describe a desktop-to-mobile layout without duplicating markup?

Which HTML and CSS details should you check?

Semantic HTML and CSS visibility were also among the most asked questions. The wider topic list includes accessibility, performance, and browser testing. Use these questions to check what you can explain:

• Can you choose suitable semantic elements instead of generic div elements?
• How do display: none, visibility: hidden, and display: block differ?
• What do LCP, INP, and CLS measure?
• How would you handle keyboard navigation and focus?
• How would you debug a layout across browsers?

Should you write code too?

Code-writing tasks appeared in 6 of 157 interviews. Try tasks drawn from these interviews: write CSS to change paragraph font size, or build a theming system for multiple brands with light and dark modes.

For JavaScript, check whether you can write code to scroll down a page. Also try finding containers and child elements whose content extends beyond the container.

Who gets asked HTML and CSS

The 20 most asked HTML and CSS questions

Counted by interview, not by mention: a question asked twice in one conversation counts once.

1. What happens from entering a URL until the browser displays the page?

   Asked in 12 of 157 interviews · last asked Oct 12 · Concept · Senior

   Show answer

   The browser resolves the hostname through DNS, often using cached results. It opens or reuses a connection; HTTPS uses TLS, over TCP or within QUIC. It sends an HTTP request and receives the server’s response. It parses HTML and CSS, loads resources, runs JavaScript, calculates layout, paints, and combines layers to display the page.

   • Cached content can avoid a network request; existing connections can avoid a new connection setup.
   • HTTP/1.1 and HTTP/2 use TCP; HTTP/3 uses QUIC over UDP.
   • HTML builds the DOM; CSS builds the CSSOM. Together, they guide rendering.
   • Scripts can block HTML parsing, and later resource loads or page changes can trigger more rendering.

   What the interviewer checks: The interviewer checks whether you can connect networking, HTTP communication, and browser rendering in the correct order.

   Common mistake (in 3 of 5 reviewed answers): Many answers forget that the browser sends an HTTP request and receives the server’s response before processing the page.

   Other ways it was asked

   • “What happens internally when a user clicks a URL in a browser?”
   • “When you enter google.com in a web browser and press Enter, what happens next on your PC?”
   • “When a user enters a URL in a browser and presses Enter, can you explain the complete end-to-end journey of the request and response, from the user's device until the webpage is displayed, including the technologies and terminology involved?”

2. What is the DOM, and how does JavaScript interact with it?

   Asked in 9 of 157 interviews · last asked Sep 7 · Concept · Junior

   Show answer

   The DOM (Document Object Model) is a tree of objects that represents a web document. JavaScript uses DOM methods and properties to find elements and change their content, attributes, or styles. It can also add or remove elements and listen for events, such as clicks.

   • DOM nodes represent parts of a document, including elements and text.
   • The DOM is a browser API, not part of the JavaScript language itself.
   • Changing the DOM can update the page without reloading it.
   • Event listeners let JavaScript respond to user actions.

   JavaScriptCopy

   const button = document.createElement('button');
   button.textContent = 'Click me';
   button.addEventListener('click', () => {
     button.textContent = 'Clicked!';
   });
   document.body.appendChild(button);

   What the interviewer checks: The interviewer is checking whether you understand how JavaScript reads, changes, and handles events on a web page.

   Other ways it was asked

   • “What is the DOM?”
   • “What is the DOM (Document Object Model)?”
   • “What is the DOM, and what is it used for in JavaScript?”

3. How do Flexbox and Grid differ, and when would you choose each for a layout?

   Asked in 8 of 157 interviews · last asked Oct 7 · Concept · Junior

   Show answer

   Flexbox lays out items in one direction at a time: a row or a column. Grid controls rows and columns together. I would use Flexbox for a navigation bar and Grid for a card layout that needs alignment across both rows and columns.

   • Flexbox can wrap, but each line distributes space separately.
   • Grid keeps items aligned across shared rows and columns.
   • At breakpoints, Flexbox can change direction; Grid can change columns or rearrange areas.
   • You can use Grid for the page layout and Flexbox inside its sections.

   What the interviewer checks: The interviewer is checking whether you can choose a layout tool based on alignment and responsive layout needs.

   Common mistake (in 3 of 6 reviewed answers): Many answers forget that alignment across both rows and columns and layout changes at breakpoints should guide the choice.

   Other ways it was asked

   • “What is the difference between Flexbox and CSS Grid?”
   • “What is the difference between Flexbox and Grid?”
   • “What is the difference between CSS Flexbox and CSS Grid?”

4. What is semantic HTML, and how do you choose appropriate elements instead of generic divs?

   Asked in 7 of 157 interviews · last asked Sep 22 · Concept · Junior

   Show answer

   Semantic HTML uses elements that describe the meaning of content, not just its appearance. I choose elements by their purpose: nav for major navigation, main for the main content, and button for an action. I use div when no meaningful element fits. This gives browsers and assistive tools useful information about the page.

   • Choose elements by meaning, not by their default appearance; use CSS for styling.
   • Use links for navigation and buttons for actions.
   • Use article for self-contained content and section for a distinct topic, usually with a heading.
   • Semantic elements support accessibility, but do not make a page accessible on their own.

   What the interviewer checks: The interviewer checks whether you can match content and behavior to suitable HTML elements and explain their accessibility value.

   Other ways it was asked

   • “What are semantic HTML elements, and why are they useful?”
   • “What is semantic HTML, and why is it important?”
   • “What are semantic HTML elements, and why do we even need them if we can build the UI without them?”

5. How do display: none, visibility: hidden, and display: block differ?

   Asked in 4 of 157 interviews · last asked Jun 18 · Concept · Junior

   Show answer

   `display: none` hides an element and removes its space from the layout. `visibility: hidden` hides it but keeps its space. `display: block` makes it a block-level element, which starts on a new line in normal flow. It does not make the element visible if `visibility: hidden` still applies.

   • `display: none` removes layout boxes for the element and its descendants.
   • `visibility: hidden` keeps the element’s size and position in the layout.
   • `display: block` controls layout; `visibility` controls whether the element is shown.

   What the interviewer checks: The interviewer checks whether you understand the difference between hiding content and removing its layout space.

   Other ways it was asked

   • “What is the difference between CSS `display: none` and `visibility: hidden`?”
   • “What is the difference between display: none and visibility: hidden?”
   • “What is the difference between `display: block` and `visibility: hidden` in CSS?”

6. How would you build a responsive interface that adapts from desktop to mobile without duplicating markup?

   Asked in 4 of 157 interviews · last asked Oct 8 · Scenario · Mid-level

   Show answer

   I would use one semantic HTML structure, with mobile-first CSS and Grid or Flexbox. I would use flexible widths and choose breakpoints based on where the content stops fitting well, not specific devices. On wider screens, media queries would adjust columns, spacing, and sizes to match the desktop design.

   • Include the viewport meta tag so mobile browsers use the device width.
   • Make images flexible and avoid fixed widths that cause horizontal scrolling.
   • Keep reading and keyboard navigation order logical across layouts.
   • Test between breakpoints, on real devices, and with zoom; keep touch controls large enough.

   What the interviewer checks: The interviewer is checking whether you can adapt one page structure across screen sizes without harming usability or accessibility.

   Other ways it was asked

   • “What CSS layout approach and breakpoint strategy would you use to match a desktop design closely and reflow it cleanly on mobile without duplicating markup?”
   • “Can you provide an example of a responsive front end component you built with React JS, and what considerations did you make for different screen sizes and devices?”
   • “How do you make a user interface work well across mobile and desktop screen sizes?”

7. What is the virtual DOM, how does it work, and how does it differ from the real DOM?

   Asked in 4 of 157 interviews · last asked May 29 · Concept · Junior

   Show answer

   The virtual DOM is a lightweight description of a user interface, kept in memory by libraries such as React. When state changes, the library compares the new description with the previous one and updates the real DOM where needed. The real DOM is the browser’s live tree of page elements, which it uses to render the page.

   • Comparing old and new descriptions is part of a process called reconciliation.
   • The virtual DOM does not appear on screen; the browser renders using the real DOM.
   • It helps manage UI updates, but is not always faster than updating the DOM directly.

   What the interviewer checks: The interviewer checks whether you understand how UI changes reach the browser and why a virtual DOM is used.

   Other ways it was asked

   • “What is the virtual DOM, and how is it used in frontend development?”
   • “What is the virtual DOM, and how does it work?”
   • “What is the difference between the virtual DOM and the real DOM?”

8. What are Core Web Vitals, and what do LCP, INP, and CLS measure?

   Asked in 4 of 157 interviews · last asked Oct 8 · Concept · Junior

   Show answer

   Core Web Vitals are three metrics for loading performance, responsiveness, and visual stability. LCP (Largest Contentful Paint) measures when the largest visible image or text block appears. INP (Interaction to Next Paint) measures the delay from user interaction to the next screen update. CLS (Cumulative Layout Shift) measures unexpected layout movement.

   • Good LCP is 2.5 seconds or less.
   • Good INP is 200 milliseconds or less.
   • Good CLS is 0.1 or less; it is a score, not a time.
   • These targets are assessed at the 75th percentile of real user page visits.

   What the interviewer checks: The interviewer is checking whether you can connect each metric to the user experience it measures.

   Other ways it was asked

   • “Could you tell me what Core Web Vitals are?”
   • “What is your understanding of Core Web Vitals, and why are they important?”
   • “How many Core Web Vitals are there?”

9. What is HTML?

   Asked in 3 of 157 interviews · last asked Oct 19 · Concept · Junior

   Show answer

   HTML stands for HyperText Markup Language. It is the standard markup language used to structure content on web pages. It uses elements to describe content such as headings, paragraphs, links, and images.

   • HTML is a markup language, not a programming language.
   • Elements give content structure and meaning.
   • CSS controls presentation, while JavaScript adds behavior.

   What the interviewer checks: The interviewer is checking whether you understand HTML’s role and how it differs from CSS and JavaScript.

10. What is the DOCTYPE declaration?

    Asked in 3 of 157 interviews · last asked Aug 27 · Concept · Junior

    Show answer

    The DOCTYPE declaration tells the browser how to render an HTML document. In modern HTML, `<!DOCTYPE html>` selects standards mode, so the browser follows modern HTML and CSS rules. Without it, the browser may use quirks mode, which applies older layout rules.

    • Place `<!DOCTYPE html>` at the start of the document, before the `<html>` element.
    • It is a declaration, not an HTML element.
    • Standards mode helps avoid unexpected layout differences caused by quirks mode.

    What the interviewer checks: The interviewer checks whether you understand how DOCTYPE affects browser rendering.

    Other ways it was asked

    • “Why do we use a DOCTYPE declaration?”
    • “What does the doctype declaration do in an HTML document?”
    • “What does a DOCTYPE declaration tell the browser?”

11. What is the CSS box model?

    Asked in 3 of 157 interviews · last asked Oct 1 · Concept · Junior

    Show answer

    The CSS box model describes an element as a box with four parts: content, padding, border, and margin. Content holds text or images. Padding is the space between the content and border. Margin is the space outside the border.

    • With the default box-sizing: content-box, width and height apply only to the content.
    • With box-sizing: border-box, width and height include content, padding, and border.
    • Margin is outside the box and is not included in either sizing mode.

    What the interviewer checks: The interviewer is checking whether you understand element spacing and how CSS calculates box sizes.

    Other ways it was asked

    • “What is the CSS box model, and how does CSS Grid work?”

12. How would you implement light, dark, and brand themes using shared design tokens without duplicating component styles?

    Asked in 3 of 157 interviews · last asked Sep 7 · Scenario · Mid-level

    Show answer

    I would use CSS custom properties for shared design tokens, with names such as `--surface` and `--text`. Light, dark, and brand themes override these values, while component styles stay unchanged. I would switch a `data-theme` attribute on the root element, use the system preference by default, and save the user's choice.

    • Components use tokens named by purpose, not fixed colors or theme-specific styles.
    • Keep palette values separate from semantic tokens so brand changes stay easy to manage.
    • Use prefers-color-scheme for the default; an explicit user choice takes priority.
    • Check text contrast, links, and focus indicators in every theme.

    CodeCopy

    :root, [data-theme="light"] { --surface: #fff; --text: #222; --accent: #0645ad; }
    [data-theme="dark"] { --surface: #181818; --text: #eee; --accent: #8ab4f8; }
    [data-theme="brand"] { --surface: #f3e8ff; --text: #30104a; --accent: #7020a0; }
    .card { background: var(--surface); color: var(--text); }
    .card a { color: var(--accent); }

    What the interviewer checks: The interviewer is checking whether you can separate theme values from reusable component styles while supporting user preferences.

    Other ways it was asked

    • “How would you implement light and dark themes on a website?”
    • “Where would you store the colors for light and dark themes, and how would you use them for elements such as text?”
    • “How do you manage theming in a design system, for example light, dark, and brand themes, so tokens scale cleanly without duplicating component styles?”

13. How would you build an accessible custom button, including semantic elements, keyboard interaction, and focus behavior?

    Asked in 3 of 157 interviews · last asked Jul 28 · Concept · Mid-level

    Show answer

    I use a native <button type="button"> and style it, rather than rebuilding button behavior. It supports Tab focus and activation with Enter and Space. I provide a clear accessible name and a visible focus indicator. Focus normally stays on the button; opening a dialog moves focus inside, and closing it returns focus to the trigger.

    • An icon-only button needs an accessible name, such as an aria-label.
    • A non-native button needs role="button", tabindex="0", and Enter/Space handlers; prevent Space from scrolling.
    • Native disabled buttons block activation and are removed from the Tab order.
    • aria-disabled="true" alone does not block activation or change focusability; code must prevent activation.

    What the interviewer checks: The interviewer checks whether you understand native semantics, keyboard access, focus management, and disabled behavior.

    Other ways it was asked

    • “When you build an accessible custom button component, what are your non-negotiables for semantics and keyboard and focus behavior, including disabled states?”
    • “For a custom button component, what semantic element would you choose by default, and what keyboard and focus behaviors must it support to meet accessibility expectations?”
    • “If you style an element to look like a button, what specific attributes, roles, and keyboard behaviors do you ensure to keep it accessible?”

14. How do you incorporate web accessibility and WCAG compliance into a project?

    Asked in 3 of 157 interviews · last asked Oct 7 · Scenario · Mid-level

    Show answer

    I build accessibility into design, coding, and testing so people with disabilities can use the site. I agree on a WCAG target, usually WCAG 2.2 Level AA. I use semantic HTML and test keyboard access, screen readers, and contrast. I combine automated checks with manual testing and fix issues before release.

    • Level AA requires meeting all applicable Level A and AA success criteria.
    • Use native HTML controls, clear labels, text alternatives, and visible keyboard focus.
    • Automated tools cannot prove compliance; manual testing and feedback from users with disabilities help find missed barriers.
    • Document issues and repeat accessibility tests when features change.

    What the interviewer checks: The interviewer checks whether you understand accessibility and make it part of the whole project, not a final check.

    Other ways it was asked

    • “What is web accessibility, and how would you incorporate it into a software project?”
    • “How do you manage WCAG accessibility compliance?”
    • “Can you explain web accessibility?”

15. What is the difference between local storage and session storage in web browsers?

    Asked in 3 of 157 interviews · last asked Oct 22 · Concept · Junior

    Show answer

    localStorage keeps data across browser sessions, while sessionStorage keeps data for one tab’s session. Both survive page reloads. localStorage has no automatic expiry, but users or the browser can clear it. sessionStorage is normally cleared when its tab closes, though restoring a browser session may restore it.

    • Both store string keys and values and are accessed through JavaScript.
    • localStorage is shared across tabs with the same origin; sessionStorage is separated by origin and tab.
    • Use localStorage for saved preferences and sessionStorage for temporary tab-specific data.
    • Unlike cookies, neither is automatically sent with HTTP requests.

    What the interviewer checks: The interviewer is checking whether you understand storage lifetime, tab sharing, and when to use each option.

    Other ways it was asked

    • “What is the difference between cookies, local storage, and session storage in the browser?”
    • “What are session storage and local storage, how do they differ, and when is their data cleared?”

16. How do SSR, SSG, and CSR differ, and when would you choose each?

    Asked in 3 of 157 interviews · last asked Oct 19 · Concept · Mid-level

    Show answer

    SSR builds HTML on the server when a request arrives; choose it for fresh or personalized pages. SSG builds HTML ahead of time; choose it for blogs or documentation that change less often. CSR renders content in the browser with JavaScript; choose it for apps such as private dashboards where search visibility matters less.

    • SSR and SSG deliver content in initial HTML, helping search engines and early display.
    • SSR adds server work, though caching can reduce it.
    • SSG serves prebuilt pages quickly, but content changes need a rebuild or regeneration.
    • SSR and SSG pages can also be interactive; rendering choices can differ between pages.

    What the interviewer checks: The interviewer checks whether you can choose based on content freshness, search visibility, loading speed, and server cost.

    Other ways it was asked

    • “What are client-side rendering (CSR) and server-side rendering (SSR)?”
    • “What is the difference between server-side rendering (SSR), static site generation (SSG), and client-side rendering (CSR)?”
    • “When would you choose static, server-side, or client-side rendering, and why?”

17. What optimizations would you use to improve frontend performance, and why?

    Asked in 3 of 157 interviews · last asked Oct 22 · Scenario · Mid-level

    Show answer

    I would measure performance first, then reduce downloads and browser work. I would compress images and files, split JavaScript, and remove unused code to load less data. I would lazy-load offscreen images and prioritize visible content for faster display. I would cache static files and break up long JavaScript tasks for faster repeat visits and smoother interactions.

    • Use browser performance tools and real-user data to find bottlenecks and verify improvements.
    • Use appropriately sized images and modern formats; avoid lazy-loading the main visible image.
    • Defer noncritical scripts and reserve image dimensions to prevent layout shifts.
    • Use a CDN and suitable cache headers; version static filenames so updates reach users.

    What the interviewer checks: The interviewer wants practical optimizations, clear reasons, and evidence that you measure results instead of guessing.

    Other ways it was asked

    • “How would you improve front-end performance in a web application?”
    • “How would you improve frontend performance?”
    • “If you were setting up a new front-end application, what optimizations would you put in place to make it more performant? Briefly explain each one.”

18. How would you structure a semantic card component, including headings and choosing article, section, or div?

    Asked in 2 of 157 interviews · last asked Jul 26 · Concept · Mid-level

    Show answer

    Use `article` for a self-contained card, such as a blog post preview. Use `section` for a distinct topic in the page, usually with a heading. Use `div` when you only need a layout wrapper. Give the card a heading level that fits the page hierarchy, not its visual size.

    • Choose the element by the content’s meaning, not the card’s appearance.
    • An article or section does not automatically reset heading levels.
    • Let reusable cards accept a heading level that matches their placement.
    • Use CSS to style headings without changing their semantic level.

    CodeCopy

    <section>
      <h2>Latest posts</h2>
      <article>
        <h3><a href="/posts/semantic-html">Semantic HTML</a></h3>
        <p>Learn how to choose meaningful HTML elements.</p>
      </article>
    </section>

    What the interviewer checks: The interviewer is checking whether you choose meaningful elements and keep a clear heading hierarchy when reusing cards.

    Other ways it was asked

    • “When would you wrap a blog post card in an article element versus using a section or a div?”
    • “How do you structure semantic HTML for a reusable card component, including its heading hierarchy and when to use a section versus an article?”

19. What is an iframe?

    Asked in 2 of 157 interviews · last asked Jun 18 · Concept · Junior

    Show answer

    An `<iframe>` is an HTML element that embeds another web page inside the current page. The embedded page has its own document and browsing context. Common uses include videos, maps, and external widgets.

    • The src attribute sets the page to load.
    • Use a clear title attribute to describe the frame for screen reader users.
    • The sandbox attribute can restrict what the embedded page can do.
    • The same-origin policy limits script access between the parent page and a frame from another origin.

    What the interviewer checks: The interviewer is checking whether you understand embedded pages and their separation from the parent page.

    Other ways it was asked

    • “What is the iframe tag?”

20. What is the purpose of the head section in HTML?

    Asked in 2 of 157 interviews · last asked Oct 19 · Concept · Junior

    Show answer

    The <head> section holds information about the page and links to resources, rather than the main content shown on the page. It can include the page title, metadata, styles, and scripts. Browsers and search engines use this information to process and understand the page.

    • The <title> sets the page title shown in the browser tab.
    • Metadata can define the character encoding, page description, and viewport settings.
    • The <head> can link stylesheets and include scripts; visible page content belongs in <body>.

    What the interviewer checks: The interviewer is checking whether you understand the difference between page information in <head> and page content in <body>.

Related interview questions

• Software Engineer interview questions
• QA Engineer interview questions
• AI Engineer interview questions
• UX and UI Designer interview questions
• Data Engineer interview questions
• DevOps Engineer interview questions
• React interview questions
• Angular interview questions
• Node.js interview questions
• Next.js interview questions
• Spring Boot interview questions
• Android and Kotlin interview questions
• iOS and Swift interview questions

How this list is made

Every question here was asked by a real interviewer in a real job interview that a candidate ran MeetAssist in. After the call, the interviewer's questions are pulled from the transcript. Practice sessions, tests, exams and anything that was not a job interview are dropped.

Questions are rewritten so they make sense on their own: names of people, employers and clients are removed, and speech-to-text mistakes are fixed. Small talk, logistics and questions about one candidate's own résumé are left out. Rephrasings of the same question are merged, and the count is the number of different interviews it came up in.

The interviews come from candidates who use MeetAssist, so they lean towards software, data and AI roles: the shares describe these interviews, not every HTML and CSS interview. Answers to the most asked questions are written and checked by an editor; a "common mistake" is shown only when reviews of real answers in these interviews show it, with the count.

157 interviews, 125 candidates, Oct 2025 to Oct 2026. Updated every month with new interviews.