Headings

h1 to h6 mark headings by importance, not by size. One h1 names the page; h2 names its sections; h3 the parts inside a section.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

Screen readers list the headings to let people jump around, and search engines read the h1 as the page's subject. A heading picked for its size breaks both.

How to think about it

Outline first: the page title is h1, each section h2, and so on down. If a heading looks wrong, fix its size with CSS, never by changing its level.

Worked example

<h1>Bread</h1>

One h1: the page's own title. The browser draws it at twice the body text size by default.

<h2>Ingredients</h2>

Sections get h2: one and a half times the body size.

<h3>Flour</h3>

Inside a section, h3. Each level is smaller, and the levels never skip: h1, then h2, then h3.

Your turn

Mark the page's main title.

<>Bread</>

The trap

Using h4 because it is the size you wanted. The size is one CSS line; the level is the page's structure, and readers rely on it.

Practise headings on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.