Why "It Works" Isn't Enough
Browsers are forgiving — they'll often render broken HTML without complaint, silently guessing what you meant. That forgiveness hides mistakes that cause real problems: inconsistent rendering across browsers, accessibility failures, and bugs that are hard to track down later.
- ✓A page that "looks fine" can still contain invalid, unpredictable markup underneath.
- ✓Clean, valid HTML is easier for you, your teammates, and browsers to interpret consistently.
- ✓Good habits now save debugging time later, especially once CSS and JavaScript are layered on top.
Habits Worth Building Now
These aren't strict rules enforced by the browser — they're conventions that keep your code readable and predictable as projects grow.
Write <div> not <DIV> — it's the modern convention and stays consistent with attributes.
Even tags browsers "auto-close," like <p>, should be explicitly closed for clarity.
Nested elements indented by 2 spaces make the document's structure visible at a glance.
Always use double quotes around attribute values, even for single words.
<!-- Messy: inconsistent, hard to scan --> <DIV class=card> <p>Hello </DIV> <!-- Clean: lowercase, closed, quoted, indented --> <div class="card"> <p>Hello</p> </div>
Using the W3C Markup Validator
The W3C Markup Validation Service checks your HTML against the official spec and reports errors and warnings — unclosed tags, invalid nesting, missing required attributes, and more.
Don't panic at a long error list — validators often report one root cause multiple times. Fix the first error, then re-validate; several others frequently disappear with it.
Mistakes the Validator Catches Most
<!-- 1. Unclosed tag --> <p>This paragraph never closes... <!-- 2. Mismatched nesting --> <div><span>Text</div></span> <!-- 3. Missing required attribute --> <img src="photo.jpg"> <!-- 4. Duplicate id on the same page --> <div id="box">...</div> <div id="box">...</div>
Tags must close in the reverse order they opened — like nested parentheses. <div><span>...</span></div> is valid; <div><span>...</div></span> is not, even though it might render without visible errors.
Breaking Down What You Just Learned
Consistent styleLowercase tags, quoted attributes, and clean indentation keep code scannable.
Always close tagsExplicit closing tags prevent ambiguous nesting, even where browsers would guess correctly.
W3C ValidatorA free tool at validator.w3.org that checks markup against the official HTML spec.
Proper nestingTags must close in the reverse order they opened, like nested parentheses.
Unique idsNo two elements on the same page should share an id value.
Try It Yourself
Take any page you've built earlier in this course, paste its code into validator.w3.org, and fix every error it reports until the check comes back clean.
Clean Up and Validate a Messy Page
Finding and fixing real markup errors
Create a new file called day14.html inside your course folder and deliberately practice the full cleanup cycle.
- Start with the full DOCTYPE, html, head, and body structure.
- Build a small page with at least a header, a nav, two images, and a form.
- Introduce one intentional mistake — an unclosed tag, a missing alt, or a duplicate id.
- Paste the page into validator.w3.org and read the exact error it reports.
- Fix the mistake and re-validate until the report shows zero errors.
- Do a final pass to confirm lowercase tags, quoted attributes, and consistent indentation throughout.
Recap
Lowercase tags, quoted attributes, and clean indentation.
Explicit closing tags prevent ambiguous, error-prone markup.
Free tool that checks your HTML against the official spec.
Tags must close in reverse order, and ids must stay unique.
Key Takeaways
- Browsers forgive broken markup, but that doesn't make it correct.
- Lowercase tags, quoted attributes, and consistent indentation aid readability.
- Always close tags explicitly, and nest them in the correct reverse order.
- The W3C Markup Validator at validator.w3.org checks pages for free.
- Fix the first reported error first — later errors often resolve alongside it.