← all guides

Common HTML Mistakes and How to Fix Them

Even experienced developers make HTML mistakes. Most are easy to fix once you know what to look for. Here are the most common issues and how to spot them — paste any of these examples into the editor to see the problem (and the fix) in real time.

1. Unclosed tags

The most common mistake. Forgetting to close a tag causes the browser to guess where it should end — and it often guesses wrong.

<!-- Wrong -->
<p>First paragraph
<p>Second paragraph

<!-- Right -->
<p>First paragraph</p>
<p>Second paragraph</p>

Some tags like <p> and <li> have optional closing tags, but explicit closing is always safer and clearer.

2. Incorrect nesting

Tags must be closed in the reverse order they were opened. Crossing tags produces unpredictable rendering.

<!-- Wrong -->
<strong><em>Bold and italic</strong></em>

<!-- Right -->
<strong><em>Bold and italic</em></strong>

3. Missing alt text on images

The alt attribute describes the image for screen readers and when images fail to load. Leaving it out hurts accessibility and SEO.

<!-- Wrong -->
<img src="cat.jpg">

<!-- Right -->
<img src="cat.jpg" alt="Orange cat sleeping">

4. Using deprecated tags

Tags like <center>, <font>, and <b> (for visual bold) are outdated. Use CSS instead.

<!-- Deprecated -->
<center><font color="red">Warning</font></center>

<!-- Modern -->
<p style="text-align:center; color:red;">
  Warning
</p>

5. Missing the DOCTYPE

Without <!DOCTYPE html>, browsers render in "quirks mode" which can cause unexpected layout behavior. Always include it at the very top of your HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  ...
</body>
</html>

6. Inline styles everywhere

Inline styles work but become unmaintainable fast. Use a <style> block or external stylesheet for anything beyond quick prototyping. The exception: HTML emails, where inline styles are often the only reliable option.

How to catch these mistakes

Open the Editor