The Shape of an HTML Document
The bakery site starts as one file, index.html. Before any menus or photos, every HTML page needs the same outer frame. Get the frame right and browsers, search engines and screen readers all know how to treat the page. Get it wrong and small mysteries appear: garbled characters, a tiny unreadable page on phones, the wrong title in the browser tab.
The rule
The head describes the page; the body is the page.
Here is the whole frame for the bakery's homepage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Crumb Bakery — Fresh bread daily</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Crumb Bakery</h1>
<p>Sourdough, rye and buns, baked every morning.</p>
</body>
</html><!DOCTYPE html>tells the browser to use modern standards mode. Without it, browsers fall back to an old "quirks" mode.<html lang="en">wraps everything and states the language, which helps screen readers pronounce words and helps translation tools.<head>holds information about the page, none of it shown in the page area: the character encoding, the viewport setting for phones, the<title>that appears in the tab and in search results, and links to stylesheets.<body>holds everything the visitor actually sees and uses.
A few terms you will use daily:
- A tag is the markup itself, such as
<p>or</p>. - An element is the opening tag, the closing tag and everything between them.
- An attribute adds information to an opening tag, written
name="value", likelang="en". - Some elements are void: they have no content and no closing tag, such as
<meta>,<link>,<img>and<br>.
Elements nest like boxes inside boxes. The last one opened must be the first one closed: <p><strong>fresh</strong></p>, never <p><strong>fresh</p></strong>.
The shortcut
For anything you want to add, ask "Will the visitor see or use this in the page?" Yes goes in the body. If it only describes the page to the browser or to search engines, it goes in the head.
The tab text "Crumb Bakery"
Shown in the tab and in search results, not in the page area:
<title>in the head.
The most common trap is forgetting the viewport <meta>. Without it, phones pretend to be a wide desktop screen and shrink the whole page to fit, so text becomes tiny.
Drills
Answer fast — trust the rule.
Where does <title> belong?
What does <!DOCTYPE html> do?
Which of these is a void element with no closing tag?
Which line is correctly nested?
Remember
- The head describes the page; the body is the page.
- Ask: will the visitor see or use it? Body. Only describes the page? Head.
- Trap: leaving out the viewport meta makes pages tiny on phones.