Your First Web Page

Headings and paragraphs in HTML & CSS

Topic 2 of 58 · 8 minFree lesson

Long pages are easier to read when they're split into sections with clear titles. HTML has six levels of heading, from <h1> to <h6>, and the <p> element for paragraphs.

Six levels of heading

The number in a heading tag is its level. <h1> is the most important and <h6> the least. The browser draws the higher levels bigger.

Example 1

<h1>Recipes</h1><h2>Breakfast</h2><h3>Pancakes</h3>

Result

Headings make an outline

Use headings like the outline of a book. One <h1> gives the title of the whole page. Each main section gets an <h2>, and a part of a section gets an <h3>.

Example 2

<h1>My Trip to Japan</h1><p>Two weeks, three cities.</p><h2>Tokyo</h2><p>Busy streets and tiny restaurants.</p><h2>Kyoto</h2><p>Old temples and quiet gardens.</p>

Result

This outline matters to more than your eyes. A screen reader is an app that reads pages out loud for people who can't see the screen. It lets them jump from heading to heading, so a good outline takes them straight to the part they want. Search engines read your headings too, to learn what the page is about.

Paragraphs

Each <p> element is one block of text, with space above and below it. Keep one idea per paragraph, the same as in an essay.

Example 3

<p>Our shop opens at nine.</p><p>On Sundays we close at noon.</p>

Result

Common mistakePicking a heading because of its size. An <h4> is not "a small heading"; it's a level-four heading. Choose the level that fits the outline, and don't skip levels. You'll change the size with CSS later.

Example 4Don't do this

<h1>Shop</h1><h4>Shoes</h4>

Result

TipGive each page exactly one <h1>, describing the whole page. Then read only your headings, top to bottom. They should make sense on their own, like a table of contents.

Try it yourself

Run the code in the editor and answer 8 practice questions on headings and paragraphs. It's free, you only need an account.

Practice this topic free I have an account