Roadmap › 4. Frontend › Step 42
H5
HTML5 & CSS3 — Semantic Markup to Responsive Layouts
Document structure, semantic HTML, forms and accessibility, the CSS cascade and specificity, the box model, Flexbox and Grid, responsive design with media and container queries, CSS variables, Bootstrap/Tailwind and the HTML/CSS interview questions.
What it is & where it is used
HTML (HyperText Markup Language) describes the structure and meaning of a page; CSS (Cascading Style Sheets) describes how it looks; JavaScript adds behaviour. Every frontend framework (Angular, React, Vue) still renders HTML and CSS, so these basics are asked in every frontend and full stack interview.
| Topic | What interviewers check |
|---|---|
| Semantic HTML | header, nav, main, article, section, footer instead of div soup |
| Forms | Labels, input types, validation attributes |
| Accessibility (a11y) | Alt text, labels, keyboard use, ARIA only when needed |
| Cascade & specificity | Why a style does or doesn't apply |
| Box model | content-box vs border-box, margin collapsing |
| Layout | Flexbox (1-D) vs Grid (2-D), positioning |
| Responsive design | Mobile-first media queries, fluid units, container queries |
Versions & history
| Year | Milestone |
|---|---|
| 1991–1999 | HTML 1 → HTML 4.01; CSS1 (1996), CSS2 (1998) |
| 2000s | XHTML; table layouts give way to floats |
| 2011–2012 | CSS split into modules ("CSS3"): media queries, flexbox drafts, transitions |
| 2014 | HTML5 a W3C Recommendation; now the HTML Living Standard (WHATWG) |
| 2017 | CSS Grid ships in all major browsers; CSS custom properties widely supported |
| 2022–2023 | Container queries, :has(), cascade layers (@layer), native CSS nesting |
| 2024–2025 | Popover API, <dialog>, anchor positioning, view transitions, @scope reaching browsers |
Frameworks: Bootstrap 5 (2021, no jQuery), Tailwind CSS 4 (2025, CSS-first config).
Lifecycle
How the browser turns HTML + CSS into pixels (critical rendering path):
- Download HTML → parse into the DOM tree.
- Download CSS → parse into the CSSOM.
- Combine into the render tree (only visible nodes with computed styles).
- Layout (reflow) — compute size and position of every box.
- Paint — fill pixels (text, colours, borders, shadows).
- Composite — layers combined on the GPU.
CSS is render-blocking and synchronous <script> is parser-blocking — so put CSS in <head>, use defer/type="module" for scripts, and animate transform/opacity (composite only) rather than width/top (layout every frame).
Tools used to develop
- Browser DevTools — Elements (box model, computed styles, Flexbox/Grid overlays), Lighthouse (performance, accessibility, SEO), device toolbar for responsive testing.
- Editors — VS Code with Emmet, Prettier, stylelint.
- CSS tooling — Sass/SCSS, PostCSS + Autoprefixer, CSS Modules.
- Frameworks — Bootstrap, Tailwind CSS, Angular Material, MUI.
- Accessibility — axe DevTools, WAVE, screen readers (NVDA, VoiceOver).
- Reference — MDN Web Docs, caniuse.com.