Headings: h1 to h6
Many screen reader users move through a page by jumping from heading to heading, the way sighted readers skim bold titles. If your headings form a clear outline, the page is easy to scan for everyone. If they are chosen for their font size, the outline turns into nonsense.
The rule
Headings are an outline: one h1, then nest down without skipping.
HTML has six heading levels, <h1> to <h6>. Level 1 is the most important, level 6 the least. Think of them as the numbered structure of a report:
<h1>Travelling in Kerala</h1>
<h2>Backwaters</h2>
<h2>Food</h2>
<h3>Breakfast</h3>
<h3>Seafood</h3>
<h2>When to visit</h2>(The indentation here only shows the outline; in a real page the headings sit among paragraphs.)
Three rules follow from the rule:
- One
h1per page, naming what the page is about. It usually matches the<title>, closely if not exactly. - Go down one level at a time. After an
h2, the next deeper heading ish3, noth4. You can jump back up any number of levels when a new section starts. - Level means rank, not size. Browsers make
h1large by default, but you can restyle any heading with CSS. If you want smaller text for a top-level section, useh2and change the size with CSS; do not reach forh5.
The shortcut
Before writing headings, write the page as a numbered outline. The depth of each item is its heading level.
Write the outline
1 Guide to houseplants; 1.1 Light; 1.2 Water; 1.2.1 Summer; 1.2.2 Winter; 1.3 Soil.
The trap is picking a heading level because of its default size, or using a heading just to make any text bold. If the text does not introduce a section, it is not a heading.
Headings pay off twice. Screen reader users can press a single key to jump to the next heading, or pull up a list of every heading on the page and pick one. Search engines also treat headings as strong hints about what each part of the page covers. A clean outline serves both at no extra cost.
Drills
Answer fast — trust the rule.
How many h1 elements should a typical page have?
A page has an h2 called "Pricing". Its subsection "Student discounts" needs a heading. Which level?
You want a top-level section heading to look smaller than the default h2. What should you do?
Which heading sequence skips a level?
Remember
- Headings form an outline: one
h1, thenh2,h3and deeper, one level at a time. - Shortcut: write a numbered outline first; the depth of each item is its level.
- Trap: choosing a heading for its size, or using headings just to make text bold.