Get Started

Validate your web pages

"It looks fine in my browser" isn't the same as "it's correct." Validation checks your HTML and CSS against the official rules and flags mistakes browsers quietly hide — so your pages work everywhere, for everyone.

New to validating? Read the visual lesson

Why

Why validate?

Browsers are forgiving — they'll guess what you meant when your HTML is broken. That guess is different in every browser, which is how a page that looks perfect for you breaks for someone else. A validator catches those problems before anyone sees them.

Catch hidden bugs

Unclosed tags, duplicate IDs, and typos that "work" for you but break elsewhere.

Better accessibility

Missing alt text and bad structure hurt screen-reader users — the validator flags many of these.

Better SEO

Search engines reward clean, well-structured markup. Valid pages are easier for them to read.

You learn faster

Each clear error message teaches you the correct way to write the markup. It's free tutoring.

The tools

The two official W3C validators

The W3C (the group that writes the web standards) runs free validators. There's one for HTML and a separate one for CSS — both completely free, no account needed.

HTML Validator

validator.w3.org

Checks your HTML structure — tags, nesting, attributes, and required pieces like alt and lang.

Open HTML validator

CSS Validator

jigsaw.w3.org/css-validator

Checks your CSS — misspelled properties, invalid values, and syntax slips like a missing ; or }.

Open CSS validator
How to

Three ways to validate

Every validator gives you the same three options. Pick whichever fits where your page lives right now.

  1. By URL — your page is already online (e.g. on Netlify or GitHub Pages)? Paste its web address and hit Check.
  2. By file upload — choose the .html file from your computer and upload it.
  3. By direct input — copy your code and paste it straight into the box. Fastest while you're still building.
Validate the HTML first. A broken tag can cause CSS errors that vanish the moment the HTML is fixed — so clear the HTML validator before chasing CSS issues.
Reading results

Errors vs. warnings

The validator returns a list of messages. Each tells you the line number and what's wrong. Two kinds matter:

Error — something is actually wrong and must be fixed.
e.g. End tag </div> seen, but there were open elements.
Warning — not broken, but worth a look (a style or best-practice nudge).
"Document checking completed. No errors or warnings to show." — the goal. 🎉

Common errors & what they mean

Unclosed element — you opened a tag (<div>) but never closed it. Add the matching </div>.
Missing alt attribute — every <img> needs alt="…" describing it (or alt="" if decorative).
Duplicate ID — the same id is used twice. IDs must be unique; use a class instead.
Stray end tag — a closing tag with no opener, often from deleting half a pair. Remove it or add the opener.
In your editor

Validate without leaving VS Code

Going to a website every time is slow. The W3C Web Validator extension (by Celian Riboulet) runs the same checks right inside your editor. Here's how to use it, step by step.

Install it (once)

  1. Open the Extensions panel — ⌘ Shift X (Mac) / Ctrl Shift X (Windows), or click the four-squares icon in the sidebar.
  2. Search W3C Web Validator and confirm the publisher is Celian Riboulet.
  3. Click the blue Install button. (Full walkthrough: VS Code Setup, Step 2.)

Run it on a page

  1. Open the .html file you want to check (it must be the active editor tab).
  2. Open the Command Palette — ⌘ Shift P / Ctrl Shift P.
  3. Type validate and choose the W3C Web Validator: Validate command, then press Enter.
  4. It sends your markup to the W3C and brings the results back into VS Code.

Read & fix the results

  1. Open the Problems panel — ⌘ Shift M / Ctrl Shift M (or View → Problems).
  2. Errors and warnings are listed with their line numbers; squiggly underlines also appear in your code.
  3. Click a problem to jump straight to that line, then fix it.
  4. Run the validate command again. Repeat until the list is empty — zero errors. 🎉
Tip: the extension checks HTML. For CSS, paste your stylesheet into the CSS validator above — or keep the editor and browser side by side.
Habits

Make it a habit

Do

  • Validate before you submit or publish
  • Fix HTML errors first, then CSS
  • Read the message and the line number
  • Aim for "No errors" — then a clean conscience
  • Re-validate after big changes

Don't

  • Assume "looks fine in my browser" means correct
  • Ignore errors because the page still renders
  • Fix only the first error and stop — one cause can spawn many
  • Panic at warnings — read them, then decide
  • Wait until launch day to validate
Next: when your pages are valid and ready, ship them with GitHub or Netlify Deploy, and run the final Accessibility and launch checklist.