How to Fix Every HTML Checker Error

The HTML Checker validates your markup against W3C standards and reports every error and warning a browser, screen reader or crawler might trip on — invalid tags, missing doctype, encoding mismatches, deprecated elements, unclosed elements, missing accessibility attributes and broken ARIA roles. This index covers exactly how to fix each category, with code examples for common templates.

New here?

Start with the HTML Checker Guide for what gets validated and why, the example report to see real findings, or the beginner tutorial for the basics.

By error type

Validation errors fall into these categories. Click through for the fix walk-through:

📄 Fix missing or wrong doctype LIVE

Every HTML5 page must start with <!DOCTYPE html> as the very first line. No whitespace before it, no BOM, no comments. Browsers fall back to quirks mode without it, which breaks CSS layouts unpredictably.

🔤 Fix character encoding errors LIVE

Mismatched <meta charset> declarations, missing UTF-8 BOM in templates, server Content-Type header conflicting with the meta tag. How to standardise on UTF-8 everywhere and audit existing files for hidden encoding drift.

🏷️ Fix unclosed and mismatched tags LIVE

Forgotten </div>, <li> outside <ul>, <p> wrapping a <div>. The patterns that look fine in a browser but blow up screen-reader navigation and crawler parsing.

⚠️ Fix deprecated HTML4 elements LIVE

Replace <font>, <center>, <marquee>, presentational attributes like bgcolor, align, border with CSS. Legacy code modernisation strategy for inherited sites.

🆔 Fix duplicate id attributes LIVE

IDs must be unique per document. Duplicates break anchor links, JavaScript getElementById, ARIA aria-labelledby references and screen-reader navigation. How to audit and resolve at scale.

♿ Fix invalid ARIA roles and attributes LIVE

Wrong role values, aria-labelledby pointing at non-existent IDs, redundant ARIA on native semantic elements. The "no ARIA is better than bad ARIA" rule and when to apply it.

🌍 Fix missing or wrong lang attribute LIVE

Every <html> needs a valid lang attribute (en, en-GB, fr etc.). Without it, screen readers may pronounce content wrong and Google may misinterpret language targeting.

📝 Fix form-related HTML errors LIVE

Inputs without <label> association, missing name attributes, <button> without explicit type, autocomplete attribute mistakes that hurt accessibility and conversion.

By platform

How the fixes are applied depends on where your HTML is generated:

📰 Fix HTML errors in WordPress PLANNED

Theme template fixes, plugin output that injects bad markup, the Gutenberg block validation issues, and how to override theme markup without losing changes on update.

🛒 Fix HTML errors in Shopify PLANNED

Liquid template patterns, theme app embeds that inject invalid markup, the duplicate ID problem from looped product cards, and the cases Shopify will not let you fix.

⚛️ Fix HTML errors in React / Next.js PLANNED

JSX-to-HTML edge cases, hydration mismatches that emit broken markup, the className vs class gotcha, fragment patterns, and SSR vs CSR rendering inconsistencies.

🎨 Fix HTML errors in static-site generators PLANNED

Hugo, Jekyll, Eleventy, Astro: template inheritance issues, partials that leak unclosed tags, Markdown-to-HTML conversion edge cases.

What our HTML Checker validates

The HTML Checker runs your markup through a W3C-equivalent validator and reports every error, warning and accessibility concern. It checks doctype, encoding, tag nesting, deprecated elements, ARIA attributes, form semantics and language targeting. For the complete reference, see the HTML Checker Guide or view a sample validation report.

🌐 Validate first

Before you fix anything, run the checker against your live URL and get the complete error list. Most sites have 3-4 systemic issues that repeat across pages — fixing those in the template clears the bulk.

Run HTML Checker →