Last updated
Common HTML Validation Errors and Fixes
The HTML Validator catches syntax errors, accessibility issues, and standards violations. Here are the most common errors with their fixes:
<!-- Error 1: Unclosed tag -->
<!-- Invalid -->
<p>Some text
<p>Another paragraph
<!-- Valid -->
<p>Some text</p>
<p>Another paragraph</p>
</div>
<!-- Error 2: Block element inside inline element -->
<!-- Invalid -->
<span>
<div>Content</div>
</span>
<!-- Valid -->
<div>
<span>Content</span>
</div>
<!-- Error 3: Missing required attribute -->
<!-- Invalid -->
<img src="photo.jpg">
<!-- Valid -->
<img src="photo.jpg" alt="A scenic mountain landscape">Accessibility Validation Errors
The validator checks for accessibility failures that prevent users with disabilities from using your pages:
<!-- Error: Form input without label -->
<!-- Invalid — screen readers cannot identify this field -->
<input type="email" placeholder="Enter your email">
<!-- Valid — label associated via for/id -->
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="Enter your email">
<!-- Also valid — label wrapping the input -->
<label>
Email Address
<input type="email" placeholder="Enter your email">
</label>
<!-- Error: Link with no descriptive text -->
<!-- Invalid — "click here" is meaningless out of context -->
<a href="/docs">Click here</a>
<!-- Valid — descriptive link text -->
<a href="/docs">View the documentation</a>
<!-- Error: Missing language attribute -->
<!-- Invalid -->
<html>
<!-- Valid -->
<html lang="en">
<!-- Error: Image with empty alt on non-decorative image -->
<!-- Invalid for informative images -->
<img src="chart.png" alt="">
<!-- Valid -->
<img src="chart.png" alt="Bar chart showing Q1 revenue by region">Deprecated Elements and Attributes
The validator identifies deprecated HTML features and suggests modern replacements:
<!-- Deprecated elements — avoid these -->
<center>Centered content</center> <!-- use CSS text-align: center -->
<font size="4" color="red">Text</font> <!-- use CSS font-size and color -->
<b>Bold text</b> <!-- use <strong> for semantic bold -->
<i>Italic text</i> <!-- use <em> for semantic italic -->
<marquee>Scrolling text</marquee> <!-- use CSS animations -->
<blink>Blinking text</blink> <!-- no modern equivalent needed -->
<!-- Deprecated attributes -->
<table class="data-table" border="1" cellpadding="5"> <!-- use CSS border and padding -->
<div align="center"> <!-- use CSS text-align -->
<body bgcolor="#ffffff"> <!-- use CSS background-color -->
<img width="100" height="100" border="0"> <!-- border attr deprecated -->
<!-- Modern replacements -->
<p style="text-align: center;">Centered content</p>
<p style="font-size: 1.2em; color: red;">Text</p>
<strong>Bold text</strong>
<em>Italic text</em>
<table class="data-table" style="border-collapse: collapse;">
<tr>
<td style="border: 1px solid #ccc; padding: 5px;">Cell</td>
</tr>
</table>Nesting Validation Errors
Incorrect element nesting causes rendering inconsistencies across browsers:
<!-- Invalid: heading inside paragraph -->
<p>
<h2>This is wrong</h2>
Some text.
</p>
<!-- Valid: heading and paragraph as siblings -->
<h2>This is correct</h2>
<p>Some text.</p>
<!-- Invalid: interactive elements nested -->
<a href="/page">
<button>Click me</button> <!-- button inside anchor is invalid -->
</a>
<!-- Valid: use one or the other -->
<a href="/page">Visit page</a>
<!-- or -->
<button onclick="location.href='/page'">Click me</button>
<!-- Invalid: list item outside list -->
<li>Orphaned list item</li>
<!-- Valid: list items must be inside ul or ol -->
<ul>
<li>Properly nested item</li>
</ul>Meta Tag Validation
The validator checks for missing or incorrect meta tags that affect SEO and functionality:
<!-- Missing critical meta tags — validator will flag these -->
<head>
<title>My Page</title>
<!-- Missing: charset declaration -->
<!-- Missing: viewport meta tag -->
<!-- Missing: description -->
</head>
<!-- Complete, valid head section -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A concise page description under 160 characters.">
<title>My Page | Site Name</title>
</head>
<!-- Invalid meta tag values -->
<meta name="viewport" content="width=device-width, initial-scale=2.0">
<!-- initial-scale should be 1.0 for correct mobile rendering -->
<meta http-equiv="Content-Type" content="text/html">
<!-- Missing charset in content — should be text/html; charset=UTF-8 -->
<!-- Or better: use <meta charset="UTF-8"> instead -->Validation in CI/CD Pipeline
Integrate HTML validation into your build process to catch errors automatically:
/* Using html-validate npm package */
npm install --save-dev html-validate
/* .htmlvalidate.json configuration */
{
"extends": ["html-validate:recommended"],
"rules": {
"require-sri": "warn",
"no-deprecated-attr": "error",
"aria-label-misuse": "error",
"img-req-alt": "error",
"input-missing-label": "error"
}
}
/* package.json script */
{
"scripts": {
"validate:html": "html-validate 'src/**/*.html'"
}
}
/* GitHub Actions workflow */
- name: Validate HTML
run: npx html-validate 'dist/**/*.html'
/* Example validation output */
src/index.html
12:5 error <img> is missing required "alt" attribute img-req-alt
24:3 error <input> is missing associated <label> input-missing-label
31:1 warn Element <center> is deprecated no-deprecated-attr
3 problems (2 errors, 1 warning)