Camp 2 · Step 4 of 14
Headings and paragraphs
Structure real text content — headings as outline, paragraphs as flow, and how whitespace really works.
Text is 90% of the web, and two elements carry most of it: headings and paragraphs.
Paragraphs
Each <p> is one paragraph. Here's the thing beginners find strangest:
HTML collapses whitespace. Line breaks and extra spaces in your code
don't appear in the page:
However you format your source code, the browser reflows the text. New
lines in the page come from structure — a new <p>, a heading, a <br> —
not from pressing Enter in the editor.
Headings build the outline
Think of headings as a book's table of contents: <h1> the book title,
<h2> chapters, <h3> sections. Never skip levels just because a smaller
font looks nicer — that's CSS's job later.
You press Enter five times between two sentences inside one <p>. What does the visitor see?
Your page is about coffee, with sections for Beans and Brewing. The best structure is:
What's next
Lists — because half the web (menus, steps, search results, this very sentence structure) is secretly a list.