HTML and CSS Validators - Pyramid Quality Control

The browser is very forgiving: when you forget an attribute or make a typo in a CSS property name, it shows no error at all and quietly tries to guess what you meant. The page "sort of works" - until, in another browser or in a screen reader, it falls apart like badly fitted blocks. The pharaohs of Egypt did not build pyramids without plans and quality control. Every block had to be perfectly fitted. In web development, the role of "quality inspector" is played by validators - tools that check code correctness.

W3C Markup Validator

W3C Markup Validation Service (validator.w3.org) is the official W3C tool for checking HTML code correctness. You can use it in three ways:

• Validate by URI - enter a website address
• Validate by File Upload - upload an HTML file from disk
• Validate by Direct Input - paste HTML code directly

Checking always goes the same way: you go to validator.w3.org, provide an address, a file or pasted code, click the Check button, and then analyze the results and fix the errors from the top of the list - one error can trigger several more. The validator divides its messages into errors (Error), warnings (Warning) and information (Info). Always fix the errors, and read the rest carefully.

Typical errors caught by the validator:

The most common error is an image without alternative text. The HTML specification requires an alt attribute on <img>, so the validator reports when it is missing:

1<!-- ERROR: Missing alt attribute on img -->
2<img src="pyramid.jpg">
3
4<!-- CORRECT: -->
5<img src="pyramid.jpg" alt="The Great Pyramid of Giza">

The fix adds only the attribute - the image, its address and the look of the page do not change. <img> is a void element: it has no closing tag, so you end it with a plain >. A slash before the bracket is allowed but changes nothing, and the validator shows only an info message about it.

The second example is an unclosed paragraph. There is an interesting trap here - take a look at the code:

1<!-- BAD: Unclosed tag -->
2<p>Paragraph text
3<p>Another paragraph</p>
4
5<!-- CORRECT: -->
6<p>Paragraph text</p>
7<p>Another paragraph</p>

The HTML specification allows you to omit </p> when another <p> or a block element such as a <div> starts right after the paragraph. The validator will not report this particular case, and the browser closes the paragraph by itself - but you lose control over where it ends. An unclosed <div> or <strong> is caught by the validator ("Unclosed element" message), so close every tag explicitly - that is what I recommend.

The third error is easy to miss in a long file: the same identifier used twice. The id attribute must be unique in the whole document:

1<!-- ERROR: Duplicate ID -->
2<div id="header">Header</div>
3<div id="header">Another header</div>
4
5<!-- CORRECT: -->
6<div id="header">Header</div>
7<div id="subheader">Another header</div>

This is not cosmetic: <label for>, anchors with # and aria-describedby point to an element by its id, so with a duplicate they hit the first matching element. A class may repeat, an identifier never.

Remember also that the validator checks conformance with the HTML specification, not accessibility. An <input> without a label is valid to it - you will catch such a problem with Lighthouse or axe, which you met in the accessibility module.

W3C CSS Validator

A similar tool exists for CSS (jigsaw.w3.org/css-validator/). It checks:

• CSS syntax correctness
• Errors in property names
• Invalid values

Look at two classic errors - a typo in a property name and a value that CSS does not understand:

1/* ERROR: Invalid property */
2h1 {
3  colr: red;     /* should be: color */
4}
5
6/* ERROR: Invalid value */
7p {
8  font-size: big;  /* should be e.g. 16px, 1rem */
9}
10
11/* CORRECT: */
12h1 {
13  color: #8b6914;
14  font-size: 2rem;
15}

The browser shows no message here - it simply ignores both declarations, and you are left wondering why the heading is not red. In DevTools, in the Styles tab, such a declaration is crossed out and marked with a warning icon, and the CSS validator points to it with a line number.

DevTools as a Validator

Chrome DevTools also shows code errors:

• Console panel - displays JavaScript errors and warnings
• Elements panel - highlights problematic elements
• Issues panel - collects warnings, for example about form fields without an associated label
• Lighthouse - comprehensive page audit

A good practice is to run validation after every major code change - just as ancient architects checked every new level of the pyramid. Always validate before publishing: a page without validation errors is one of the requirements of this module's final project.

Practice

In the editor below you will find a page that passes W3C validation. Paste its code into the validator, then deliberately remove one alt and see what changes:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>HTML and CSS Validation</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>HTML and CSS Validation</h1>
11
12    <section>
13        <h2>Valid HTML Code</h2>
14        <p>The following code passed W3C validation:</p>
15
16        <article>
17            <h3>Valid structure</h3>
18            <img src="https://placehold.co/300x200/d4af37/1a1a2e?text=Pyramid"
19                 alt="The Great Pyramid of Giza at sunset"
20                 width="300" height="200">
21            <p>Image with the attribute <code>alt</code> and dimensions.</p>
22        </article>
23
24        <article>
25            <h3>Valid form</h3>
26            <form>
27                <label for="name">Name:</label>
28                <input type="text" id="name" name="name">
29
30                <label for="email">Email:</label>
31                <input type="email" id="email" name="email">
32            </form>
33        </article>
34    </section>
35
36    <section>
37        <h2>Common errors to avoid</h2>
38        <ul>
39            <li>Missing attribute <code>alt</code> on images</li>
40            <li>Unclosed HTML tags</li>
41            <li>Duplicate attributes <code>id</code></li>
42            <li>Block elements inside inline</li>
43            <li>Missing <code>&lt;!DOCTYPE html&gt;</code></li>
44        </ul>
45    </section>
46</body>
47</html>

Remember: the validator is the site overseer who walks around the pyramid with a measuring rod - the sooner it points out a crooked block, the less you will have to take apart.