HTML and CSS Validators - Pyramid Quality Control

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

Typical errors caught by the validator:

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">
6
7<!-- ERROR: Unclosed tag -->
8<p>Paragraph text
9<p>Another paragraph</p>
10
11<!-- CORRECT: -->
12<p>Paragraph text</p>
13<p>Another paragraph</p>
14
15<!-- ERROR: Duplicate ID -->
16<div id="header">Header</div>
17<div id="header">Another header</div>
18
19<!-- CORRECT: -->
20<div id="header">Header</div>
21<div id="subheader">Another header</div>

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

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}

DevTools as a Validator

Chrome DevTools also shows code errors:

• Console panel - displays JavaScript errors and warnings
• Elements panel - highlights problematic elements
• 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.