🏆 Module 18 · Professional Dev🟡 IntermediateLESSON 59
Code Validation
Course progress89%
🎯 What you'll learn: The W3C Markup Validator (Nu HTML Checker), how to read and fix its error reports, and adding validation to a CI pipeline.
Section 1
Why Validate?
As the previous lesson mentioned, browsers silently forgive invalid HTML — which means bugs like an unclosed tag or a duplicate id can sit unnoticed for years. A validator checks your markup against the official HTML specification and reports every violation explicitly.
Section 2
The Nu HTML Checker
The W3C's modern validator (validator.w3.org/nu) accepts a URL, an uploaded file, or pasted markup, and reports errors and warnings with line numbers.
validator-error.html
Error Example
Error: Duplicate ID "header". Line 24, Column 12 Error: End tag </div> seen, but there were open elements. Line 41, Column 1
| Common error | Typical fix |
|---|---|
| Duplicate id | ids must be unique per page — rename or use a class instead |
| Unclosed tag | Add the missing closing tag |
| Element not allowed here | Move it into a valid parent, e.g. li must be inside ul/ol |
| Missing alt attribute | Add alt="" or descriptive alt text to the image |
Section 3
Validation in CI
On a real project, you can run an HTML validator automatically on every commit or pull request — catching markup errors before they ever reach production, the same way linters catch JavaScript issues.
💡
Validation isn't the same as "it looks fine"
A page can look perfectly correct visually while still having invalid markup underneath — the two are independent checks, and validation catches issues that visual inspection never will.
🧩 Knowledge Check — Lesson 59
5 questions to test your understanding.
1. Why do HTML validation errors often go unnoticed for years?
2. What does the Nu HTML Checker accept as input?
3. What's the typical fix for a "duplicate ID" error?
4. What's the benefit of validating HTML in a CI pipeline?
5. Can a page look visually correct while still failing validation?
Coding Challenge — Lesson 59
Apply what you learned · Intermediate Level
Challenge: Find and Fix Validation Errors
Given a snippet with two elements sharing id="box" and a <li> placed directly inside a <div> (not a ul/ol), rewrite it so ids are unique and the li lives inside a proper ul.
Given a snippet with two elements sharing id="box" and a <li> placed directly inside a <div> (not a ul/ol), rewrite it so ids are unique and the li lives inside a proper ul.
💡 Show hints if you're stuck
- Rename the second id, e.g. box-1 and box-2, and wrap the li in ul.
Finished this lesson?
Mark it complete to track your progress.
Lesson 59 of 62Module 18 — Professional Development