Valid HTML markupWhat it checks and how to fix it

What it checks

Runs the rendered HTML through the Nu HTML Checker (the W3C validator), ignoring a few known false positives for modern CSS such as @container, @property and color(display-p3 ...) colors. No errors or warnings passes; warnings only, or 1 to 2 errors, is a warning; 3 or more errors fails.

Why it matters

Browsers repair invalid markup silently, but each one repairs it differently, so unclosed tags, duplicate IDs and misnested elements can break layouts, scripts and assistive technology in one browser and not another. Duplicate IDs in particular break label associations and ARIA references. Valid HTML is also the baseline that search engines and accessibility tools assume.

How to fix it

Paste the page URL into the Nu HTML Checker and fix the reported errors, top to bottom (one early error often causes several later ones).

Common errors and their fixes:

<!-- Duplicate id: every id must be unique on the page -->
<div id="hero">...</div>
<div id="hero-2">...</div>

<!-- Block element inside an inline one -->
<span><div>...</div></span>   <!-- wrong -->
<div><span>...</span></div>   <!-- right -->

<!-- Missing alt on an image -->
<img src="/logo.svg" alt="Acme">

<!-- Stray end tag or unclosed element: make tags pair up -->
<ul><li>One</li><li>Two</li></ul>

Add a validator step to CI (for example the vnu Docker image or the html-validate npm package) so new errors are caught before deploy.