HTML & CSS Interview Questions

Q1. What is semantic HTML and why use it?

Answer: Semantic elements (<header>, <nav>, <main>, <article>) describe meaning, improving accessibility, SEO, and maintainability over generic <div> soup.

Q2. Difference between block and inline elements?

Answer: Block elements start on a new line and take full width (div, p, h1). Inline elements flow within text (span, a, strong).

Q3. What is the CSS box model?

Answer: Content + padding + border + margin. box-sizing: border-box includes padding and border in the element's width.

Q4. Flexbox vs CSS Grid?

Answer: Flexbox is one-dimensional (row OR column). Grid is two-dimensional (rows AND columns). Use flex for nav bars; grid for page layouts.

Q5. What is specificity in CSS?

Answer: Rules that determine which style wins: inline > ID > class > element. !important overrides normal cascade.

Q6. What does the alt attribute do?

Answer: Provides alternative text for images — required for screen readers and shown when image fails to load.

Q7. What is mobile-first responsive design?

Answer: Base styles target mobile; media queries add rules for larger screens with min-width breakpoints.

Q8. Difference between margin and padding?

Answer: Padding is inside the border; margin is outside the border between elements.

Q9. What are CSS custom properties?

Answer: Variables defined with --name in :root, used with var(--name) for theming and reusable design tokens.

Q10. What is position: sticky?

Answer: Element is relative until scroll threshold, then fixed within its parent container.