The HTML document skeleton: doctype, html, head, and body
Part 1's first file already had four pieces every real HTML page needs: a doctype declaration, and three nested elements. This part explains exactly what each one does — not just that they're required, but what actually happens when they're missing.
The full skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Page title</title>
</head>
<body>
<!-- everything visible on the page goes here -->
</body>
</html><!DOCTYPE html>: telling the browser which rules to use
This isn't an HTML tag — it's a declaration that tells the browser to render the page in "standards mode," following the modern HTML5 specification. Without it, browsers fall back to "quirks mode," an intentionally bug-compatible rendering mode that replicates decades-old browser inconsistencies for the sake of very old pages that depended on them. A modern page in quirks mode can have subtly wrong box sizing and spacing with no obvious error anywhere — just visual behavior that doesn't match the CSS spec, which is a genuinely confusing bug to track down since nothing looks "broken," just slightly off.
<html lang="en">: the root element, and why lang matters
Every other element nests inside <html> — it's the root of the entire DOM tree from part 1. The lang attribute isn't decorative: screen readers use it to select the correct pronunciation rules, and browsers use it to decide whether to offer a translation prompt. Leaving it off doesn't break rendering, but it's a real, silent accessibility gap — one line, easy to include, easy to forget.
<head>: metadata the browser needs but nobody sees directly
<head>
<meta charset="UTF-8" />
<title>Bright Leaf Coffee</title>
</head>Nothing inside <head> renders as visible page content (with rare exceptions like <title> showing in the browser tab). This is where the page's metadata lives — its character encoding, its title, and, as parts 14 through 16 cover in depth, all of the meta tags that make a page genuinely SEO and AI-SEO friendly. <meta charset="UTF-8" /> specifically tells the browser how to decode the page's bytes into actual characters — get this wrong or omit it, and text with accented characters, curly quotes, or symbols can render as garbled boxes or question marks, a bug that's invisible in plain English text and only shows up the moment real content needs a character outside basic ASCII.
<body>: everything a visitor actually sees
Every visible element — headings, paragraphs, images, the entire Bright Leaf Coffee homepage this series builds starting in part 8 — goes inside <body>. A page can technically render with content placed outside <body>, since browsers are forgiving and will often silently correct it, but relying on that forgiveness is fragile: different browsers "correct" malformed HTML differently, so a page that happens to work in one can render wrong in another.
Omitting <!DOCTYPE html> or leaving out lang on <html> because the page still visually renders fine without them. Both omissions are real, and both are invisible until something depends on them specifically — a CSS box-sizing edge case for the missing doctype, a screen reader mispronouncing every word for the missing lang attribute. Neither shows up in a quick visual check, which is exactly why they're worth including as a fixed habit rather than an afterthought.
What happens with more than one of each
The HTML spec requires exactly one <html>, one <head>, and one <body> per document. Browsers won't necessarily throw a visible error for duplicates, but behavior becomes genuinely unpredictable — which <head> a browser actually reads metadata from, or which <body> it renders, isn't reliably specified. This is a case where "the browser didn't complain" and "the code is correct" are two different things.
Next: the text elements that make up most of any real page's content — headings, paragraphs, and inline text formatting.