Markup & a11y checks

Semantic HTML Linter

Paste any HTML snippet or full page and get an instant structural lint report — missing alt text, heading skips, unlabeled fields, fake buttons and more.

🔒 Parsed locally — nothing is sent anywhere.

Paste some HTML above and click "Lint HTML" to see findings here.

Real rule engine

Checks alt text, heading order, labels, fake buttons and ARIA misuse against your actual markup tree.

Instant results

DOMParser runs entirely in your browser, so results appear the moment you click Lint.

🔍

Severity-tagged

Every finding is labeled error, warning or info so you know what to fix first.

How to use the semantic HTML linter

Catch common accessibility and structure problems before they ship.

  1. Paste your HTMLPaste a component, a page fragment or a full document with <html> and <head> tags.
  2. Click Lint HTMLYour markup is parsed locally with DOMParser and checked against a fixed rule set.
  3. Fix what's flaggedEach finding shows its severity, a plain-English explanation and the offending snippet.

What this linter checks

This tool focuses on structural and accessibility problems that can be detected from markup alone, without executing any script or loading any stylesheet.

Text alternatives

Images without an alt attribute, and links or buttons with no accessible name at all, are both flagged as errors since they block screen reader users entirely.

Heading structure

Skipped heading levels (like jumping from an h2 straight to an h4) and multiple h1 elements make it harder for assistive technology users to build a mental outline of the page.

Real controls vs. fake ones

A div or span with role="button" or a tabindex can look interactive but usually misses keyboard behavior, focus styles and other things a real button or link gets for free.

Form labeling

Every input, select and textarea needs a programmatically associated label, whether through a for/id pair or by wrapping the control in a <label>.

Semantic HTML linter FAQ

Questions about how the checks work and what they can and can't catch.

How does this linter analyze my HTML?

It parses your pasted markup locally using the browser's built-in DOMParser, then walks the resulting document checking a fixed set of structural and accessibility rules. No JavaScript in your snippet is executed and nothing is sent to a server.

Does it check colour contrast or run JavaScript?

No. This tool only inspects markup structure: tags, attributes and text content. It cannot evaluate rendered colour contrast, layout or any behaviour that depends on executing scripts or loading stylesheets.

What counts as a missing accessible name on a link or button?

The linter checks, in order, aria-label, aria-labelledby, the title attribute, visible text content and the alt text of a contained image. If none of those produce any text, the control is flagged as having no accessible name.

Why does it only flag a missing lang attribute sometimes?

The lang check only applies when you paste a full document that includes an <html> tag. A pasted fragment (like a single component) has no <html> element to check, so that rule is skipped for fragments.

What is the div/span usage ratio for?

It is an informational statistic, not a strict pass/fail rule. A very high ratio of generic div and span elements compared to semantic elements (like article, nav, button or heading tags) often signals markup that could better describe its own structure and meaning.