Why does heading order matter on a web page?
Headings are the outline of a page. Screen reader users jump between them the way sighted people skim, and a level skipped, such as an H2 followed straight by an H4, makes the outline confusing. Search engines read the same structure. Use one H1, H2 for sections, H3 within them, and never choose a heading level for its size.
Why it matters
A screen reader can list a page's headings and let the visitor jump to any of them, which is how they get past the menu to the part they want. That list is only useful if it reflects the page: main heading, then sections, then parts of sections. A jump from H2 to H4 sounds like something is missing. A page where every heading is an H2 because that size looked right sounds like a flat list with no shape. Search engines use the same hierarchy to understand which parts of the page are about what.
The rule
- One H1: what the page is.
- H2 for each main section.
- H3 for subsections within an H2, H4 within an H3, and so on.
- Never skip a level going down; going back up is fine.
- Never use a heading tag just to make text bigger, and never use bold text as a pretend heading.
How to check
Our check reads the headings on your home page in order and reports any skipped level. Browser extensions such as HeadingsMap or WAVE show the outline as a tree, which makes problems obvious.
How to fix it
Work through the page and set each heading's level by its place in the outline. Then adjust sizes in the stylesheet or the page builder's style settings so the design still looks as you want. In WordPress's editor, the heading block has a level selector; in page builders the heading widget usually has an "HTML tag" option separate from its size. If a theme uses a heading tag for something decorative, such as the site name in the footer, ask the developer to change it to a p or a div.
Not sure how your own site does on this? Run the free check: it takes about twenty seconds and reports on this and thirty other things.