HTML Validation

Introduction

Browsers are forgiving: they often render broken HTML by guessing what you meant. That tolerance keeps the web working, but it can hide mistakes. HTML validation catches missing tags, duplicate IDs, invalid nesting, bad attributes, and other problems before they become accessibility, SEO, or styling bugs.

Prerequisites

• Browser DevTools for HTML
• Basic HTML syntax from HTML syntax basics
• A page you can validate

Why Validate HTML?

Validation helps you catch:

• missing closing tags
• invalid nesting
• duplicate id values
• misspelled attributes
• obsolete elements and attributes
• malformed metadata
• inaccessible form patterns (some tools)

Browsers may still display invalid HTML, but the DOM they build may not match what you intended.

W3C Markup Validation Service

The classic validator is the W3C Markup Validation Service.

You can validate by:

• public URL
• file upload
• direct HTML input

For a local file:

1. Open the validator.
2. Choose Validate by Direct Input.
3. Paste your full HTML document.
4. Review errors and warnings.

Validation is strict and sometimes verbose. Focus on real errors first.

Common Error: Missing Closing Tags

Bad:

<article>
  <h1>News</h1>
  <p>First paragraph.
  <p>Second paragraph.</p>
</article>

Better:

<article>
  <h1>News</h1>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</article>

Some closing tags are optional in HTML, but writing them explicitly keeps your intent clear.

Common Error: Invalid Nesting

Bad:

<p>
  Here is a list:
  <ul>
    <li>Item</li>
  </ul>
</p>

Better:

<p>Here is a list:</p>
<ul>
  <li>Item</li>
</ul>

<p> cannot contain a full list. The browser closes the paragraph automatically before the list, which may produce a DOM you did not expect.

Common Error: Duplicate IDs

Bad:

<h2 id="intro">Introduction</h2>
<section id="intro">
  <p>Duplicate IDs are invalid.</p>
</section>

Better:

<h2 id="intro">Introduction</h2>
<section id="overview">
  <p>Each ID is unique.</p>
</section>

IDs are used by:

• fragment links (#intro)
• labels (for)
• ARIA references (aria-describedby)
• JavaScript (getElementById)

Duplicate IDs create unpredictable behavior.

Common Error: Missing Required Attributes

Images need alt:

<!-- Avoid -->
<img src="chart.png">

Better:

<img src="chart.png" alt="Line chart showing revenue increasing each quarter">

For decorative images:

<img src="divider.svg" alt="">

Form labels need matching IDs:

<label for="email">Email</label>
<input id="email" name="email" type="email">

Common Error: Obsolete Markup

Avoid presentational old tags:

<!-- Avoid -->
<center>Welcome</center>
<font color="red">Important</font>

Use semantic HTML and CSS:

<h1 class="page-title">Welcome</h1>
<p class="warning">Important</p>

Appearance belongs in CSS.

Validator Warnings vs Errors

Validators may report:

Not every warning is fatal. For learning, fix all errors and understand warnings gradually.

Formatters and Linters

Validation checks correctness. Formatting checks readability.

Tools:

• Prettier — formats HTML consistently
• HTMLHint — lints HTML rules
• Editor diagnostics — basic syntax warnings
• Framework build checks — Next.js/Vite/templating errors

Example workflow:

1. Format with Prettier on save.
2. Validate important pages.
3. Run project build.
4. Test in browser with DevTools.

Browser Recovery Can Mislead You

Input:

<table>
  <p>This paragraph is inside a table.</p>
  <tr>
    <td>Cell</td>
  </tr>
</table>

The browser may move the paragraph outside the table. DevTools shows the repaired DOM, not your original intent.

If DevTools DOM looks surprising, check View Source and run validation.

Team Habits

In a team, agree on:

• lowercase tags and attributes
• quoted attribute values
• semantic elements where meaningful
• no duplicate IDs
• labels for form controls
• alt policy for images
• formatting on save

Small rules prevent large cleanup later.

Mini Exercise

Create a broken file with:

Paste it into the W3C validator, fix every error, and compare the final DOM in DevTools.

FAQ

If the page looks fine, do I still need validation?

For practice and important public pages, yes. The browser may be repairing mistakes invisibly.

Does valid HTML guarantee accessibility?

No. Valid HTML is a baseline. You can write valid markup with poor labels, bad link text, or confusing structure.

Does valid HTML guarantee SEO?

No. It helps crawlers parse the page, but content quality, links, performance, and relevance still matter.

Should I validate every generated page manually?

No. Validate representative templates and use automated tests or build checks for large sites.

What comes next?

HTML performance basics — reduce waste in markup, images, scripts, and resource loading.