ModernCalcs

HTML Validator

Check HTML for unclosed/mismatched tags, duplicate IDs, missing alt text, and deprecated elements.

2 warnings
<img> is missing an "alt" attribute — required for accessibility.
Inline event handler "onclick" found — prefer addEventListener in a script instead of inline handlers.

HTML Validator: Find the Mistakes Browsers Silently Fix

Browsers are forgiving — an unclosed

or a duplicate id usually renders fine, so these mistakes hide until they cause a subtle bug in your CSS selectors or JavaScript. This validator parses your HTML strictly, the way a linter would, and surfaces the structural and accessibility issues a browser would otherwise paper over silently.

Formula
Every non-void <tag> needs a matching </tag>, ids must be unique

Void elements (img, br, input, meta, etc.) never need a closing tag.

Why Browser Leniency Hides Bugs

A browser's HTML parser will happily close an unclosed

for you at the end of the document, or silently accept a duplicate id and just return the first match from getElementById. That leniency keeps pages rendering, but it also means structural mistakes can sit undetected for a long time — until a CSS selector or a bit of JavaScript relies on the exact structure you thought you had.

Duplicate IDs Are a Common, Sneaky Bug

IDs are supposed to be unique, but copy-pasting a component (a card, a modal, a form) without updating its internal id attributes is one of the most common ways duplicates creep in. JavaScript's document.getElementById only ever returns the first match, so the bug often manifests as 'my click handler works on the first card but not the second' rather than an obvious error.

Accessibility Checks Are Cheap Wins

A missing alt attribute on an image, or a missing lang attribute on , cost nothing to add but directly affect how screen readers and search engines interpret your page. These are checks worth running on every page, not just ones being explicitly audited for accessibility.

Practical Examples

Catching a Duplicate ID

From a copy-pasted component.

  • 1.
    ...
  • 2.
    ...
  • 3.Error: Duplicate id="card" — id attributes must be unique

Flagging a Missing Alt Attribute

An accessibility gap.

  • 1.
  • 2.Warning: is missing an "alt" attribute

What Gets Checked

  • Unclosed/mismatched tags
  • Duplicate id attributes
  • Missing alt on <img>
  • Missing DOCTYPE and <html lang>
  • Deprecated elements: font, center, marquee, etc.
  • Inline event handlers: onclick, onload, etc.

Good Use Cases

  • Reviewing a static HTML page or email template before shipping
  • Catching a duplicate id after copy-pasting a component
  • Quick accessibility sanity check on images and language attributes
  • Cleaning up legacy markup that uses deprecated tags

Frequently Asked Questions

Why doesn't this just use the browser's built-in HTML parser?

Browsers deliberately auto-correct broken HTML — unclosed tags, wrong nesting — so pages don't blow up when markup is imperfect. That leniency makes the browser's own DOM unusable for catching those exact mistakes, which is why this tool parses HTML strictly instead.

Why does it flag duplicate id attributes?

An id must be unique within a document — CSS selectors, JavaScript's getElementById, and label 'for' attributes all assume exactly one match. A duplicate silently breaks whichever code expects a single unique element.

Why does it warn about inline event handlers like onclick?

Inline handlers mix behavior into markup, make Content-Security-Policy 'unsafe-inline' restrictions necessary, and are harder to test or remove cleanly than an addEventListener call in a script — most modern style guides recommend against them.

What counts as a 'void element'?

Elements that can never have children or a closing tag: area, base, br, col, embed, hr, img, input, link, meta, param, source, track, and wbr. The validator doesn't flag these as unclosed since they're not supposed to be.

Does this check CSS or JavaScript inside the page?

No — it treats