Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Validation Examples</title>
</head>
<body>
<div class="container">
<h1>✅ Valid vs ❌ Invalid HTML</h1>
<!-- Example 1: DOCTYPE -->
<div class="comparison">
<div class="example-card invalid">
<h3>❌ Missing DOCTYPE</h3>
<div class="code-block">
<span class="error-tag"><html></span>
<head>
<title>Page</title>
</head>
<body>
Content
</body>
</html>
</div>
<div class="issue-list">
<ul>
<li>Triggers quirks mode in browsers</li>
<li>Inconsistent rendering</li>
<li>Modern CSS features may not work</li>
</ul>
</div>
</div>
<div class="example-card valid">
<h3>✅ Proper DOCTYPE</h3>
<div class="code-block">
<span class="success-tag"><!DOCTYPE html></span>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page</title>
</head>
<body>
Content
</body>
</html>
</div>
<div class="issue-list">
<ul>
<li>Triggers standards mode</li>
<li>Consistent rendering across browsers</li>
<li>All modern features work correctly</li>
</ul>
</div>
</div>
</div>
<!-- Example 2: Nested Tags -->
<div class="comparison">
<div class="example-card invalid">
<h3>❌ Improper Nesting</h3>
<div class="code-block">
<span class="error-tag"><p>This is <strong>bold</p></strong></span>
<span class="error-tag"><a href="#"><div>Link</div></a></span>
<span class="error-tag"><ul><div>Item</div></ul></span>
</div>
<div class="issue-list">
<ul>
<li>Tags closed in wrong order</li>
<li>Block elements inside inline elements</li>
<li>Invalid parent-child relationships</li>
</ul>
</div>
</div>
<div class="example-card valid">
<h3>✅ Proper Nesting</h3>
<div class="code-block">
<span class="success-tag"><p>This is <strong>bold</strong></p></span>
<span class="success-tag"><a href="#"><span>Link</span></a></span>
<span class="success-tag"><ul><li>Item</li></ul></span>
</div>
<div class="issue-list">
<ul>
<li>Tags closed in correct order</li>
<li>Proper element hierarchy</li>
<li>Valid parent-child relationships</li>
</ul>
</div>
</div>
</div>
<!-- Example 3: Attributes -->
<div class="comparison">
<div class="example-card invalid">
<h3>❌ Invalid Attributes</h3>
<div class="code-block">
<span class="error-tag"><img src="photo.jpg"></span>
<span class="error-tag"><input type=text></span>
<span class="error-tag"><div onclick='alert("Hi")'></div></span>
</div>
<div class="issue-list">
<ul>
<li>Missing alt attribute</li>
<li>Unquoted attribute values</li>
<li>Inconsistent quote styles</li>
</ul>
</div>
</div>
<div class="example-card valid">
<h3>✅ Valid Attributes</h3>
<div class="code-block">
<span class="success-tag"><img src="photo.jpg" alt="Description"></span>
<span class="success-tag"><input type="text"></span>
<span class="success-tag"><button onclick="handleClick()">Click</button></span>
</div>
<div class="issue-list">
<ul>
<li>All required attributes present</li>
<li>Quoted attribute values</li>
<li>Consistent double quotes</li>
</ul>
</div>
</div>
</div>
<div style="background: #fef3c7; padding: 25px; border-radius: 12px; margin-top: 30px; border-left: 4px solid #f59e0b;">
<h3 style="color: #78350f; margin-bottom: 15px;">🔧 Validation Tools</h3>
<ul style="list-style: none; line-height: 2; color: #92400e;">
<li>✓ W3C Markup Validator (validator.w3.org)</li>
<li>✓ Browser DevTools (Console errors)</li>
<li>✓ HTML Hint (VS Code extension)</li>
<li>✓ ESLint with HTML plugin</li>
</ul>
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Common HTML Validation Errors</title>
</head>
<body>
<div class="container">
<h1>⚠️ Top 10 HTML Validation Errors</h1>
<div class="error-card">
<h3><span style="font-size: 1.5rem;">1️⃣</span> Missing DOCTYPE</h3>
<p style="color: #6b7280; margin-bottom: 10px;">
The page will render in quirks mode without DOCTYPE.
</p>
<div class="code-bad">
<html>
<head>...
</div>
<div class="fix">
<strong>✅ Fix: Add DOCTYPE</strong>
<code><!DOCTYPE html>
<html lang="en"></code>
</div>
</div>
<div class="error-card">
<h3><span style="font-size: 1.5rem;">2️⃣</span> Missing Closing Tags</h3>
<p style="color: #6b7280; margin-bottom: 10px;">
All non-void elements must have closing tags.
</p>
<div class="code-bad">
<p>Paragraph
<div>Content
</div>
<div class="fix">
<strong>✅ Fix: Close all tags</strong>
<code><p>Paragraph</p>
<div>Content</div></code>
</div>
</div>
<div class="error-card">
<h3><span style="font-size: 1.5rem;">3️⃣</span> Duplicate IDs</h3>
<p style="color: #6b7280; margin-bottom: 10px;">
IDs must be unique within the document.
</p>
<div class="code-bad">
<div id="content">...</div>
<div id="content">...</div>
</div>
<div class="fix">
<strong>✅ Fix: Use unique IDs or classes</strong>
<code><div id="content-1">...</div>
<div id="content-2">...</div></code>
</div>
</div>
<div class="error-card">
<h3><span style="font-size: 1.5rem;">4️⃣</span> Missing Alt Attribute</h3>
<p style="color: #6b7280; margin-bottom: 10px;">
All images must have alt attributes for accessibility.
</p>
<div class="code-bad">
<img src="photo.jpg">
</div>
<div class="fix">
<strong>✅ Fix: Add alt attribute</strong>
<code><img src="photo.jpg" alt="Description"></code>
</div>
</div>
<div class="error-card">
<h3><span style="font-size: 1.5rem;">5️⃣</span> Invalid Nesting</h3>
<p style="color: #6b7280; margin-bottom: 10px;">
Block elements inside inline elements are invalid.
</p>
<div class="code-bad">
<a href="#"><div>Link</div></a>
</div>
<div class="fix">
<strong>✅ Fix: Use inline elements or make link block</strong>
<code><a href="#"><span>Link</span></a></code>
</div>
</div>
<div class="error-card">
<h3><span style="font-size: 1.5rem;">6️⃣</span> Obsolete Elements</h3>
<p style="color: #6b7280; margin-bottom: 10px;">
Using deprecated HTML elements.
</p>
<div class="code-bad">
<center>Text</center>
<font color="red">Text</font>
</div>
<div class="fix">
<strong>✅ Fix: Use CSS instead</strong>
<code><div style="text-align: center">Text</div>
<span style="color: red">Text</span></code>
</div>
</div>
<div class="error-card">
<h3><span style="font-size: 1.5rem;">7️⃣</span> Missing lang Attribute</h3>
<p style="color: #6b7280; margin-bottom: 10px;">
The html element should specify the page language.
</p>
<div class="code-bad">
<html>
</div>
<div class="fix">
<strong>✅ Fix: Add lang attribute</strong>
<code><html lang="en"></code>
</div>
</div>
<div class="error-card">
<h3><span style="font-size: 1.5rem;">8️⃣</span> Unescaped Special Characters</h3>
<p style="color: #6b7280; margin-bottom: 10px;">
<, >, & must be escaped in content.
</p>
<div class="code-bad">
<p>5 < 10 & 10 > 5</p>
</div>
<div class="fix">
<strong>✅ Fix: Use HTML entities</strong>
<code><p>5 &lt; 10 &amp; 10 &gt; 5</p></code>
</div>
</div>
</div>
</body>
</html>Loading preview...
Valid HTML renders consistently across all browsers. Invalid HTML may work in one browser but break in another.
Screen readers and assistive technologies rely on valid HTML structure to properly interpret content.
Search engines prefer valid HTML. Validation errors can hurt your search rankings.
Browsers don't need to guess or fix errors, resulting in faster rendering and better performance.
Valid code is easier to debug, update, and maintain. Future developers will thank you!
Standards-compliant HTML works better with new browsers and devices as they're released.
Official HTML validator from W3C. Upload file or validate by URL.
https://validator.w3.org/Check Console tab for HTML errors and warnings
F12 → Console → Look for red errorsVS Code extension that validates HTML as you type
ext install HTMLHint.vscode-htmlhintChrome DevTools audit tool checks HTML best practices
DevTools → Lighthouse → Generate report