Headings and content structure

Most readers do not read a web page from top to bottom. They land, scan the headings to see whether the page covers what they need, then jump to the part that answers their question. A page with clear structure supports that behaviour. A page without it forces the reader to work, and many of them will go back to the results and pick another page.

Search engines benefit from the same structure. Headings tell Google how the content is organised and what each section is about, which helps it match parts of the page to specific queries.

Headings are an outline

HTML gives you six heading levels, <h1> to <h6>. Use them the way you would use headings in a well-organised report. The <h1> names the page. Each <h2> names a major section. <h3> headings break a section into subsections. Lower levels are rarely needed on a web page.

<h1>How to Clean Suede Shoes</h1>
  <h2>What you need</h2>
  <h2>Removing dry dirt</h2>
  <h2>Lifting water stains</h2>
    <h3>Fresh stains</h3>
    <h3>Old, set-in stains</h3>
  <h2>Mistakes that damage suede</h2>

A simple test tells you whether your headings work: read only the headings, in order. If that outline tells the story of the page and a reader could find any answer from it, the structure is sound. If the headings say things like "Introduction", "More info" and "Section 3", they are labels with no information in them.

What Google says about H1s

A common worry is that a page must have exactly one <h1>. Google has said publicly that multiple H1 elements are not a problem for Search. HTML5 page templates often produce more than one, and Google handles that fine. For readers, one clear main heading at the top of the page is usually the clearest design, so it remains a sensible default. Just do not spend time "fixing" a template only because it outputs two H1s.

Headings should never be used only to make text bigger. If a sentence needs to look large for design reasons, style it with CSS. Marking it as a heading tells browsers, screen readers and search engines that a new section starts there, which is misleading when it does not.

Paragraphs, lists and tables

Each structural element suits a different kind of information.

Paragraphs carry explanation and reasoning. Keep them focused on one idea each. Short paragraphs are easier to read on a phone, though a paragraph that runs to five or six sentences is fine when the idea needs it.

Lists suit items that are parallel and separate: steps in a process, things to pack, requirements to meet. Use a numbered list when order matters and a bulleted list when it does not. Avoid turning every explanation into bullets, because a list removes the connecting words ("because", "so", "which means") that carry the reasoning.

Tables suit comparisons, where readers need to look across several items and several attributes at once.

Put the answer near the top

People arrive with a question. The opening of the page should make clear what the page covers and, where possible, answer the main question quickly. Then the rest of the page can expand, add nuance and cover related questions. Burying the answer at the bottom to keep people scrolling frustrates readers and tends to make the page less useful, which is the opposite of what search systems reward.

Structure and accessibility

Screen reader users often navigate a page by jumping between headings. A logical heading order lets them move through the content as easily as a sighted reader scans it. Skipping levels (going from <h2> straight to <h4>) or using headings for decoration makes that navigation confusing. Good structure for accessibility and good structure for SEO are the same thing.