← Back to Validate Your Pages
Lesson

Validating Your Web Page

Browsers try hard to display broken HTML — which means your mistakes stay hidden until something breaks. A validator is a free spell-checker for your code. This lesson shows what it checks, how to read the results, and how to fix the most common errors.

Step 1

What does “valid” mean — and why bother?

HTML has rules: tags must be closed, nested correctly, and spelled right. Validating means running your page through a tool that checks it against those official rules and reports anything wrong. Browsers guess at broken code, so a page can look fine and still be quietly buggy.

Fewer bugs

Catch broken markup before it causes weird layout glitches across browsers.

Accessibility

Many validator errors (missing alt, labels) are also accessibility problems.

SEO & sharing

Search engines and link previews rely on clean, well-formed markup.

Easier fixes

The validator points to the exact line, so debugging takes minutes, not hours.

Step 2

The two official validators

They're free, made by the W3C (the people who write the web standards), and need no account.

HTML Validator

Checks your HTML structure — tags, nesting, attributes, required elements.

validator.w3.org

CSS Validator

Checks your CSS for invalid properties, values, and typos.

jigsaw.w3.org/css-validator
Step 3

Three ways to feed it your page

However your page lives, there's a tab for it:

1
By URL

Paste a live web address (e.g. your GitHub Pages link). Best once it's published.

2
By file upload

Upload an .html file straight from your computer.

3
By direct input

Paste your code into a box. Perfect while you're still building locally.

Working locally and not deployed yet? Use direct input (validator.w3.org/nu) — copy your whole file, paste, check.
Step 4

Reading the results

The validator returns a list. Each item is an error (must fix — breaks the rules), a warning (should look at — risky but allowed), or info. Every line tells you where and what. Press “Re-check” below to see what fixing them looks like.

validator.w3.org/nu — checking index.html
3 errors, 1 warning
Error
End tag </p> seen, but there were open elements.
Line 12, column 5
Error
An img element must have an alt attribute.
Line 18, column 3
Error
Duplicate ID main.
Line 24, column 9
Warning
Consider adding a lang attribute to the html element.
Line 2, column 1
Document checking completed.
No errors or warnings to show. 🎉 Your page follows the rules — ship it with confidence.
Fix errors first, top to bottom. One real mistake (like a missing closing tag) often causes several error lines at once — fixing it clears the whole cluster, so re-check after each fix.
Step 5

The five most common errors — and the fix

1. Unclosed tag

Error
<p>Welcome to my site
<p>Second paragraph</p>
Fixed
<p>Welcome to my site</p>
<p>Second paragraph</p>

2. Image missing alt

Error
<img src="logo.png">
Fixed
<img src="logo.png" alt="Our logo">

3. Duplicate id (each id must be unique)

Error
<div id="main">…</div>
<div id="main">…</div>
Fixed
<div id="main">…</div>
<div id="sidebar">…</div>

4. Wrongly nested / crossed tags

Error
<b><i>Bold italic</b></i>
Fixed
<b><i>Bold italic</i></b>

5. Missing <!DOCTYPE html> or charset

Error
<html>
<head>
  <title>My Page</title>
Fixed
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
Step 6

Make validating a habit, not a last step

Validate as you build, not just before you submit. The loop is simple:

Write
→
Validate
→
Fix
→
Repeat
Catch issues even earlier: VS Code underlines many errors as you type, and editor extensions can flag them live — so most problems never reach the validator at all. See Validate Your Pages for the VS Code setup.
Step 7

Pre-submit checklist

Where next

Keep going