Heading structure

A heading is not large text. It is a semantic element that states two things at once: a section starts here, and this section hangs off that other one. The rank is set by the number of the element, from h1 to h6, and that number is the only part machines read.

That is where the most common confusion comes from. Visual size and semantic rank are independent: a stylesheet can make an h4 look huge and an h2 look modest. Choosing the element by how it looks on screen destroys the structure without anything warning you.

The concept needs boundaries against three neighbours. The title element is the document title and lives in the head, outside the content. The table of contents is navigation built from the headings, not a replacement for them. And the subtitle, the claim or the standfirst are not headings: the standard provides for grouping them with the title inside an hgroup, as a paragraph.

Structure in the strict sense is the list of every heading in the document, in the order they appear, with their rank. That list is exactly what someone navigating with a screen reader moves through.

Three sources of authority need separating here, because they say different things.

The HTML standard. It sets two testable rules. If a document has headings, at least one of them should be level 1. And every heading that follows another must have a rank that is lower than, equal to, or at most one greater than the previous one, which rules out jumping from h1 to h3. The standard also allows several top-level headings in one document and illustrates that with an example.

The accessibility guidelines. The criterion on information and relationships, level A, requires that structure conveyed visually can be determined programmatically, and the technique foreseen for headings is using real h1 to h6 elements. The criterion on headings and labels, level AA, requires them to describe topic or purpose. Neither imposes a specific hierarchy or a number of h1 elements.

Google. Its guide is explicit and contradicts the usual advice: having headings in semantic order is fantastic for screen readers, but from the perspective of Search it does not matter if they are out of order. It adds that there is no ideal number of headings, with a rule of thumb: if you think it is too many, it probably is.

<h1>Kora Ridge trail running shoes</h1>
  <h2>Features</h2>
    <h3>Outsole and grip</h3>
    <h3>Cushioning</h3>
  <h2>Sizes and conversions</h2>
  <h2>Customer reviews</h2>

Whatever circulates outside those three sources is habit. That exactly one h1 per page is mandatory, that the keyword belongs in the h1, that the h1 must match the title, or that a skipped level is penalised: none of these claims appears in Google's documentation or in the accessibility guidelines. They are defensible practices with no published evidence.

The first decision that depends on this is budgetary. Anyone selling an audit whose main deliverable is reordering heading levels to gain positions is selling something Google contradicts in writing. That work does make sense for another reason, and it should be justified with the correct one.

That reason is accessibility, and there the effect has been measured. In the reference survey among people who use a screen reader (1,539 responses, collected in December 2023 and January 2024), 71.6% said that to find information on a long page the first thing they do is move through the headings, and 88.8% consider the levels useful. A page whose headings are layout blocks turns that navigation into noise.

The second decision is editorial. A correct structure forces an answer to which sections the text actually has, and it usually exposes that two parts say the same thing or that the one answering the user's question is missing.

The third is about risk. The accessibility criteria that really do cover headings sit at level A and AA, which is the bar public tenders and conformance reviews usually set. There, structure is not aesthetics: it is a named requirement.

• Use a heading only where a real section begins. If a highlighted block starts no content of its own, style it with p or span and leave the rank alone.
• Do not skip ranks downwards: after an h2 comes an h2, an h3 or a higher rank, never an h4.
• Make sure there is at least one top-level heading describing the content of that specific page, not the brand and not the category.
• Write headings that make sense out of context, because that is how they are heard by someone jumping from one to the next without reading what lies between.
• Separate size and rank with CSS. Design decides how it looks; the rank decides where it fits.
• Group the title with its subtitle or claim inside an hgroup, instead of turning the supporting line into a ghost heading.

• Choosing the element by its size on screen, with h3 used as highlighted text and h2 as an image caption.
• Marking the banner slogan or the menu name as h1, which leaves the page without a top-level heading that describes it.
• Turning repeated interface elements, such as «Free shipping» or the price on every card, into headings: the list a screen reader moves through fills up with useless entries.
• Jumping from h1 to h4 because the CMS template only offers those two styles.
• Rebuilding the whole hierarchy expecting a ranking effect, then presenting any traffic fluctuation afterwards as proof that it worked.