head and body
Think of a book. The cover, the barcode and the publishing details describe the book; the chapters are the book. An HTML document has the same split, and it is written into its structure as two elements: head and body.
The rule
head is about the page; body is the page.
The html element has exactly two children, always in this order:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rainy Day Reads</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Rainy Day Reads</h1>
<p>Five short books for a wet afternoon.</p>
</body>
</html>head holds metadata: information about the document. The character encoding, the title that appears in the browser tab, links to stylesheets, a description for search results and scripts all go here. Almost nothing in head is drawn on the page itself.
body holds the content: headings, paragraphs, images, links, lists, forms. If a visitor can see it, hear it or click it inside the page, it lives in body.
There is exactly one head and one body, and nothing sits between them or after body. Browsers will try to repair a document that breaks this rule, but, as you learned earlier, a repaired tree is a guessed tree.
The shortcut
For every item, ask: "Would it appear inside the page window?" Yes means body; no means head.
The tab text "Rainy Day Reads"
It shows in the browser tab, not inside the page. So it is
<title>inhead.
The trap is the word "heading". head is not where headings go. A heading like <h1> is visible content and lives in body.
Why does this split matter in practice? Programs other than browsers read your page too. A search engine reads the head to learn the title and description. A chat app that shows a link preview reads the head to find a title and an image. None of them need to wade through the body to get that information, because it lives in a predictable place.
Drills
Answer fast — trust the rule.
Where does the <title> element belong?
Where should the main <h1> heading go?
What is the correct order of children inside html?
Which of these belongs in head?
Remember
headholds information about the page;bodyholds everything shown in the page window.- Shortcut: "would it appear inside the page window?" Yes means
body, no meanshead. - Trap:
headis not for headings;<h1>to<h6>go inbody.