How to check HTML for errors

Short answer

Open the W3C validator at validator.w3.org, choose the tab for a page address, a file upload or pasted code, and press Check. It lists every error with its line number:

Error: End tag "p" implied, but there were open elements.
From line 12, column 1; to line 12, column 4

CSS has its own validator: jigsaw.w3.org/css-validator.

Why bother if the page looks fine

The browser shows no HTML errors — it silently completes the markup by its own rules. Because of that, the error shows up somewhere else. Here the closing </b> is missing, and all the text below has become bold:

<p>Price: <b>$25</p>
<p>Free delivery</p>
<p>Returns within 30 days</p>

Different browsers and screen readers may "repair" such markup differently, so finding the cause from the look of the page is hard.

How to read the messages

• Error — a violation of the standard: an unclosed tag, a <div> inside a <span>, a repeated id, an <img> without alt.
• Warning — a hint, not an error: for example, a <section> without a heading.

Fix them from top to bottom: one unclosed wrapper causes a dozen errors below, and after fixing the first one they often disappear.

Checking right in the editor

To avoid submitting the page every time, install a linter extension in your editor, for example HTMLHint: it underlines errors as you type. The browser developer tools (F12, the Elements tab) show the tree the browser actually built.

Common mistake

Checking only the source file when part of the markup is added by JavaScript or a template engine. The validator sees only what it is given. Check the final page: template output is visible in "View page source", and the markup after JavaScript can be copied in the developer tools (right-click <html> → Copy → Copy outerHTML) and pasted into the validator.