DEV Community

Cover image for How to Fix the 10 Most Common HTML Errors
Theo
Theo

Posted on • Originally published at validatehtml.com

How to Fix the 10 Most Common HTML Errors

#webdev #html #beginners #tutorial

Every HTML validator report has the same usual suspects. Here are the 10 errors I see most often,with the fix for each one.

I built ValidateHTML to catch these automatically, but knowing why they matter is just as important as fixing them.

1. Missing alt Attribute on Images

Every <img> needs an alt. Screen readers depend on it. Google Images indexes it. It's the #1 accessibility violation on the web.

❌ Invalid:

<img src="hero.jpg">
Enter fullscreen mode Exit fullscreen mode

✓ Valid:

<img src="hero.jpg" alt="Mountain landscape at sunset">
Enter fullscreen mode Exit fullscreen mode

For decorative images, use alt="".

2. Unclosed Tags

A missing </p> or </div> can shift your entire layout. Browsers auto-close silently,usually wrong.

❌ Invalid:

<div class="card">
  <p>Some content
</div>
Enter fullscreen mode Exit fullscreen mode

✓ Valid:

<div class="card">
  <p>Some content</p>
</div>
Enter fullscreen mode Exit fullscreen mode

3. Deprecated Elements

<center>, <font>, <marquee>,still render, but signal outdated code.

❌ Deprecated:

<center>
  <font size="5" color="red">Hello</font>
</center>
Enter fullscreen mode Exit fullscreen mode

✓ Modern:

<div style="text-align: center">
  <span style="font-size: 1.25rem; color: red;">Hello</span>
</div>
Enter fullscreen mode Exit fullscreen mode

4. Missing DOCTYPE

Without <!DOCTYPE html>, browsers enter quirks mode. Box model, margins, tables,everything behaves differently.

✓ Always start with:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  ...
Enter fullscreen mode Exit fullscreen mode

5. Missing lang Attribute

Screen readers pick the wrong pronunciation. Browser translation breaks. One attribute fixes it.

❌ Missing:

<html>
Enter fullscreen mode Exit fullscreen mode

✓ Correct:

<html lang="en">
Enter fullscreen mode Exit fullscreen mode

6. Duplicate IDs

getElementById() returns the first match only. Anchor links break. Screen readers get confused.

❌ Duplicate:

<div id="header">Site header</div>
<div id="header">Page header</div>
Enter fullscreen mode Exit fullscreen mode

✓ Unique:

<div id="site-header">Site header</div>
<div id="page-header">Page header</div>
Enter fullscreen mode Exit fullscreen mode

7. Incorrect Nesting

<p> can't contain <div>. <span> can't contain <p>. Browsers restructure your DOM silently.

❌ Invalid:

<p>
  <div>This breaks the paragraph</div>
</p>
Enter fullscreen mode Exit fullscreen mode

✓ Correct:

<div>
  <p>Paragraph text</p>
  <div>Block content</div>
</div>
Enter fullscreen mode Exit fullscreen mode

8. Missing Viewport Meta Tag

Without it, mobile browsers render at desktop width. Your responsive CSS doesn't kick in. Google's mobile-first indexing checks for this.

✓ Always include:

<meta name="viewport" content="width=device-width, initial-scale=1">
Enter fullscreen mode Exit fullscreen mode

9. Empty Headings

An <h2></h2> with no text = broken document outline, wasted SEO value, confused screen readers.

❌ Empty:

<h2 class="section-icon"></h2>
Enter fullscreen mode Exit fullscreen mode

✓ With content:

<h2 class="section-icon">Our Features</h2>
Enter fullscreen mode Exit fullscreen mode

10. Excessive Inline Styles

Not invalid HTML, but a strong code smell. Can't be cached, reused, or maintained.

⚠ Avoid:

<p style="color: red; font-size: 18px; margin: 20px 0;">Text</p>
Enter fullscreen mode Exit fullscreen mode

✓ Better:

<p class="error-message">Text</p>
Enter fullscreen mode Exit fullscreen mode 
.error-message {
  color: red;
  font-size: 18px;
  margin: 20px 0;
}
Enter fullscreen mode Exit fullscreen mode

Check Your Code

You can paste your HTML or enter any URL in ValidateHTML,it catches all 10 of these automatically, shows line numbers, and gives you a quality score (0-100 with letter grades).

Free, no login required.

For detailed guides on each error with step-by-step fixes: HTML Errors Guide.

Top comments (1)

Collapse
 
theo_dcrx profile image
Theo •

I built ValidateHTML.com this weekend as a modern alternative to the W3C Validator, with quality scores, severity filters, and PDF export.

I wrote this post because these 10 errors are literally what comes up in 90% of validation reports.

What's the HTML mistake you see most often in code reviews? For me it's definitely missing alt attributes, they're everywhere.