When your HTML is valid, it means the code is following the official rules or “standards.” This helps your website work well across different browsers, keeps it accessible for all users, and even gives it an SEO boost.
HTML Validation Tools
The most widely used tool for validation is the W3C Markup Validation Service. It’s simple to use and gives you a report on your HTML’s status.
- Go to https://validator.w3.org/.
- You can either paste your HTML code, upload a file, or enter your site’s URL.
- Click “Check,” and it’ll review your code.
- Look over the results to spot any errors or warnings.
Common HTML Errors and How to Fix Them
Below are some typical issues you might see when validating your code and some tips on how to fix them:
- Unclosed Tags
- Error:
<p>This is a paragraph - Fix:
<p>This is a paragraph</p>
- Error:
- Mismatched Tags
- Error:
<div><p>This is text</div></p> - Fix:
<div><p>This is text</p></div>
- Error:
- Improper Nesting
- Error:
<a><div>Link Text</div></a>(Block elements shouldn’t be inside inline elements like<a>) - Fix:
<a href="#"><span>Link Text</span></a>
- Error:
- Missing Alt Attributes
- Error:
<img src="image.jpg"> - Fix:
<img src="image.jpg" alt="Description of image">
- Error:
- Attribute Value Errors
- Error:
<input type=text> - Fix:
<input type="text">
- Error:
HTML Validation Example Fixes
HTML Code with Some Errors:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Welcome to My Website</h2> <!-- Mismatched tags -->
<p>This is a paragraph <!-- Unclosed tag -->
<img src="example.jpg"> <!-- Missing alt attribute -->
<a href="https://example.com">
<div>Click here for more information</div> <!-- Improper nesting -->
</a>
</body>
</html>And here’s how it should look once corrected:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
<img src="example.jpg" alt="Example image description">
<a href="https://example.com">
<span>Click here for more information</span>
</a>
</body>
</html>