DEV Community

Cover image for 10 Common HTML Mistakes People Make (and How to Fix Them)
Chukwunonso Joseph Ofodile
Chukwunonso Joseph Ofodile

Posted on

10 Common HTML Mistakes People Make (and How to Fix Them)

#frontend #programming #javascript #html

When learning HTML, it’s natural to make mistakes, after all, it’s the foundation of web development and the first step for every beginner. While HTML is simple to pick up, writing clean and professional code requires knowing what not to do.

These common mistakes can break your layout, slow down your site, harm SEO, or make your website inaccessible to users. The good news? They’re easy to fix once you know what to look for.

In this article, we’ll go through the most common HTML mistakes beginners make and show you exactly how to fix them with correct examples.

Want to learn HTML5 in just 7days? Grab this book that will teach you HTML5 in just 7days, Click here to get yours

1. Forgetting to Close Tags

One of the simplest but most frequent mistakes is leaving tags unclosed.

❌ Wrong:

<p>This is a paragraph
Enter fullscreen mode Exit fullscreen mode

Browsers sometimes auto-correct this, but it can cause layout issues.

✅ Correct:

<p>This is a paragraph</p>
Enter fullscreen mode Exit fullscreen mode

Always make sure you close every tag properly.

2. Using Inline Styles Instead of CSS

New developers often use inline styles directly in HTML, but this makes code messy and hard to maintain.

❌ Wrong:

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

✅ Correct:

<p class="greeting">Hello</p>
Enter fullscreen mode Exit fullscreen mode

Then css file

.

greeting{
  color : red;
  Font-size :10px;
}
Enter fullscreen mode Exit fullscreen mode

Use CSS classes for reusable and clean styling.

3. Not Adding Alt Text to Images

Images without alt attributes hurt accessibility and SEO.

❌ Wrong:

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

✅ Correct:

<img src="dog.jpg" alt="A brown dog playing in the park">
Enter fullscreen mode Exit fullscreen mode

Alt text helps search engines understand images and assists visually impaired users.

4. Nesting Elements Incorrectly

Incorrect nesting creates invalid HTML and can break your page.

❌ Wrong:

<p><h2>Welcome</h2></p>
Enter fullscreen mode Exit fullscreen mode

✅ Correct:

<h2>Welcome</h2>
<p>This is the intro text.</p>
Enter fullscreen mode Exit fullscreen mode

Remember: certain elements (like headings) cannot go inside paragraphs.

5. Overusing
Tags for Spacing

Beginners often add multiple
tags to create space, but this is bad practice.

❌ Wrong:

<p>Hello<br><br><br>World</p>
Enter fullscreen mode Exit fullscreen mode

✅ Correct:

<p class="spaced">Hello</p><p>World</p>
Enter fullscreen mode Exit fullscreen mode

Then CSS file

.spaced { 
   margin-bottom: 30px;
}
Enter fullscreen mode Exit fullscreen mode

Use CSS margins and padding for spacing instead.

Want to learn HTML5 in just 7days? Grab this book that will teach you HTML5 in just 7days, Click here to get yours

6. Forgetting the Doctype Declaration

Without a doctype, browsers may switch to “quirks mode” and display your page incorrectly.

✅ Always start with:

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>...</body>
</html>
Enter fullscreen mode Exit fullscreen mode

This tells the browser to use the latest HTML standard.

  1. Overusing Instead of Semantic Tags

    Some beginners wrap everything in

    elements, but HTML5 provides semantic tags for better structure.

    ❌ Wrong:

    <div id="header"></div>
<div id="footer"></div>

    ✅ Correct:

    <header>...</header>
<footer>...</footer>

    Semantic tags improve readability, SEO, and accessibility.

    8. Incorrectly Linking CSS and JavaScript

    Another beginner error is linking external files incorrectly.

    ❌ Wrong:

    <link>style.css</link><script>app.js</script>

    ✅ Correct:

    <link rel="stylesheet" href="style.css">
<script src="app.js"></script>

    Always use the correct attributes (rel, href, src).

    9. Forgetting Meta Tags for Mobile Responsiveness

    Without the right meta tag, your site may look broken on mobile devices.

    ✅ Add this inside

    : 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    This ensures your site scales properly on different screen sizes.

    10. Mixing Up IDs and Classes

    Many beginners use IDs for styling everything, but IDs should only be used for unique elements, while classes are for reusable styles.

    ✅ Example:

    <div id="navbar"></div>
<button class="btn">Click Me</button>

    Use IDs for one-of-a-kind elements and classes for styling multiple elements.

    Conclusion

    Learning HTML is an exciting journey, but small mistakes can make your site look unprofessional or even break it completely. By avoiding these common errors and writing clean, semantic code, you’ll create websites that are:

    • Easier to maintain

    • More accessible

    • Better optimized for SEO

    • Professional and future-proof

    Mastering HTML isn’t just about knowing the tags—it’s about using them correctly. Fix these mistakes early, and you’ll be building stronger, cleaner websites in no time. Want to learn HTML5 in just 7days? Grab this book that will teach you HTML5 in just 7days, Click here to get yours

Top comments (0)