HTML Academy · Lesson

The W3C Markup Validator

Find and fix HTML errors with the W3C Markup Validation Service.

The W3C Markup Validator is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What the Validator Checks

The W3C Markup Validator (validator.w3.org) parses HTML against the official specification and reports every spec violation: unclosed tags, invalid nesting (a <p> inside another <p>), missing required attributes (img without alt), unrecognized elements, and many others.

Why Validation Matters

Invalid HTML may render in any browser today, but each browser is free to recover differently — what looks fine in Chrome may break in Firefox. Valid HTML produces predictable, consistent rendering and avoids surprising behavior in screen readers, search crawlers, and email clients.

Three Ways to Submit

Validate by URL (paste the page URL), by file upload, or by direct input (paste HTML). URL is best for production pages; direct input is useful during development when the file is not yet live anywhere.

Reading the Results

Errors list a line number, a snippet of the offending markup, and an explanation. Fix top-down — many errors are cascading consequences of one earlier mistake. After fixing the first few, re-run to see how many warnings remained legitimate.

Warnings vs Errors

Errors are spec violations that may break rendering. Warnings are suspicious patterns that are technically valid but probably unintended (typo-suspicious attribute names, accessibility hints). Treat errors as must-fix and warnings as worth investigating.

Common Errors

Missing alt on img. Unclosed self-closing tag (<br> rather than the legacy <br/> which is also valid). Duplicate id on the page. Form label without a for-attribute matching an input id. Nested interactive elements (a button inside an a). These five account for most validator output.

Validating Templates

If your HTML is generated by templates, validate the final output (the rendered page) rather than the template source. A {{ }} placeholder is not valid HTML — only what the engine produces matters. Run the validator in CI against rendered pages from a test build.

html-validate CLI

For CI integration, use the html-validate npm package: npx html-validate "public/**/*.html" validates every page in a build. Configure rules in .htmlvalidate.json. Use this to fail builds on validation regressions.

Stylelint and Linting at Source

Linting at write-time (stylelint for CSS, eslint-plugin-jsx-a11y for React) catches many issues before they reach the validator. Combine with end-to-end validation in CI for layered defense — catch most issues early, catch the rest before deploy.

What Validation Does NOT Catch

Validation checks markup correctness, not semantics. A page with every heading as <h6> is valid HTML but bad semantics. Lighthouse accessibility audits and manual review catch semantic issues that the validator does not.

Quirks Mode Warning

Missing <!doctype html> triggers Quirks Mode — browsers use a legacy compatibility layer that breaks modern CSS. The validator flags missing doctype as the first error; never deploy a page without the doctype declaration.

Continuous Validation

Run validation on every PR via GitHub Actions: install html-validate, run it against the built site, fail the PR if errors are present. New errors get caught at review time instead of accumulating over months and becoming overwhelming to fix retroactively.

Knowledge Check

Why does a missing <!doctype html> declaration matter so much to the W3C validator?

Summary

The W3C Markup Validator parses HTML against the spec and reports invalid markup. Use it via web UI for one-off checks and via html-validate CLI in CI for continuous coverage. Common issues: missing alt, duplicate ids, missing doctype, nested interactive elements. Validation catches markup errors; pair with Lighthouse and manual review for semantic and accessibility quality.

Frequently asked questions

Is the “The W3C Markup Validator” lesson free?

Yes — the full text of “The W3C Markup Validator” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “The W3C Markup Validator”?

Find and fix HTML errors with the W3C Markup Validation Service. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The W3C Markup Validator” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy