Ever walked into an interview feeling like you knew your stuff, only to get stumped by a “simple” question on the box model or semantic tags? Yeah, I’ve been there. Early in my web dev career, I bombed a few rounds because I treated HTML and CSS as basics I could wing. Big mistake. These foundations are what interviewers love to probe—testing not just knowledge, but how you think about real-world application.
That’s why I put together this list of 40 questions and answers. It’s drawn from my own experiences interviewing and being interviewed, plus patterns I’ve seen in tech job hunts over the years. We’ll start with the fundamentals and build up to trickier stuff. Each question gets a clear, complete answer with practical tips or examples. Read through, practice explaining them out loud, and you’ll walk in confident. Let’s dive in.
1) What is HTML, and what problem does it solve?
HTML, or HyperText Markup Language, is the backbone of web pages—it structures content so browsers can display it properly. Think of it as the skeleton: it organizes text, images, links, and forms using tags like <p> for paragraphs or <img> for images. The big problem it solves? Turning raw text into interactive, accessible web experiences that work across devices, from phones to desktops. Without HTML, the internet would just be a mess of unformatted data.
2) What is CSS, and why is it separated from HTML?
CSS stands for Cascading Style Sheets, and it’s all about making HTML look good—handling colors, layouts, fonts, spacing, and even animations. We keep it separate from HTML to follow the “separation of concerns” principle: HTML handles structure and meaning, while CSS focuses on presentation. This setup makes sites easier to maintain (change one stylesheet, update everywhere) and more efficient for teams—designers tweak styles without messing with content.
3) What’s new in HTML5 compared to earlier HTML versions?
HTML5 brought a ton of upgrades that made web development smoother. Key additions include semantic tags like <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> for better structure; native support for <audio> and <video> (no more plugins!); the <canvas> element for drawing graphics; new form features like input types (email, date) and validation attributes (required, pattern); plus storage options like localStorage and sessionStorage, and APIs for geolocation. It basically made sites more interactive and accessible without relying on extra tech.
4) What are semantic HTML elements, and why do they matter?
Semantic elements are tags that describe what the content means, not just how it looks—like <nav> for navigation menus, <article> for standalone posts, or <footer> for bottom-of-page info. They matter because they boost accessibility (screen readers can navigate better), improve SEO (search engines understand the structure), and make code more readable for developers. Using them properly helps everyone—from your users to future teammates.
5) Explain the difference between block-level and inline elements.
Block-level elements (like <div>, <p>, <h1>) take up the full width available and always start on a new line—think of them as stacking vertically. Inline elements (like <span>, <a>, <strong>) only take up as much width as their content and flow within a line, like words in a sentence. Knowing this distinction is crucial for layout: use block-level for structure, inline for styling pieces of text or small content chunks.
6) What are HTML attributes? Give examples.
Attributes are extra information added to HTML tags that modify their behavior. They’re written inside the opening tag. For example: <a href=”https://example.com”>Link</a> uses the href attribute to define the URL; <img src=”photo.jpg” alt=”Profile picture”> uses src to specify the image file and alt to provide alternative text for accessibility. Attributes let you fine-tune how elements work and interact.
7) Explain the difference between relative, absolute, and fixed positioning in CSS.
Relative positioning moves an element relative to its normal position using top, left, right, or bottom. Absolute positioning removes an element from the normal flow and positions it relative to its nearest positioned ancestor (not the viewport, unless none exists). Fixed positioning locks an element to the viewport, so it stays put while scrolling—like sticky navigation bars. Each mode serves different layout needs.
8) What’s the difference between inline, internal, and external CSS?
Inline CSS applies styles directly to an element via the style attribute (e.g., <p style=”color:red”>). Internal CSS goes inside a <style> block in the <head> of the HTML file. External CSS is stored in a separate .css file linked via <link>. Inline is quick but messy, internal is good for single-page tweaks, and external is best for consistency and maintainability across multiple pages.
9) What are pseudo-classes in CSS? Give examples.
Pseudo-classes define special states of elements. For example: :hover applies styles when you mouse over a link; :focus applies when an input field is active; :nth-child(2) targets the second child in a list. They let you style dynamic interactions and patterns without adding extra classes or JavaScript.
10) Explain the CSS box model.
The box model is how browsers calculate the space an element takes. Every element is a box with four layers: content (text, images), padding (space around content), border (edge), and margin (space outside). For example, if a div has 200px width, 10px padding, 5px border, and 20px margin, the total space it occupies horizontally is 200 + 10+10 + 5+5 + 20+20 = 270px. Mastering this is essential for layout debugging.
11) What’s the difference between id and class in HTML?
An id is a unique identifier for a single element (e.g., <div id=”header”>), while a class can be shared by multiple elements (e.g., <p class=”highlight”>). In CSS, you target ids with #idName and classes with .className. Use ids for unique elements and classes for groups of elements that share styles.
12) What are media queries in CSS?
Media queries allow you to apply styles conditionally based on device properties like screen size, resolution, or orientation. For example: @media (max-width: 600px) { body { font-size: 14px; } } makes text smaller on small screens. They’re the backbone of responsive design, letting websites adapt to phones, tablets, and desktops.
13) Difference between relative units (em, rem, %) and absolute units (px)?
px is absolute—it stays the same regardless of context. em is relative to the font-size of the parent element, while rem is relative to the root html font-size. % is relative to the parent element’s property (like width: 50% means half the parent’s width). Using relative units improves accessibility and responsiveness, while px gives precise control.
14) What’s the difference between inline, block, and inline-block elements in CSS?
Inline elements don’t start a new line and only take up as much space as needed. Block elements start on a new line and take the full width. Inline-block combines the two: it behaves like inline (sits in a line) but respects width/height properties like a block. Great for layouts like navigation menus.
15) What’s the difference between absolute and relative URLs in HTML?
An absolute URL includes the full path (https://example.com/images/photo.jpg), while a relative URL is based on the current page’s location (images/photo.jpg). Relative URLs make code portable across environments, while absolute URLs are fixed references.
16) Explain z-index in CSS.
z-index controls the stacking order of elements along the z-axis (front-to-back). Higher values appear in front of lower ones. For z-index to work, the element must have a positioning property (relative, absolute, or fixed). For example, z-index: 10 puts an element on top of z-index: 5.
17) What’s the difference between inline styles and external CSS for performance?
Inline styles increase page size and reduce caching benefits, since styles repeat in every element. External CSS is cached by browsers, improving performance and consistency. Best practice: keep styles in external files unless there’s a very specific, small override needed.
18) What are the differences between relative, absolute, fixed, and sticky positioning?
Relative: shifts relative to its normal spot. Absolute: positioned relative to its nearest positioned ancestor. Fixed: locked to viewport (doesn’t move on scroll). Sticky: behaves like relative until a scroll threshold is met, then sticks in place like fixed. Sticky is often used for headers.
19) Explain difference between display: none and visibility: hidden.
display: none removes the element from the document flow entirely, so it doesn’t take up space. visibility: hidden keeps the element in flow but makes it invisible—it still occupies space. Use display: none for toggling layouts, and visibility: hidden when you want placeholders.
20) What are CSS transitions and animations?
Transitions allow property changes to happen smoothly over time when triggered by an event (like hover). Animations define keyframes that change properties in steps or loops, independent of events. Example: transition: all 0.3s ease for smooth hover effects; @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } for continuous rotation.
21) Difference between relative and absolute file paths in HTML?
Relative paths are based on the current file’s location (images/logo.png). Absolute paths specify the full location from the root (e.g., /assets/images/logo.png). Relative paths are more portable between environments, while absolute paths are less error-prone in complex structures.
22) What is the difference between span and div?
<div> is a block-level container used for grouping larger sections of content, while <span> is an inline container for styling or scripting small text portions. Example: use div for layout blocks, span for coloring a word inside a sentence.
23) Difference between relative, absolute, fixed, and static positioning?
Static: default, element stays in document flow. Relative: offset from its normal position. Absolute: positioned relative to ancestor. Fixed: positioned relative to viewport. Static ignores positioning properties like top/left.
24) What are CSS Grid and Flexbox, and how do they differ?
Flexbox is one-dimensional (row OR column) layout, good for aligning items in a single direction. Grid is two-dimensional (rows AND columns), perfect for complex page layouts. Example: use Flexbox for navbars, Grid for full-page templates.
25) Difference between inline CSS and external CSS in terms of specificity?
Inline CSS has highest specificity, overriding external styles. External CSS has lower specificity but is easier to maintain. If multiple rules apply, inline wins, unless !important is used.
26) What is a favicon?
A favicon is the small icon shown in browser tabs, bookmarks, and history. It’s linked in HTML with <link rel=”icon” href=”favicon.ico” type=”image/x-icon”>. Favicons improve branding and user recognition.
27) Difference between relative length units (em, rem) and viewport units (vh, vw)?
em/rem are based on font-size (em = parent, rem = root). vh/vw are based on viewport dimensions (1vh = 1% of viewport height, 1vw = 1% of width). Use rem for scalable text, vh/vw for responsive layouts.
28) What are CSS variables?
CSS variables (custom properties) let you store reusable values, defined with –name: value and accessed with var(–name). Example: :root { –main-color: blue; } h1 { color: var(–main-color); }. They reduce repetition and ease theme updates.
29) Difference between relative, absolute, and fixed units in CSS?
Relative units (%, em, rem) adjust based on context. Absolute units (px, pt) stay the same regardless of screen size. Fixed viewport units (vh, vw) are based on viewport dimensions. Relative units improve responsiveness.
30) Explain difference between inline elements and block elements with examples.
Inline: <span>, <a>, <em>, flow with text. Block: <div>, <p>, <h1>, start new lines and occupy full width. Inline can’t have width/height set (by default), block can.
31) What are CSS combinators?
Combinators define relationships between selectors: descendant (div p), child (div > p), adjacent sibling (h1 + p), general sibling (h1 ~ p). They target elements based on hierarchy or proximity.
32) What’s the difference between min-width, max-width, and width in CSS?
width sets a fixed size. min-width sets a lower limit, max-width sets an upper limit. For responsive design, min/max-width let elements adapt within bounds.
33) What are CSS sprites?
CSS sprites combine multiple images into one file and display portions via background-position. This reduces HTTP requests, improving performance. Common for icons.
34) Explain difference between absolute, fixed, relative, and sticky with examples.
Absolute: relative to ancestor. Fixed: relative to viewport, stays on scroll. Relative: offset from normal. Sticky: hybrid of relative and fixed (sticks after scrolling threshold). Example: sticky navbars.
35) What’s the difference between localStorage, sessionStorage, and cookies?
localStorage stores data with no expiration, sessionStorage stores until tab is closed, cookies store small data with optional expiration and sent to server on each request. local/sessionStorage are larger and not sent with requests.
36) What are ARIA roles in HTML?
ARIA (Accessible Rich Internet Applications) roles help screen readers by defining element purpose. Example: <div role=”button”> makes a div act like a button for accessibility. They improve usability for assistive tech.
37) Difference between inline event handling (onclick) and addEventListener in JS/HTML?
Inline (onclick=”…”) mixes JS with HTML, not reusable. addEventListener keeps code separate, allows multiple listeners, and supports event bubbling/capture. Best practice: use addEventListener.
38) What is responsive web design?
Responsive design ensures websites adapt to different devices/sizes using fluid grids, flexible images, and media queries. It improves usability on phones, tablets, and desktops. Example: Bootstrap implements responsive design by default.
39) Difference between inline SVG and using an <img> tag?
Inline SVG embeds code directly in HTML, allowing CSS/JS styling and interactivity. <img> loads an external file, faster but less customizable. Use inline for interactive graphics, img for static ones.
40) What’s the difference between progressive enhancement and graceful degradation?
Progressive enhancement builds a basic, functional experience first, then adds advanced features for capable browsers. Graceful degradation builds for modern browsers, then ensures fallback for older ones. Both aim for accessibility across devices.