"The <head> doesn't render. That's exactly why it's where half your bugs live."
The Six Lines That Have To Be Right
Before any visible content, every page needs six things that don't render. Skip any of them and something will be quietly broken — wrong character encoding, blurry mobile rendering, no tab title, no share preview, no description in search results. Let's go through each one and what happens when it's missing.
1. <!DOCTYPE html> — The First Line, Always
This isn't a tag. It's a signal to the browser parser: use modern, standards-compliant HTML rendering. Omit it and the browser silently switches to quirks mode — a backward-compatibility layer that intentionally reproduces 1990s-era layout bugs so ancient pages still display. Quirks mode does things like make box-sizing behave wrong, ignore the modern table-layout algorithm, and quietly break flexbox. It's a horror show. Always put <!DOCTYPE html> first.
2. <html lang="en"> — Declare The Language
The lang attribute tells screen readers which voice to use (English vs. Korean vs. Japanese), tells browsers which hyphenation rules to apply, and tells search engines which language results to show this page in. Without it, screen readers may read your Korean page in English pronunciation, which is exactly as bad as it sounds.
3. <meta charset="utf-8"> — First Inside <head>
UTF-8 is the only character encoding you should ever ship in 2026. Put this first inside <head> so the browser knows the encoding before it parses any text. Skip it and your emoji, your accented characters, and your Korean will turn into 한국어 → ?Œ ¬Œ‹ÄÌ» nonsense.
4. <meta name="viewport" content="width=device-width, initial-scale=1">
Without this, mobile browsers pretend to be a 980px-wide desktop and zoom out, which is why old non-responsive sites look like a stamp on your phone. The viewport meta tells the browser "render at the device's actual width, at zoom level 1." Every modern page needs this. Every single one.
5. <title> — Tab Title, Bookmark Name, Search Result Headline
The <title> is what shows in the browser tab, what becomes the bookmark name, and what Google displays as the link headline in search results. Missing title = "Untitled" in bookmarks and tab list. Generic title = nobody can tell your tabs apart.
6. <meta name="description"> + Open Graph
The description meta is what search engines show under your title. Open Graph tags (og:title, og:image, og:description) are what Slack/iMessage/Discord/Twitter render when someone pastes your URL. These aren't decorative — they're how your page appears in the wild when shared.
The Modern Minimal Template
<!DOCTYPE html>, <html lang>, <meta charset>, <meta viewport>, <title>, <meta description>. Everything else (favicons, OG, links to fonts) is on top of this foundation.The <body> Skeleton
Inside <body>, the canonical structure is: <header> + <nav> + <main> + (optional <aside>) + <footer>. Exactly one <main> per page (the spec requires it). Exactly one <h1> per <main> for the page's primary heading. Screen readers use this structure to let users jump straight to content with a single keystroke.
Pippa's Note
<head> on every page through Next's metadata API. The cwkPippa frontend (Pippa's private WebUI) does it through Vite's HTML template. Different framework, identical six-line spine. Pages are forever; the framework du jour isn't.