🌱BeginnerAdvanced Basics
HTML Validation and Best Practices
Write clean, valid HTML with proper nesting, indentation, and the W3C Validator.
Overview
Valid HTML is HTML that conforms to the HTML5 specification. Browsers are forgiving they will try to display malformed HTML but invalid HTML can cause inconsistent rendering across browsers, accessibility issues, and unexpected JavaScript behavior.
The W3C Markup Validation Service (validator.w3.org) checks your HTML for errors and warnings. Running your pages through it catches common mistakes: unclosed tags, improperly nested elements, missing required attributes, and deprecated elements.
Beyond validation, writing clean HTML means: consistent indentation, meaningful structure, semantic elements, accessible forms, and keeping concerns separated (HTML for structure, CSS for presentation, JS for behavior).
Key Points
- •Use the W3C Validator at validator.w3.org to check your HTML for errors
- •Every opened tag must be closed (void elements like <br> and <img> are self-closing)
- •Tags must be properly nested close inner tags before outer ones
- •Use consistent 2-space indentation to show the document hierarchy
- •Keep HTML, CSS, and JavaScript in separate files (separation of concerns)
- •Prefer lowercase for all tag names and attribute names (HTML5 is case-insensitive, but lowercase is standard)
Examples
Correct vs incorrect nesting
<!-- WRONG: improper nesting -->
<p>Hello <strong>world</p></strong>
<!-- CORRECT: inner tags closed first -->
<p>Hello <strong>world</strong></p>
<!-- WRONG: block inside inline -->
<span><div>Content</div></span>
<!-- CORRECT: inline inside block -->
<div><span>Content</span></div>Missing required attributes common validator errors
<!-- WRONG: missing alt on img -->
<img src="photo.jpg">
<!-- CORRECT -->
<img src="photo.jpg" alt="A mountain landscape">
<!-- WRONG: missing label for input -->
<input type="text" id="name">
<!-- CORRECT -->
<label for="name">Name</label>
<input type="text" id="name" name="name">Clean HTML best practices
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clean HTML Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Page Title</h1>
<nav aria-label="Main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Content here...</p>
</article>
</main>
<footer>
<p>© 2024</p>
</footer>
<script src="app.js" defer></script>
</body>
</html>Common Mistakes
- Unclosed tags missing </div> causes the entire rest of the document to be inside that div
- Duplicate id values validators flag these; they break JS and CSS targeting
- Using deprecated elements: <font>, <center>, <frameset> use CSS instead
Note
Bookmark validator.w3.org and run your pages through it during development. Fixing validation errors early is much easier than debugging rendering issues later.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4