HTML Checker Example: Structure, Headings and Tag Issues
This example shows the aiwebpageseo HTML Checker for a landing page. The report validates HTML document structure, heading hierarchy, image alt text, meta tags and structured data — finding 2 errors and 4 warnings across 70+ checks with specific line-level fix guidance.
6 images missing alt text
6 <img> elements have no alt attribute. Images without alt text are invisible to screen readers and lose image search ranking potential. Fix: Add descriptive alt text to each image. For decorative images use alt="" to indicate they can be safely skipped.
Heading hierarchy skips H2 → H4
The page jumps from H2 to H4 in two places, skipping H3. This breaks document structure for screen readers and weakens the page outline for crawlers. Fix: Change the H4 elements to H3, or add H3 headings between the H2 and H4.
Title too long — 68 chars (target 50–60)
Your title will be truncated in SERPs. Shorten to under 60 characters keeping the primary keyword at the start: "SaaS Pricing Plans — ExampleApp" is 33 chars and clear.
Meta description too short — 94 chars (target 150–160)
66 characters unused. Expand your description to include secondary keywords and a specific call to action: "Compare ExampleApp plans from £9/month. 14-day free trial, no credit card required. Start today."
2 external links missing rel="noopener noreferrer"
External links opening in a new tab (<a target="_blank">) historically exposed a security vulnerability called reverse tabnabbing, in which the opened page could reach back through window.opener and redirect the original tab. Modern browsers now imply rel="noopener" on target="_blank" by default, so the hole is largely closed — adding it explicitly is still worthwhile for older browsers, but it is not urgent. Note that noreferrer is a different thing: it strips the referrer header, so the site you link to cannot see the traffic came from you and records it as direct. Use rel="noopener" alone unless you have a specific reason to hide the referrer.
No schema markup detected
No JSON-LD structured data found. Adding SoftwareApplication schema with pricing information would enable rich results and improve AI citation probability.
The H2 → H4 skip is worth fixing. But be clear about why, because the usual justification is overstated and it leads people to spend time on the wrong thing.
Google is tolerant of heading order. It has said repeatedly that a skipped level is not a ranking problem — it reads the content, and a page with a stray H4 is not penalised. If you were expecting a position change from renumbering two headings, you will not get one.
The real cost is to screen reader users, and it is substantial. Assistive technology exposes a headings list — the "rotor" on VoiceOver, the elements list in NVDA — and blind users navigate long pages by jumping through it, exactly as a sighted reader skims. A broken hierarchy makes that list nonsense: an H4 under an H2 implies a missing intermediate section, so the reader is left hunting for content that does not exist. This is a genuine usability failure for real people and it costs you five minutes to fix.
Headings are structure, not styling
The commonest cause of a skipped level is somebody choosing an H4 because it looked the right size. Choose the heading level that reflects the document's structure, then set the size in CSS. If your H3 is too large, change the CSS — do not change the tag.
The report passes this page on "Single H1 heading", and the advice attached to the check is worth examining, because it is one of the most durable myths in SEO.
Google has stated plainly that multiple H1 elements are fine. They do not confuse it, they do not split relevance, and they are not a ranking problem. The HTML5 specification explicitly permits an H1 inside each sectioning element. Sites with several H1s rank perfectly well and always have.
So why does every audit tool flag it? Because a page with six H1s is usually a page nobody thought about — the plural H1 is a symptom, not a disease. It generally means headings were picked for size rather than structure, and that same carelessness usually produced the skipped levels and the missing alt text.
What actually matters: that the page has one clear, obvious main topic, stated at the top, in a heading. Whether the markup for that is a single H1 or a well-structured document with several is a question of craft, not of ranking. And the H1 has one job worth knowing about: when Google decides your title tag is unsuitable, it usually rewrites it from your H1. That is the H1's real leverage on search, and it has nothing to do with how many of them there are.
Six images with no alt attribute is a real defect and adding the attribute is trivial. Two things the checker cannot see, and both matter more than the count:
alt="" is correct — and different from omitting it
An empty alt is a deliberate, valid declaration that an image is decorative and should be skipped by assistive technology. Omitting the attribute leaves a screen reader to announce the filename instead. So a decorative divider should carry alt="" — and writing "decorative divider" as its alt text is worse than an empty one, because it forces someone to listen to it on every page. The report's own guidance says this; it is the part people skip.
Describe what the image conveys, in context
Not what it depicts. The same screenshot on a pricing page and in a tutorial needs different alt text, because it is doing a different job. And keyword-stuffed alt text is both an accessibility failure — it is read aloud, to a person — and, at scale, a spam signal. Write it for the human who is listening. An automated checker will pass alt="saas pricing plans software cheap best" without comment.
rel="noopener noreferrer": half of this warning has expiredThe security vulnerability described — reverse tabnabbing, where a page opened via target="_blank" could reach back through window.opener and redirect the original tab to a phishing page — was real and serious.
Modern browsers now imply rel="noopener" on target="_blank" by default. Chrome, Firefox and Safari all made this change some years ago. The attack is largely closed in current browsers, and adding noopener explicitly is now belt-and-braces rather than a fix for a live hole. Still worth adding — it costs nothing and it protects users on old browsers — but it does not warrant urgency.
noreferrer is not the same thing, and it has a cost
The two are bundled together in every code snippet on the internet, and they do different jobs. noopener closes the security hole. noreferrer strips the referrer header — so the site you linked to cannot see that the traffic came from you. Their analytics record it as direct.
If you are linking to a partner, a client, a publication you want to build a relationship with, or anywhere you would like credit for the traffic, noreferrer is actively working against you. Use rel="noopener" alone unless you have a specific reason to hide the referrer. This is a genuine, common, self-inflicted loss, and it happens because two attributes got glued together in a snippet everybody copies.
✓ lang="en" attribute set
Present and valid — and probably wrong for a UK business. lang="en-GB" tells a screen reader to use British pronunciation and tells Google which regional variant of English this is. A bare en passes every check and conveys less than it could. It costs one edit.
✓ Viewport meta tag present
"Present" is what was checked. What it says was not. A viewport containing user-scalable=no or maximum-scale=1 prevents pinch-zoom — which is a WCAG failure and a serious usability problem for anyone with low vision. It is depressingly common, it was copied from a 2014 tutorial, and it passes a presence check without comment. Look at the actual value, not the tick.
✓ UTF-8 charset declared
One condition the check may not test: the charset declaration must appear within the first 1024 bytes of the document. Push it below a large block of inline script or a pile of meta tags and the browser will have started guessing before it reaches your instruction. Put <meta charset="utf-8"> immediately after <head>, always.
Adding SoftwareApplication schema with pricing to a SaaS pricing page is sound advice. Two honest qualifications before you spend a day on it:
- Eligibility is a permission, not a promise. Correct markup makes a page eligible for an enhancement. Google decides per query, per device, whether to show one — and it withholds enhancements from pages it does not trust, however immaculate the JSON-LD. Perfect schema on a weak page earns nothing, and that is working as intended.
- Every marked-up value must be visible on the page. This is absolute. A price in the schema that differs from the price displayed, or a rating with no reviews anyone can read, is a violation of Google's structured data policies — and the penalty is a manual action that suppresses rich results across the entire site until it is fixed and appealed. Schema describes a page. It does not create facts about it.
And a broader point about this report: HTML validity and SEO are only loosely related. Browsers are extremely forgiving, and most validation errors — an unquoted attribute, a stray closing tag — have no effect on ranking whatsoever. The structural errors that do matter are the ones that break content extraction: unclosed tags that swallow subsequent content, mis-nested elements that put your article inside a <head>. Chasing a perfect validator score is not an SEO strategy. Fixing the two errors above is.
What does the HTML Checker validate?
The aiwebpageseo HTML Checker validates DOCTYPE declaration, html and lang attributes, head and body structure, title tag length and content, meta description length, viewport tag, charset declaration, H1 presence and uniqueness, heading hierarchy, image alt text, canonical tag, Open Graph tags, Twitter Card tags, schema markup detection, render-blocking resources, external links and accessibility landmarks.
Why does heading hierarchy matter for SEO?
Heading hierarchy (H1 to H2 to H3 in order, never skipping levels) helps search engines understand your content structure and helps screen readers navigate the page. Skipping from H1 directly to H3 breaks the hierarchy, confusing both crawlers and assistive technologies.
How many H1 tags should a page have?
One clear main heading is good practice, but the strict one-H1 rule is folklore. Google has stated plainly that multiple H1 elements are fine — they do not confuse it, do not split relevance, and are not a ranking problem — and the HTML5 specification permits an H1 inside each sectioning element. A page with six H1s is usually a page nobody thought about, so the plural H1 is a symptom rather than a disease. What matters is that the page has one obvious main topic, stated at the top, in a heading. Note also that when Google judges your title tag unsuitable it usually rewrites it from the H1 — that is the H1's real leverage on search.
Do I really need to fix a skipped heading level?
Yes, but for accessibility rather than ranking. Google is tolerant of heading order and a skipped level is not a ranking problem, so do not expect a position change from renumbering two headings. The real cost falls on screen reader users, who navigate long pages by jumping through the headings list — an H4 under an H2 implies a missing section, leaving them hunting for content that does not exist. Choose the level that reflects the structure and set the size in CSS.
Should I add both noopener and noreferrer to external links?
They do different jobs and are bundled together in every snippet on the internet. noopener closes the reverse-tabnabbing security hole — though modern browsers now imply it on target="_blank" anyway, so it is belt-and-braces rather than urgent. noreferrer strips the referrer header, meaning the site you linked to cannot see the traffic came from you and records it as direct. If you are linking to a partner or a publication you want credit with, noreferrer works against you. Use rel="noopener" alone unless you have a specific reason to hide the referrer.
My viewport tag passed. Is that enough?
The check tested that it is present, not what it says. A viewport containing user-scalable=no or maximum-scale=1 prevents pinch-zoom, which is a WCAG failure and a serious problem for anyone with low vision. It is common, it was copied from an old tutorial, and it passes a presence check without comment. Read the value, not the tick. Similarly, lang="en" is valid but lang="en-GB" says more — regional pronunciation for screen readers, and the English variant for Google.
Will fixing every HTML validation error improve my rankings?
Mostly no. Browsers are extremely forgiving and most validation errors — an unquoted attribute, a stray closing tag — have no effect on ranking at all. The structural errors that matter are the ones that break content extraction: unclosed tags that swallow the content after them, or mis-nesting that puts your article somewhere a parser will not look for it. Chasing a perfect validator score is not a strategy; fixing the errors that change what a parser sees is.
Related Demo Reports
Run HTML Checker on Your Own Site
Get your real audit report with specific issues, fixes and actionable improvements — free to start.