Headings and paragraphs

Six levels of heading

HTML gives you six heading elements, from h1 (most important) to h6 (least important). Together they form the outline of the page, like the table of contents of a book.

<h1>Growing tomatoes at home</h1>
<p>Tomatoes are one of the easiest vegetables to grow in a pot.</p>

<h2>Choosing a pot</h2>
<p>Pick a pot at least 30 cm deep with holes in the bottom.</p>

<h2>Watering</h2>
<p>Water deeply two or three times a week rather than a little every day.</p>

<h3>Signs of too much water</h3>
<p>Yellow lower leaves and soil that never dries out.</p>

Read just the headings and you understand the page: one main topic, two sections, and a detail inside the second section. That is exactly what a good outline should do.

The three rules of headings

1. One h1 per page. It states what the whole page is about, and it is usually similar to the page's <title>. HTML does not technically forbid more than one, but a single h1 gives everyone the clearest signal.

2. Do not skip levels on the way down. A section is h2; a sub-section inside it is h3. Jumping from h2 straight to h4 leaves a hole in the outline, as if a book's chapter 2 had a section 2.1.1 with no 2.1. Going back up is fine: after an h3 you can start a new h2 section.

3. Choose the level for its meaning, not its size. Browsers show h1 biggest and h6 smallest, so it is tempting to pick a level because of how it looks. Resist. When a heading looks too large or small, keep the right level and change its size with CSS later.

Why the outline matters

• Readers skim. Most people scan headings first to decide whether a page answers their question.
• Screen reader users navigate by headings. Assistive software can list every heading or jump between them, the way sighted readers skim. A tidy outline makes a page fast to use; a messy one makes it exhausting.
• Search engines read structure. Headings help them understand what each part of a page covers. They are not a magic ranking trick, but clear structure is part of a page that is easy to understand.

Paragraphs

Every block of running text goes in its own p element. Do not put two paragraphs in one p with a <br> between them; make two elements. Browsers add space between paragraphs automatically, and CSS can change that space later.

Keep paragraphs short on the web, often two to four sentences. Long walls of text are hard to read on a phone. The Word Counter tool shows the reading time of a draft, which is handy when you write articles.

What not to use as a heading

• Bold text in a paragraph is not a heading. It looks similar, but screen readers and search engines do not treat it as one. If it introduces a section, make it a real heading.
• A heading for decoration, such as a big slogan that does not introduce a section, is better as a styled paragraph.
• An empty heading, left over from a template, is announced by screen readers as "heading level 2, blank". Delete it.

Common mistakes

• Several h1 elements because "they look nice and big".
• Starting a page at h3 because h1 "is too large".
• Using headings for a list of features that would be better as a list (you will meet lists soon).
• Long headings. Aim for a few words that a reader can take in at a glance.

Exercise

Write the heading outline and short paragraphs for a page called Learning to cook rice. It needs an introduction, a section on Ingredients, a section on Method with two sub-sections (On the stove and In a pressure cooker), and a section on Storing leftovers.

<h1>Learning to cook rice</h1>
<p>Perfect rice needs only water, heat and patience.</p>

<h2>Ingredients</h2>
<p>One cup of rice, two cups of water and a pinch of salt.</p>

<h2>Method</h2>
<h3>On the stove</h3>
<p>Rinse the rice, bring the water to a boil, add the rice, cover and simmer for 15 minutes.</p>
<h3>In a pressure cooker</h3>
<p>Use a little less water and cook for two whistles.</p>

<h2>Storing leftovers</h2>
<p>Cool the rice quickly and keep it in the fridge for no more than a day.</p>