Heading order
Moderate effortFound on 80% of audited stores.
Restructure your page headings so they follow a logical, sequential order (H1 → H2 → H3) with no levels skipped.
What it is
HTML headings (H1 through H6) are not just visual styling — they form an invisible outline of your page that screen readers and search engines read to understand your content structure. "Heading order invalid" means your page skips heading levels (for example, jumping from an H1 straight to an H4, or using an H3 before an H2), or uses headings out of sequence. Think of headings like the chapters and sub-chapters of a book: if you skip from Chapter 1 straight to Sub-sub-section 4, the reader loses the thread. The fix is to ensure every heading on every page flows in a strict, unbroken hierarchy: one H1 (the page title), then H2s for major sections, then H3s for sub-sections within those, and so on — never skipping a level on the way down.
Why it matters
Screen reader users — people who are blind or have low vision — navigate pages almost exclusively by jumping between headings. A broken heading order disorients them, makes your store harder or impossible to use, and can expose you to accessibility lawsuits under the ADA (USA), AODA (Canada), EAA (EU), and similar laws that are increasingly enforced against ecommerce businesses. Search engines like Google also use heading structure to understand what a page is about and which content matters most; a well-structured heading hierarchy reinforces your keyword relevance signals and can improve organic rankings. Finally, fixing heading order removes a WCAG 2.1 Level AA failure (Success Criterion 1.3.1, "Info and Relationships"), which is the baseline standard most accessibility audits and legal compliance frameworks reference.
How to fix it
- Audit your current heading structure by using a free browser extension (e.g., the axe DevTools browser extension, Accessibility Insights, or HeadingsMap) to visualize all headings on the page as a numbered outline.
- Identify every place where a heading level is skipped — for example, an H1 followed by an H4, or an H3 that has no parent H2 — and note which content block each heading belongs to.
- Decide on the correct logical level for each heading based on its role in the page outline, not on how it looks. If a heading visually needs to be larger or smaller, use CSS classes to adjust the appearance without changing the semantic level.
- Update the HTML tags (or the heading-level setting in your page editor) so the hierarchy is unbroken: one H1 per page, then H2 for top-level sections, H3 for sub-sections of those H2s, and so on, never skipping a number on the way down.
- Re-run your accessibility checker to confirm no heading-order violations remain, then use the HeadingsMap extension to visually verify the outline reads like a clean table of contents.
- Repeat the check on all key page templates — homepage, category/collection pages, product pages, blog posts, and landing pages — because heading order issues are usually template-wide, not isolated to one page.
Fix it on your platform
Pick your platform for the exact steps.
How to fix heading order on Shopify
- Go to Online Store → Themes → click 'Customize' on your active theme.
- For each section type (e.g., Featured Collection, Rich Text, Image with Text), click the section and look for a 'Heading' text field and a 'Heading size' or 'Heading tag' dropdown — some themes let you choose H1/H2/H3 directly here.
- For full control, go to Online Store → Themes → Actions → Edit Code, then open the relevant section Liquid file (e.g., sections/featured-collection.liquid) and change the hard-coded tag, e.g. replace <h3> with <h2> where the hierarchy demands it.
- For blog posts and pages, edit the content in Online Store → Blog Posts or Online Store → Pages using the rich-text editor — highlight text and select the correct heading level from the paragraph-style dropdown.
- Install the free axe DevTools browser extension, visit each key page, and run a scan to confirm no heading-order violations remain.
How to fix heading order on WooCommerce
- In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme) and locate the template files responsible for your headings: typically woocommerce/archive-product.php (category pages), single-product.php (product pages), and page.php or front-page.php (homepage).
- Identify hard-coded heading tags (e.g., <h3 class='woocommerce-loop-product__title'>) and change them to the correct semantic level (e.g., <h2>) — always work in a child theme to prevent changes being overwritten by updates.
- For page content edited with the Block Editor (Gutenberg), open each page, click on any Heading block, and change the heading level in the block toolbar (the H1/H2/H3 dropdown on the left of the toolbar).
- If you use Elementor or another page builder, click each Heading widget, open its settings, and change the 'HTML Tag' option (H1–H6) to the correct level.
- Install the free Accessibility Checker plugin (by Equalize Digital) to run a site-wide audit and confirm all heading-order issues are resolved.
How to fix heading order on BigCommerce
- Go to Storefront → Themes → click 'Edit Theme Files' (Blueprint) or 'Advanced → Edit Theme Files' (Cornerstone) for your active theme.
- Open the relevant template file — for example, templates/pages/category.html for category pages or templates/pages/product.html for product pages — and locate heading tags.
- Change any out-of-order heading tags (e.g., an <h4> that should be an <h2>) to the correct semantic level, keeping CSS classes intact so visual styling is unchanged.
- For content blocks edited in the Page Builder (Marketing → Page Builder), click any Text or Banner widget that contains a heading and use the heading-level selector in the rich-text toolbar to assign the correct level.
- Use the HeadingsMap browser extension to verify the heading outline on each major page template after saving changes.
How to fix heading order on Wix
- Open the Wix Editor and navigate to the page you want to fix (use the Pages menu at the top left).
- Click on each text element that is used as a heading. In the text toolbar that appears, open the 'Paragraph Styles' dropdown (it shows labels like 'Heading 1', 'Heading 2', etc.) and select the correct heading level for the element's position in the page hierarchy.
- Note: Wix maps its 'Heading 1–6' paragraph styles to H1–H6 HTML tags, so choosing the correct style from the dropdown directly sets the semantic heading level in the HTML.
- For Wix Blocks or repeater components (e.g., product grids), open the component editor and update the heading level on the title text element inside the repeater.
- After publishing, use the axe DevTools browser extension on the live page to verify heading order is correct.
How to fix heading order on Wix Studio
- Open Wix Studio and select the page to edit from the Pages & Menus panel.
- Click each text element used as a heading; in the text-formatting toolbar, open the text-style dropdown and select the correct heading level (Heading 1 through Heading 6) based on the element's role in the content hierarchy.
- For section or widget components, double-click into the component to edit it and update the heading level on any title text elements inside.
- Publish the site and verify with the axe DevTools browser extension.
How to fix heading order on Squarespace
- Open the Pages panel and click 'Edit' on the page you want to fix.
- Click any text block that contains a heading. In the rich-text toolbar, use the text-style dropdown (showing 'Heading 1', 'Heading 2', 'Heading 3') to assign the correct heading level — Squarespace maps these directly to H1, H2, and H3 HTML tags.
- For blocks where the heading level is hard-coded by the template (e.g., section titles in certain blocks), go to Website → Pages → click the gear icon next to the page → Advanced, and add custom CSS to reassign visual styling without changing your heading markup (or use a Code Block to insert a manually tagged heading).
- If you need heading levels beyond H3, insert a Code Block and write the HTML heading tag directly: e.g., <h4>Sub-section title</h4>.
- After saving, use the axe DevTools or HeadingsMap browser extension to verify the heading outline.
How to fix heading order on Webflow
- Open the Webflow Designer and navigate to the page or component to fix.
- Click on any Heading element on the canvas. In the Element Settings panel (the gear icon on the right), find the 'Tag' dropdown (showing H1–H6) and change it to the correct semantic heading level.
- For heading elements inside Symbols or Components, open the Symbol/Component in edit mode, update the tag there, and the change will propagate to all instances.
- For CMS-driven pages (e.g., product or blog templates), open the Collection Template in the Designer, find the heading binding, and update the tag in the same Element Settings panel.
- Publish the site and verify with the axe DevTools browser extension on the live URL.
How to fix heading order on Adobe Commerce (Magento)
- Identify the PHTML template responsible for the heading in question — common files include app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/view.phtml (product page title) and app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/category/view.phtml (category page title).
- Open the file in your theme (always work in a custom theme, never the base theme) and locate the heading tag. Change it to the correct semantic level, e.g., replace <h3 ...> with <h2 ...>, keeping all classes and attributes intact.
- For CMS pages and blocks (Content → Pages or Content → Blocks in the Admin), click 'Edit' on the relevant page or block and use the WYSIWYG editor's heading-style dropdown to select the correct heading level for each heading in the content.
- Run bin/magento cache:flush from the command line after saving template changes to clear the full-page cache.
- Use the axe DevTools browser extension to verify heading order on the live storefront.
How to fix heading order on Magento Open Source
- Follow the same template-file approach as Adobe Commerce (Magento) above — locate the relevant PHTML file in your custom theme under app/design/frontend/<Vendor>/<theme>/.
- Edit the heading tag to the correct semantic level and flush the cache with bin/magento cache:flush.
- For CMS content, use the Admin WYSIWYG editor (Content → Pages / Blocks) to reassign heading levels via the paragraph-style dropdown.
- Verify the fix with the axe DevTools browser extension.
How to fix heading order on Headless / Custom (I build in code)
- Run the axe-core library or the axe DevTools CLI against your pages to get a full list of heading-order violations with exact DOM locations.
- In your component library, audit every component that renders a heading (e.g., ProductTitle, SectionHeader, CardTitle) — these often hard-code a heading level (e.g., always <h3>) regardless of context.
- Refactor heading components to accept a 'level' prop (e.g., level={2}) that maps to the correct HTML tag dynamically, e.g. in React: const Tag = `h${level}`; return <Tag className={styles.heading}>{children}</Tag>;
- Update each page template to pass the correct level based on the component's position in the page hierarchy — the page-level H1 is typically the product or page name; section titles are H2; subsections are H3.
- Add an automated axe-core test (e.g., via jest-axe or Cypress-axe) to your CI pipeline to prevent regressions.
How to fix heading order on Shopify Plus
- Follow all standard Shopify steps above.
- If using a custom checkout or headless storefront (Hydrogen/Remix), open the relevant React component files and audit JSX heading tags (h1–h6) to ensure sequential order, then redeploy.
Does your site have this issue?
Run a free SEOLZ scan to find heading order — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Heading order?
HTML headings (H1 through H6) are not just visual styling — they form an invisible outline of your page that screen readers and search engines read to understand your content structure. "Heading order invalid" means your page skips heading levels (for example, jumping from an H1 straight to an H4, or using an H3 before an H2), or uses headings out of sequence. Think of headings like the chapters and sub-chapters of a book: if you skip from Chapter 1 straight to Sub-sub-section 4, the reader loses the thread. The fix is to ensure every heading on every page flows in a strict, unbroken hierarchy: one H1 (the page title), then H2s for major sections, then H3s for sub-sections within those, and so on — never skipping a level on the way down.
Why does heading order matter?
Screen reader users — people who are blind or have low vision — navigate pages almost exclusively by jumping between headings. A broken heading order disorients them, makes your store harder or impossible to use, and can expose you to accessibility lawsuits under the ADA (USA), AODA (Canada), EAA (EU), and similar laws that are increasingly enforced against ecommerce businesses. Search engines like Google also use heading structure to understand what a page is about and which content matters most; a well-structured heading hierarchy reinforces your keyword relevance signals and can improve organic rankings. Finally, fixing heading order removes a WCAG 2.1 Level AA failure (Success Criterion 1.3.1, "Info and Relationships"), which is the baseline standard most accessibility audits and legal compliance frameworks reference.
How do I fix heading order?
Restructure your page headings so they follow a logical, sequential order (H1 → H2 → H3) with no levels skipped.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Web accessibility tutorials — W3C WAI