Check Heading Structure Without Installing a Chrome Extension
- You do not need to install a Chrome extension to check heading structure.
- Paste your page HTML into the free heading validator for the same heading outline — instantly.
- Getting your page HTML takes 10 seconds: right-click > View Page Source > copy.
- The web tool works in any browser, on any device, with no account required.
Table of Contents
What Chrome Extensions Do vs. What This Tool Does
Heading checker Chrome extensions work by running a content script on the current tab after the page loads. They read the rendered DOM (document object model) — meaning they see headings added by JavaScript as well as static HTML headings. Common examples include HeadingsMap and Taba11y. The advantage: extensions see the final rendered state of dynamic pages. The disadvantage: they require installation, Chrome browser, and extension permissions. The web-based heading validator works differently: you paste your raw HTML source, and the tool parses and analyzes it directly in the browser. The analysis output is identical for static HTML pages — the same heading hierarchy, the same error flags, the same visual outline. For most content pages, blog posts, and static sites, the static HTML source contains all heading tags. Extensions provide an advantage only on heavily dynamic pages where headings are injected by JavaScript after initial load (single-page apps, some React/Vue frameworks). For those cases, Chrome DevTools or a browser extension is the better tool.How to Get Your Page HTML in 10 Seconds
Getting the HTML source of any page requires no tools: **Desktop browsers (Chrome, Firefox, Edge):** 1. Navigate to the page you want to check. 2. Right-click anywhere on the page (not on an image or link). 3. Select "View Page Source" from the context menu. 4. A new tab opens with the raw HTML. 5. Press Ctrl+A (Windows/Linux) or Cmd+A (Mac) to select all. 6. Press Ctrl+C or Cmd+C to copy. **Safari (Mac):** 1. Enable the Develop menu: Safari > Preferences > Advanced > "Show Develop menu in menu bar." 2. Navigate to your page. 3. Develop > Show Page Source (or Ctrl+Cmd+U). 4. Select all and copy. **Safari on iOS:** Type `view-source:` before the URL in the address bar. Example: `view-source:https://example.com/page`. The raw HTML displays in the browser. **Firefox mobile:** Add `view-source:` before the URL the same way. Once you have the HTML copied, you are ready to paste into the validator. Sell Custom Apparel — We Handle Printing & Free ShippingStep-by-Step: Using the Free Heading Validator
With your HTML copied: **Step 1 — Open the tool.** Go to wildandfreetools.com/accessibility-tools/heading-validator/ in any browser. **Step 2 — Paste your HTML.** Click in the input area and paste (Ctrl+V or Cmd+V). The full page source can be thousands of lines long — paste all of it. The tool handles large documents. **Step 3 — Run the analysis.** Click the Validate button. The tool parses the HTML and extracts all heading elements. **Step 4 — Read the visual outline.** The output shows a nested visual outline of every heading on the page, indented by level: H1: Your Page Title H2: First Major Section H3: Subsection Detail H2: Second Major Section Problems are highlighted: a skipped level appears as an unexpected indentation jump; an empty heading shows as a blank entry; a duplicate H1 is flagged. **Step 5 — Fix and re-validate.** Make corrections in your CMS or code editor, copy the updated HTML, and paste it back in to confirm the issues are resolved.What the Heading Validator Output Shows You
The validator reports the following: **Visual heading outline:** Every H1 through H6 on the page, in source order, indented to show nesting depth. This is the same structure a screen reader presents to users navigating by heading. **H1 status:** Whether your page has zero, one, or multiple H1 tags. Zero and two+ are both flagged. **Skipped levels:** Any point in the document where the heading level jumps down by more than one. Flagged as a WCAG 1.3.1 concern. **Empty headings:** Heading tags that contain no text or only whitespace. These are invisible to sighted users but create empty navigation landmarks for screen readers. **Heading count:** The total number of heading elements by level, so you can spot unusual distributions (e.g., 12 H2 tags and 0 H3 tags might indicate over-flattened structure). What the tool does not show: non-descriptive heading text (requires human judgment), CSS styling on headings (visual output only, not style), or headings added by JavaScript after initial page load.Check Your Headings Now — No Extension Needed
Paste your page HTML into the free heading validator. Full hierarchy analysis, WCAG error flags, visual outline — runs in your browser, nothing to install.
Open Free Heading ValidatorFrequently Asked Questions
Does the web validator work on password-protected or staging pages?
Yes. Because you paste the HTML directly, the tool does not need to access the URL. You can check password-protected pages, localhost development sites, staging environments, and any page you can view source on — regardless of access controls.
Can I check a React or Next.js page this way?
For Next.js pages with server-side rendering (SSR) or static generation (SSG), the HTML source contains all headings and works perfectly with the paste method. For client-side-only React apps, the HTML source may only show the shell — headings added after JavaScript runs will not be in the source. In that case, use browser DevTools (F12 > Elements) to copy the rendered HTML after the page loads.
Why would I use a Chrome extension over this tool?
Extensions like HeadingsMap update in real time as you navigate between pages, which is useful for auditing multiple pages in a workflow. They also see headings injected by JavaScript. If you are doing a one-off check of a specific page and you want zero setup, the web tool is faster. If you are auditing 30 pages in a session, a browser extension may be more efficient.
Does this tool work on mobile?
Yes. The heading validator is mobile-responsive and runs entirely in the browser — no server processing required. Getting the HTML on mobile is slightly more involved (use the view-source: URL trick in Safari or Firefox mobile), but the validation itself works identically on any device.

