Validating Your Page

After this lesson you can

• Check a page with the W3C Nu HTML Checker and read its messages
• Fix the common mistakes the validator reports

Key takeaways

• Browsers guess their way around mistakes in HTML without telling you. A validator checks the page against HTML's rules and lists every mistake.
• The W3C Nu HTML Checker (validator.w3.org/nu) checks a page by its address, by uploading the file, or by pasting the HTML.
• An error breaks HTML's rules and must be fixed; a warning is advice worth reading. Each message gives the line and column to look at.
• The mistakes you'll see most are an unclosed element, a stray end tag, a duplicate id, a picture with no alt and tags nested in the wrong order.
• Fix the first error first and check again: one mistake often causes several messages.

Your page looks fine in your browser. Then a friend opens it on their phone and the footer is in the wrong place, a screen reader skips your pictures, or a style you wrote doesn't apply to one paragraph. Often the cause is a small mistake in the HTML that your browser covered up without saying a word.

A validator finds those mistakes for you, the way a spell checker finds typos. You'll use it before you hand in a class assignment (many graders run it first), before you put a page online, and any time a page behaves strangely and you can't see why. Every exercise in this course runs a validator in its checks too.

The browser forgives; the validator tells you

When a browser reads HTML and finds a mistake, such as a tag that's never closed, it doesn't stop and complain. It guesses what you meant and carries on. A mistake the browser has to guess its way around is called a parse error (to parse is to read something and work out its structure).

Being forgiving is good for visitors: a page with mistakes still shows. It's bad for you, because the guess might not be what you meant, a different browser might guess differently, and nobody tells you. Here the <strong> is never closed. The browser closes it for you at the end of the first paragraph, then quietly wraps a new one around the paragraphs after it, so they all show in bold:

<p>Doors open at <strong>6:30.</p>
<p>The first round starts at 7.</p>
<p>Teams of up to six.</p>

Checking a page against HTML's rules is called HTML validation, and the tool that does it is a validator (its formal name is an HTML conformance checker).

The W3C Nu HTML Checker

The validator most people use is free, made by the W3C (the group that looks after web standards) and called the Nu HTML Checker. It lives at https://validator.w3.org/nu/. Choose what to check under Check by:

1. address: type the web address of a page that's online, such as your GitHub Pages site.
2. file upload: choose an index.html file on your computer.
3. text input: paste HTML into the box. This is the quickest way to check a page you're working on, or one piece of it.

Then press Check. A page with no problems says The document validates according to the specified schema(s). A page with problems lists them, each in its own box.

Try it. Open your trivia-night page in VS Code, select everything with Ctrl+A (Cmd+A on a Mac), copy it, and paste it into the checker with Check by set to text input. Press Check and read what it says.

Reading a message

Each message has three parts: what kind it is, what's wrong, and where.

Error: Unclosed element “strong”.
From line 13, column 18; to line 13, column 25

• Error means the HTML breaks a rule. Fix every error.
• Warning is advice: the HTML is allowed, but something is probably not what you meant, such as Consider adding a “lang” attribute to the “html” start tag to declare the language of this document. Read every warning; most are worth fixing.
• Line 13, column 18 is where to look: the 13th line of your file, 18 characters in. VS Code shows the line number on the left of every line, and Ctrl+G (Ctrl+G on a Mac too) jumps to a line by its number.

Under the message, the checker shows the few characters around the problem, with the mistake highlighted.

Five mistakes you'll see most

This page has five of the most common mistakes in it. It still shows in a browser, which is the point: you'd never know.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Trivia Night at Slice of Heaven</title>
</head>
<body>
  <h1 id="rounds">Trivia Night</h1>
  <img src="trophy.png">
  <p id="rounds">Three rounds: movies, science and geography.</p>
  <p>Doors open at <strong><em>6:30 p.m.</strong></em></p>
  <p>Bring a pen.</p>
  </div>
  <section>
    <h2>Prizes</h2>
    <p>The winners get a <mark>free large pizza.</p>
  </section>
</body>
</html>

Wrong nesting has a second form: an element inside a parent it isn't allowed in, such as a <p> straight inside a <ul> (Element “p” not allowed as child of element “ul” in this context.). Inside a list, every item goes in an <li>.

Try it. Paste the page above into the checker and match each message to a row of the table. Then fix the mistakes one at a time, checking again after each, until it validates.

Fix the first error first

One mistake can cause several messages. A single unclosed <strong> can give four: the element isn't closed, and then the </p>, the </main> and the </body> after it each report open elements, because the checker is still inside the <strong>.

So work from the top. Fix the first error, check again, and look at the new list. Often the next few messages have gone with it. When the list says the document validates, you're done, and you know your page means what you think it means.

Check yourself

2 questions to try on the lesson page.

So what

The browser hides your HTML mistakes; the validator shows them, with a line number for each. Running it takes a minute, and it's the quickest way to stop guessing why a page looks wrong.

Key terms

• HTML validation
• HTML conformance checker
• Parse error

Cheat sheets

• Validating Your Page

Related

• Developer Tools: Inspecting a Page