Skip to content
AgileLogics
4 min read

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 h1 per page that describes the whole page.
  • Don't skip levels going down: an h2 is followed by h3, not h4. 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>

Related developer tools