These are the HTML & CSS questions you'll encounter in technical interviews, each with a detailed written answer. Master semantics and layouts, then work through responsive design and advanced CSS features.
HTML and CSS are the foundation of web development. HTML provides structure and semantics, while CSS handles styling and layout. Together, they enable developers to create accessible, responsive, and visually appealing web experiences.
HTML & CSS interviews test your understanding of semantic markup, accessibility, responsive design, and modern CSS features like Flexbox and Grid. You'll discuss browser compatibility and best practices for maintainable stylesheets.
Strong HTML & CSS fundamentals are essential for frontend development. Master these technologies and you'll build the foundation for advanced frontend skills.
Reading answers is not the same as giving them. Sit a full mock interview and get scored on how you actually explain them.
Try a mock interviewAnswer
Tags are the syntax. Elements include the full structure. Semantic elements communicate meaning to browsers and assistive technologies, improving SEO and accessibility.
Answer
DOCTYPE enables standards mode. lang attribute helps screen readers and translation tools. Viewport meta tag controls mobile rendering. Skip links allow keyboard users to bypass navigation. Proper structure benefits both SEO and accessibility.
Answer
Fieldset and legend group and label field groups. aria-describedby connects error messages to inputs. aria-live announces validation changes. Labels with for attributes make fields clickable.
Answer
GET: data in URL, cached by browsers, limited size, used for retrieval. POST: data in body, not cached, larger capacity, used for submission and state changes.
Answer
Multipart encoding is required for file uploads. Without it, binary file data is corrupted. It tells the browser to encode form data differently to support binary content.
Answer
Data attributes store metadata. Accessed via element.dataset.postId. The browser converts hyphenated names to camelCase. Keeps HTML clean without extra classes.
Answer
Progressive enhancement layers functionality: native elements work without JavaScript, JavaScript can enhance with animations and better accessibility. Ensures core functionality works even if CSS or JavaScript fails.
Answer
Regular script: blocks parsing while downloading and executing. defer: downloads in parallel, executes after DOM complete. async: downloads in parallel, executes immediately when ready.
Answer
Autocomplete enables password managers. Input type tel shows numeric keyboard on mobile. Input type email provides email-specific keyboard and built-in validation. These improve both usability and accessibility.
Answer
Native select provides dropdown functionality with built-in keyboard navigation and accessibility. Custom implementations require implementing keyboard support, focus management, and screen reader announcements.
Answer
Semantic HTML uses elements that clearly describe their meaning: header, nav, main, article, section, footer. These communicate structure to search engines and assistive technologies. Search engines understand page hierarchy better, improving SEO rankings. Screen readers can navigate content more effectively. Users can jump directly to main content using keyboard shortcuts. Proper heading hierarchy helps both SEO and accessibility. Semantic markup is a foundational best practice.
Answer
DOCTYPE enables HTML5 standards mode. html lang attribute helps screen readers and translation tools. meta charset specifies character encoding. meta name viewport controls mobile rendering. title appears in browser tabs and search results. Skip links allow keyboard users to bypass navigation. header, nav, main, and footer provide semantic structure. aria-label provides context for navigation. This structure benefits both users and search engines.
Answer
Each input must have an associated label using the for attribute. This makes the field clickable on mobile and helps screen readers. Fieldset and legend group related fields. aria-describedby connects error messages to input fields. aria-live polite announces validation errors without interrupting. The novalidate attribute allows custom JavaScript validation while maintaining semantic attributes for accessibility.
Answer
GET appends data to the URL with limited size. Browsers cache GET requests. Used for retrieving data where bookmarking is useful. POST sends data in the request body with larger capacity. Not cached by browsers. Used for submission that changes server state. For file uploads, POST with multipart encoding is required. This encoding tells the browser to support binary files.
Answer
Data attributes store metadata on elements. JavaScript accesses via element.dataset.postId, element.dataset.category. The browser automatically converts hyphenated names to camelCase. Data attributes keep HTML clean without exposing metadata as visible content or styling classes. They are perfect for passing information from HTML to JavaScript without polluting the DOM. They are semantic and standards-compliant.
Answer
Start with functional HTML that works without CSS or JavaScript. Native elements provide show or hide without any scripting. Then add CSS for presentation. Finally, add JavaScript for enhanced interactivity. This layering ensures core functionality works even if JavaScript fails. Progressive enhancement is important for resilience and performance.
Answer
Regular script blocks HTML parsing while downloading and executing. Use for critical scripts that must run before rendering. Script with defer downloads in parallel with HTML parsing, executes after DOM is complete in order. Perfect for scripts that manipulate DOM elements. Script with async downloads in parallel, executes immediately when ready. Use for independent scripts like analytics that do not depend on DOM content or other scripts.
Answer
Autocomplete email lets password managers fill forms correctly. Input type tel shows numeric keyboard on mobile. Input type email provides email-specific keyboard and built-in validation. Type number ensures only numbers are entered. These features work together to provide consistent keyboard layouts, built-in validation, and accessibility support. Screen readers announce validation requirements. Mobile users get appropriate keyboards without custom JavaScript.
Answer
Native select provides dropdown functionality with built-in keyboard navigation and accessibility. Custom dropdowns require implementing keyboard support, focus management, screen reader announcements, and ARIA attributes. Native button is keyboard-navigable and screen-reader-friendly by default. Native input type checkbox has consistent behavior across browsers and devices. Native elements are battle-tested across browsers and assistive technologies.
Answer
ARIA attributes enhance HTML when native elements do not fully describe functionality. aria-label provides a label when visible text is insufficient. aria-describedby connects additional descriptions. aria-live polite announces dynamic content updates. aria-expanded indicates collapsed or expanded state. aria-hidden true hides decorative elements from screen readers. However, ARIA is supplementary. Semantic HTML is always preferred. No ARIA attribute replaces proper label, button, or heading hierarchy.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Answer
I used semantic sections with fieldset and legend for each form area. I associated each label with its input using the for attribute. Error messages used aria-describedby connected to input fields. I used autocomplete attributes for common fields. The novalidate attribute allowed custom JavaScript validation. I wrapped the form in a role main section. Skip links at the top let keyboard users jump to the checkout form directly.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Answer
The original site used div with class header and div with class content. I refactored to header, nav, main, article, section, footer. I properly structured heading hierarchy with one h1 per page, then h2, h3 in order. Search engines now understood the page structure better, improving rankings. Screen readers could navigate more effectively.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Answer
The fallback was just a button and div. I wrapped it in details and summary elements. This works without JavaScript. Then I used JavaScript to enhance: smooth animations, keyboard navigation with arrow keys, better ARIA states. Data-enhanced attribute prevented double-initialization. Users without JavaScript still got a working menu.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Answer
Screen readers were not announcing form field purpose. I debugged with a screen reader: fields had no labels. I added explicit labels with the for attribute. I added aria-describedby for hints. I used fieldset and legend to group related fields. Testing confirmed screen readers now navigated properly.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Answer
I kept native HTML validation: required, type email, pattern validation. Without JavaScript, these prevented obvious errors. With JavaScript, I added custom validation for complex rules. The JavaScript checked validity using element.validity, added error messages with aria-describedby, and announced changes with aria-live polite.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Answer
I added data attributes to store field metadata. JavaScript accessed these via element.dataset. This decoupled HTML data from JavaScript logic. Adding new field types required only adding HTML, not modifying JavaScript. State management was cleaner and more maintainable.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Answer
The modal used a div with onclick handlers. I refactored to proper structure with role dialog and aria-modal true. I added aria-labelledby pointing to the title. Focus trap kept focus inside during interaction. Escape key closed it. aria-label on close button clarified its purpose.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Answer
The old markup used table for layout, inline styles, and no semantic structure. I extracted meaning: proper heading hierarchy, semantic sections, removed layout tables, converted to CSS Grid. Added skip links and ARIA landmarks. The site became faster, more maintainable, and accessible.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Answer
Mobile view used a hamburger menu. Desktop showed all items. I structured the HTML with semantic nav regardless of display. CSS media queries changed display. JavaScript managed mobile menu state without changing HTML structure.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Answer
I added error messages in a div with role alert and aria-live polite. The input had aria-describedby pointing to the error div. When validation failed, JavaScript updated the error div content. aria-live polite announced the change to screen readers without interrupting. role alert signaled importance.
Write your HTML code hereAnswer
DOCTYPE
htmllang=en
head: meta charset, meta viewport, title
body: header with nav, main with id main, aside, footerWrite your HTML code hereAnswer
form with fieldset, legend, div with label for email, input type email id email name email required aria-describedby, div id email-hint, button type submitWrite your HTML code hereAnswer
form action upload method post enctype multipart, label for file, input type file id file name file accept jpg png pdf multiple required, button type submitWrite your HTML code hereAnswer
nav with button id menu-toggle aria-expanded false aria-controls menu, ul id menu hidden with li and a elementsWrite your HTML code hereAnswer
table with caption, thead with tr th scope col Month and Sales, tbody with tr td Jan and 1000Write your HTML code hereAnswer
details with summary Show Hide, p content visible by defaultWrite your HTML code hereAnswer
form novalidate, input type email required aria-describedby, div id email-error aria-live polite, input pattern numbers required, button type submitWrite your HTML code hereAnswer
div role dialog aria-modal true aria-labelledby dialog-title, h2 id dialog-title Dialog, form, button type button aria-label CloseWrite your HTML code hereAnswer
article with h1 Post Title, p Intro, section with h2 Section 1, h3 Subsection, p ContentWrite your HTML code hereAnswer
form with input type email id email data-field email data-required true data-validation custom, button data-action submit