~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/html/16html-validation

# 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:**
1. **By URL** — Enter your website URL
2. **By file upload** — Upload HTML file
3. **By direct input** — Paste HTML code

## Common Errors

### Unclosed Tags

```html

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

<p>This paragraph is closed.</p>
<div>This div is closed.</div>
```

### Missing Required Elements

```html

<html>
  <head>
    <title>Page</title>
  </head>
  <body></body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page</title>
  </head>
  <body></body>
</html>
```

### Improper Nesting

```html

<p><strong>Bold text that's also <em>italic</em></strong></p>

<p><strong>Bold text that's also <em>italic</em></strong></p>
```

### Duplicate Attributes

```html

<div class="container" class="main">Content</div>

<div class="container main">Content</div>
```

### Invalid Attributes

```html

<img src="photo.jpg" alt="Photo" border="5" />

<img src="photo.jpg" alt="Photo" style="border: 5px solid black;" />
```

### Missing Alt Text

```html

<img src="photo.jpg" />

<img src="photo.jpg" alt="A sunset over mountains" />
```

### Inline Styling (Warning)

```html

<div style="color: red; font-size: 16px;">Content</div>

<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:

```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>

## Testing Workflow

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

## Automated Validation

Add validation to your build process:

```javascript
// 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:

```html

<html>
  <head>
    <title>Quirks Mode</title>
  </head>
  <body>
    
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Standards Mode</title>
  </head>
  <body>
    
  </body>
</html>
```

## Best Practices

1. **Always use DOCTYPE** — Triggers standards mode
2. **Validate early and often** — Catch errors quickly
3. **Use semantic HTML** — Reduces validation issues
4. **Test in real browsers** — Validation isn't everything
5. **Use linters** — Catch errors automatically

## Common Mistakes

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

No changes yet

cancel