HTML Validation

Validation checks your HTML against official standards. It catches errors that could cause display issues, accessibility problems, or browser quirks.

Why Validate?

Catch errors early — Find mistakes before users do
Cross-browser compatibility — Valid code works everywhere
Accessibility — Valid HTML is often more accessible
SEO benefits — Search engines prefer valid markup
Learning tool — Understand HTML rules better

W3C Validator

The official validator checks your HTML against standards:

Online validator: https://validator.w3.org/

Validation methods:

By URL — Enter your website URL
By file upload — Upload HTML file
By direct input — Paste HTML code

Common Errors

Unclosed Tags

<!-- Bad -->
<p>This paragraph isn't closed.
<div>Neither is this div.</div>

<!-- Good -->
<p>This paragraph is closed.</p>
<div>This div is closed.</div>

Missing Required Elements

<!-- Bad: Missing DOCTYPE -->
<html>
  <head>
    <title>Page</title>
  </head>
  <body></body>
</html>

<!-- Good -->
<!DOCTYPE html>
<html>
  <head>
    <title>Page</title>
  </head>
  <body></body>
</html>

Improper Nesting

<!-- Bad: Tags overlap -->
<p><strong>Bold text that's also <em>italic</em></strong></p>

<!-- Good: Proper nesting -->
<p><strong>Bold text that's also <em>italic</em></strong></p>

Duplicate Attributes

<!-- Bad: Two class attributes -->
<div class="container" class="main">Content</div>

<!-- Good: One class attribute -->
<div class="container main">Content</div>

Invalid Attributes

<!-- Bad: Non-standard attribute -->
<img src="photo.jpg" alt="Photo" border="5" />

<!-- Good: Use CSS for styling -->
<img src="photo.jpg" alt="Photo" style="border: 5px solid black;" />

Missing Alt Text

<!-- Bad: Missing alt attribute -->
<img src="photo.jpg" />

<!-- Good: Always include alt -->
<img src="photo.jpg" alt="A sunset over mountains" />

Inline Styling (Warning)

<!-- Valid but not recommended -->
<div style="color: red; font-size: 16px;">Content</div>

<!-- Better: Use CSS -->
<div class="red-text">Content</div>

Validation Levels

Errors (Must Fix)

Breaks HTML or causes serious issues:

Unclosed tags
Missing required elements
Invalid syntax

Warnings (Should Fix)

Issues that might cause problems:

Deprecated elements
Inline styles
Missing optional attributes

Info (Nice to Know)

Suggestions for improvement:

Better semantic elements
Accessibility improvements
Best practices

Complete Example

Here’s valid, production-ready HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Valid HTML Page</title>
    <meta name="description" content="A valid HTML5 page" />
  </head>
  <body>
    <header>
      <nav aria-label="Main navigation">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h1>Welcome to My Valid Page</h1>

      <article>
        <h2>Article Title</h2>
        <p>This is a valid HTML5 document.</p>

        <figure>
          <img src="photo.jpg" alt="Valid HTML example" width="800" height="600" />
          <figcaption>Figure 1: Valid HTML structure</figcaption>
        </figure>
      </article>

      <section>
        <h2>Contact Form</h2>
        <form action="/submit" method="POST">
          <div>
            <label for="name">Name</label>
            <input type="text" id="name" name="name" required />
          </div>
          <div>
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required />
          </div>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>

    <footer>
      <p>&copy; 2026 My Valid Site</p>
    </footer>
  </body>
</html>

Testing Workflow

Validate during development — Don’t wait until the end
Fix errors first — Errors break functionality
Address warnings — Improve code quality
Test in multiple browsers — Valid code works everywhere
Re-validate after fixes — Ensure no new errors

Automated Validation

Add validation to your build process:

// package.json script
{
  "scripts": {
    "validate": "html-validate src/**/*.html"
  }
}

// Or use in CI/CD
// .github/workflows/validate.yml
name: Validate HTML
on: [push]
jobs:
  validate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm install -g html-validate
      - run: html-validate src/**/*.html

Browser Quirks Mode

Invalid HTML can trigger quirks mode:

<!-- Quirks mode: Missing DOCTYPE -->
<html>
  <head>
    <title>Quirks Mode</title>
  </head>
  <body>
    <!-- Browsers use old rendering rules -->
  </body>
</html>

<!-- Standards mode: Proper DOCTYPE -->
<!DOCTYPE html>
<html>
  <head>
    <title>Standards Mode</title>
  </head>
  <body>
    <!-- Browsers use modern rendering rules -->
  </body>
</html>

Best Practices

Always use DOCTYPE — Triggers standards mode
Validate early and often — Catch errors quickly
Use semantic HTML — Reduces validation issues
Test in real browsers — Validation isn’t everything
Use linters — Catch errors automatically

Common Mistakes

Ignoring validation — Errors accumulate over time
Only validating final product — Late discovery of issues
Over-validating warnings — Focus on errors first
Not testing browser behavior — Validation ≠ browser support
Using deprecated elements — Always use current HTML5