Why a Page Can Look Perfectly Structured and Have an Empty Heading Hierarchy Underneath

A page can have visually-identical headings — same size, same boldness, same spacing — and still have a completely broken heading structure underneath, because "looks like a heading" and "is marked up as a heading" are determined by entirely different things, and only one of them affects SEO/accessibility

The previous articles on this site covered heading extraction for content research, accessibility/WCAG implications, and AI-extraction formatting. This article addresses a foundational, but frequently-overlooked distinction: visual heading styling vs semantic heading markup — and how CSS and HTML can diverge, producing pages that "look" correctly structured while being invisible, structurally, to the tools (search engines, screen readers) that rely on the underlying HTML.

"Looks like a heading" is a CSS/visual decision

Visually, a "heading" is just text that's been styled to look like one — larger font size, bold weight, distinct spacing/margins from surrounding text. Any HTML element — a <div>, a <span>, a <p> — can be styled, via CSS, to look exactly like an <h2> — larger font, bold, appropriate spacing — with zero difference in visual appearance compared to an actual <h2> element.

"Is marked up as a heading" is an HTML semantic decision — using actual <h1> through <h6> elements — which carries meaning independent of how the element is visually styled.

These two things — visual styling and semantic markup — are completely independent — CSS can style any element to look like anything; HTML semantic elements carry meaning regardless of how they're styled (an <h2> styled to look identical to regular body text is still, semantically, a heading — just one that doesn't visually "announce" itself as such).

Why "div soup" headings happen

Design tools/page builders (particularly visual, drag-and-drop website builders, and some CMS page-builder plugins) often generate markup based on visual presentation, not semantic structure — a user drags a "large, bold text" element onto the page, styles it to look like a heading — and the underlying generated HTML might be a <div> or <p> with CSS classes applying the visual styling — not an <h1>/<h2>/etc. element.

From a purely visual perspective — the page looks exactly "right" — headings appear appropriately sized/styled, the visual hierarchy looks correct to a sighted user casually viewing the page.

From the perspective of anything reading the underlying HTML structure (search engine crawlers extracting heading hierarchy for content-understanding purposes, as covered in the original article; screen readers, which allow users to navigate by heading level, as covered in the previous accessibility article) — these "visual headings" don't exist — the page's actual <h1>-<h6> structure might be completely empty, or might consist of just one or two headings, with most of what visually "looks like" the heading hierarchy being invisible, structurally.

The reverse problem: heading tags used purely for styling, regardless of hierarchy

The opposite misuse: using <h1>-<h6> tags because they provide a convenient, pre-styled visual appearance — without regard to whether the resulting hierarchy makes sense — e.g., using <h3> for some text simply because "h3 looks like the right size," without regard to whether there's an <h1> and <h2> appropriately preceding it in the document's structure.

This produces a technically "has heading tags" page — but with a structurally incoherent hierarchy (as covered in the previous accessibility article's discussion of skipped heading levels, multiple <h1>s, etc.) — the presence of heading tags, by itself, doesn't guarantee a meaningful hierarchy — both problems ("visual headings that aren't marked up" and "heading tags used without hierarchical coherence") can, and often do, coexist on the same page.

Why this specifically matters for the previous articles' use cases

For competitive content research (covered in a previous article): extracting "the heading structure" of a competitor's page via heading-extraction tools only sees actual <h1>-<h6> elements — if a competitor's page uses "div soup" for its visual headings — a heading-extraction tool would show a sparse, possibly near-empty heading structure — even if the page, visually, appears to have a rich, well-organized heading hierarchy. This could lead to an incorrect conclusion ("this competitor's page has almost no heading structure — easy to outdo") that doesn't reflect the page's actual, visual organization — though, importantly, it does correctly reflect what search engines/screen readers "see" — meaning, for SEO/accessibility purposes specifically, the heading-extraction tool's "sparse" result is, in a sense, "correct" — it's revealing a genuine structural-SEO/accessibility weakness in the competitor's page, even if that weakness isn't visually apparent.

How to check whether your own visual headings are semantically marked up

Browser developer tools (the "Inspect Element" feature, available in all major browsers) allow viewing the actual underlying HTML — selecting what visually appears to be a heading, and checking the element tag shown in developer tools* — is it <h1>/<h2>/etc.? Or is it a <div>/<p>/<span> with CSS classes providing the visual "heading-like" appearance?

Browser accessibility tools (often integrated into developer tools, or available as browser extensions) can show the "accessibility tree" — a representation of how assistive technology (screen readers) would perceive the page's structure — directly revealing whether visually-apparent "headings" are represented in this tree as headings, or are absent/misrepresented.

For checking the heading hierarchy specifically (this site's tool's core function): running this site's Heading Extractor on your own page and comparing the result against the visual appearance of your page — if the extracted list seems "too short" compared to what the page visually "looks like" it has, for "headings" — this discrepancy itself is the diagnostic signal that "visual headings" and "semantic headings" have diverged on your page.

How to use the Heading Extractor on sadiqbd.com

1. Run it on your own pages and compare the extracted heading list against the page's visual appearance — a significant mismatch (fewer extracted headings than visual "heading-looking" elements) indicates semantic-markup issues worth addressing
2. For competitive research: recognize that a sparse extracted structure for a competitor's page may genuinely reflect a structural SEO/accessibility weakness, even if the page visually appears well-organized — this is valuable, not misleading, information for SEO-focused competitive analysis specifically
3. After fixing semantic markup (changing visual-only "heading-like" elements to actual <h1>-<h6> elements, with appropriate, coherent hierarchy) — re-run the extractor to verify the extracted structure now matches the page's visual organization

Frequently Asked Questions

If I change a <div> styled as a heading to an actual <h2>, will it change how the page looks? Not necessarily — <h1>-<h6> elements have default browser styling (specific font sizes/weights/margins, which vary by browser and heading level) — but CSS can override these defaults completely — if your existing <div>'s visual styling is defined via CSS classes (rather than relying on any element-type-specific default styling) — changing the underlying element from <div> to <h2>, while keeping the same CSS classes applied — should produce the same visual appearance, while adding the semantic meaning that was previously missing. The visual change (if any) and the semantic change are independent — you can, generally, fix the semantic issue without affecting the visual appearance, by ensuring CSS styling is applied via classes/selectors that don't depend on the specific element type.

Is the Heading Extractor free? Yes — completely free, no sign-up required.

Try the Heading Extractor free at sadiqbd.com — extract the actual semantic heading structure of any page, and compare it to its visual appearance.