Headings and Paragraphs
Prerequisites: Document structure
HTML has six heading levels, <h1> (most important) to <h6> (least),
and <p> for paragraphs.
<h1>Growing Tomatoes</h1>
<p>Tomatoes are easy to grow if they get enough sun and water.</p>
<h2>Choosing a variety</h2>
<p>Cherry tomatoes ripen fastest and suit small gardens.</p>
<h2>Planting</h2>
<h3>Indoors</h3>
<p>Start seeds indoors six to eight weeks before the last frost.</p>
<h3>Outdoors</h3>
<p>Plant seedlings deeply — roots grow along the buried stem.</p>
Browsers show headings in bold, with h1 the largest. But headings are
about structure, not size — you can make an h2 any size with CSS.
The heading outline
Headings form an outline of the page, like a table of contents:
Growing Tomatoes
├── Choosing a variety
└── Planting
├── Indoors
└── Outdoors
Screen-reader users jump between headings to skim a page, the way sighted readers scan for bold titles. Search engines use them to understand the topics.
Rules of thumb:
- Use one
h1per page that describes the whole page. - Don't skip levels going down: an
h2is followed byh3, noth4. Going back up any number of levels is fine. - Never pick a heading level because of its default size.
- Don't use headings for text that isn't a heading (like a tagline) just to make it big or bold.
Paragraphs
Each <p> is a block of text with space above and below. The browser
wraps lines automatically to fit the window — line breaks in your source
don't matter:
<p>This sentence is written
across three lines in the source,
but displays as one flowing paragraph.</p>
To start a new paragraph, close the p and open a new one. Don't use
empty paragraphs or <br>s to create space — that's CSS's job.
Practice
Mark up the outline of a travel guide: the page title "Visiting Lisbon", sections "Getting There" and "Where to Eat", and under "Where to Eat" two subsections, "Pastries" and "Seafood" — each with a one-sentence paragraph.
Show solution
<h1>Visiting Lisbon</h1>
<h2>Getting There</h2>
<p>The airport is a short metro ride from the city center.</p>
<h2>Where to Eat</h2>
<h3>Pastries</h3>
<p>Try a pastel de nata while it's still warm.</p>
<h3>Seafood</h3>
<p>Grilled sardines are a summer favorite.</p>