Every public page should start from a predictable skeleton: doctype, language, charset, viewport, title, then body content. This lesson wires in CSS so the page is readable immediately.
Non-negotiable head items
<!DOCTYPE html>— standards mode.<html lang="en">— adjust for your locale.<meta charset="utf-8">— early inhead.<meta name="viewport" content="width=device-width, initial-scale=1">— mobile scaling.<title>— unique per page (tabs, bookmarks, SEO).
Where CSS lives on day one
For lessons and small demos, an embedded <style> in head is fine. Real sites usually use <link rel="stylesheet" href="..."> so browsers cache CSS separately.
Body content pattern
<body>
<header>…</header>
<main>…</main>
<footer>…</footer>
</body>Practice steps
- Run the starter page and shrink the browser window—text should reflow.
- Change
--page-maxin:rootand see content width change. - Add a second paragraph inside
mainand adjustline-heightin CSS.
Important interview questions and answers
- Q: Why is viewport meta important?
A: Without it, mobile browsers may scale pages as if they were desktop width, breaking responsive layouts. - Q: What belongs in `head` vs `body`?
A: Metadata and resource hints in `head`; user-visible content in `body`. - Q: Why set charset early?
A: So the parser interprets bytes as UTF-8 before reading visible text.
Self-check
- Remove
langfrom<html>—what accessibility hint did you lose? - Add
<link rel="stylesheet" href="/missing.css">—what still renders if HTML is solid?