HTML Headings and Paragraphs

HTML headings and paragraphs are the most common elements on the web. Learn how to use <h1> to <h6> and <p> correctly so your page is clear for readers, screen readers and search engines.

How do HTML headings work (h1 to h6)?

HTML has six levels of headings, from <h1> (the most important) to <h6> (the least important).

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

In the browser, each heading is bold, and the text gets smaller from h1 down to h6. But size is not the point. Headings describe the outline of your page, like the chapter and section titles in a book.

• <h1> is the title of the whole page.
• <h2> elements are the main sections.
• <h3> elements are sub-sections inside an h2, and so on.

Why use only one h1 per page?

Your <h1> tells everyone what the page is about. It is like the title on the cover of a book. A book has one title, so a page should normally have one <h1>.

Search engines like Google read your headings to understand the topic of your page. A clear <h1> that matches what people search for helps your page appear in the right results. Screen reader users also often jump straight to the <h1> to find out where they are.

Tip: Make your <h1> describe the page, and usually match it to your <title>. For example, "Easy Banana Bread Recipe" for both.

Keep headings in order for readers and SEO

Don't skip levels when you go down. After an <h2>, the next smaller level should be <h3>, not <h5>. You can go back up to <h2> whenever a new main section starts.

Many screen reader users move around a page by jumping from heading to heading, like using a table of contents. If the levels jump around, the page feels confusing. Search engines also use this outline to understand which ideas belong together.

Here is a realistic blog post with good heading order:

<h1>Easy Banana Bread Recipe</h1>
<p>This banana bread takes 10 minutes to prepare and uses only one bowl.</p>

<h2>Ingredients</h2>
<p>You need three ripe bananas, flour, sugar, butter, eggs and baking soda.</p>

<h2>Method</h2>
<h3>Preparing the mix</h3>
<p>Mash the bananas with a fork, then stir in the melted butter.</p>
<h3>Baking</h3>
<p>Pour the mix into a tin and bake for 60 minutes at 175°C.</p>

<h2>Storing your bread</h2>
<p>Wrap it in foil. It stays fresh for three days.</p>

You will see a big title, then three main sections. The "Method" section has two smaller headings inside it. If you read only the headings, you understand the whole page.

How to write paragraphs in HTML

The <p> element is for a paragraph: a block of text about one idea. Browsers put a little space above and below each paragraph automatically.

<h2>About our café</h2>
<p>Corner Café opened in 2019 in a small street near the station. We serve coffee from local roasters and cakes baked every morning.</p>
<p>On Saturdays we host a book swap. Bring a book you have finished and take a new one home.</p>

You will see a heading and two separate blocks of text with space between them. Note that pressing Enter inside your code does not create a new paragraph in the browser. You need a new <p> element for each paragraph. You will learn more about this in the whitespace lesson.

Common mistake: Using empty paragraphs like <p></p> to add space between things. This adds nothing useful for screen readers. Spacing is a job for CSS.

Why you should not use headings just for big text

Sometimes beginners use an <h3> because they want slightly big, bold text, even when it is not a heading. Please don't. Headings tell browsers, search engines and assistive technology "a new section starts here". If you use them only for looks, you break the page's outline.

Choose the heading level based on meaning (how important the section is), not size. Later, CSS lets you make any text any size you want.

Practice exercise

Write a short page about your favourite city. Use one <h1> with the city's name, then three <h2> sections: "Things to see", "Food to try" and "Getting around". Put at least one paragraph under each. Add an <h3> inside "Food to try" for one special dish.

Hint: read only your headings out loud. They should sound like a table of contents.

Key takeaways

• Use <h1> to <h6> to build an outline of your page, like chapters in a book.
• Use one <h1> per page to say what the whole page is about.
• Don't skip heading levels; good order helps screen reader users and SEO.
• Use <p> for each paragraph, and choose headings for meaning, never just for size.