1. Missing alt Attribute on Images
Every <img> element must have an alt attribute. Screen readers use it to describe images to visually impaired users. Search engines use it to understand image content. Missing alt text is the most common accessibility violation on the web.
<img src="hero.jpg">
<img src="hero.jpg" alt="Mountain landscape at sunset">
For decorative images that add no meaning, use an empty alt: alt="".
2. Unclosed Tags
Forgetting to close a tag is one of the easiest mistakes to make and one of the hardest to debug visually. An unclosed <div> can shift your entire layout. An unclosed <p> can swallow content that follows it.
<div class="card"> <p>Some content </div>
<div class="card"> <p>Some content</p> </div>
Pro tip: our validator shows the exact line number where the unclosed tag starts, making it easy to trace.
3. Deprecated Elements
Elements like <center>, <font>, and <marquee> were removed from the HTML specification years ago. They still work in most browsers, but they signal outdated code and can cause issues with modern rendering engines.
<center> <font size="5" color="red">Hello</font> </center>
<div style="text-align: center;"> <span style="font-size: 1.25rem; color: red;">Hello</span> </div>
4. Missing DOCTYPE Declaration
Without <!DOCTYPE html>at the top of your document, browsers enter "quirks mode" — a legacy rendering mode where box sizing, margins, and other CSS rules behave differently. This is a common cause of "it looks fine on my machine" bugs.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
5. Missing lang Attribute
The lang attribute on the <html>element tells browsers and screen readers what language the page is in. Without it, screen readers may use the wrong pronunciation, and browser translation features won't work correctly.
<html> ...
<html lang="en"> ...
6. Duplicate IDs
The id attribute must be unique within a page. Duplicate IDs break document.getElementById(), cause issues with anchor links, confuse screen readers, and can make your CSS target the wrong element.
<div id="header">...</div> <div id="header">...</div>
<div id="site-header">...</div> <div id="page-header">...</div>
7. Incorrect Nesting
HTML has rules about which elements can be nested inside others. A <p> cannot contain a <div>. A <span> cannot contain a <p>. Browsers auto-correct invalid nesting silently, often producing unexpected results.
<p> <div>This breaks the paragraph</div> </p>
<div> <p>This is a paragraph</p> <div>This is a separate block</div> </div>
8. Missing Viewport Meta Tag
Without the viewport meta tag, mobile browsers render the page at desktop width and then scale it down, making everything tiny. This is the #1 cause of "my site isn't responsive" issues. Google also uses mobile-first indexing, so a missing viewport tag directly impacts your SEO.
<meta name="viewport" content="width=device-width, initial-scale=1">
9. Empty Headings
Headings (<h1> through <h6>) define the document structure. Empty headings confuse screen readers and provide no SEO value. They often appear when a heading is styled with CSS but contains no text.
<h2 class="section-title"></h2>
<h2 class="section-title">Features</h2>
10. Inline Styles
While not technically an error, heavy use of inline styleattributes is a strong code smell. Inline styles can't be cached, can't be reused, increase HTML size, and make maintenance harder. Our validator flags them as warnings to encourage using external CSS.
<p style="color: red; font-size: 18px; margin-top: 20px;">Text</p>
<p class="error-message">Text</p>
/* In your CSS */
.error-message { color: red; font-size: 18px; margin-top: 20px; }Check Your HTML Now
Paste your code or enter a URL to find and fix these errors instantly.
Open HTML Validator