Every developer no matter how experienced made these exact mistakes at some point. Thats genuinely part of learning HTML the fastest way to really internalize the rules is to see what happens when you break them. In this post we are going through the most common HTML mistakes beginners run into with broken code you can actually test followed by the corrected version. Let's get into it.
Mistake 1 Forgetting the DOCTYPE
<!-- Broken -->
<html>
<head><title>My Page</title></head>
<body><p>Hello</p></body>
</html>
<!-- Fixed -->
<!DOCTYPE html>
<html>
<head><title>My Page</title></head>
<body><p>Hello</p></body>
</html>Without <!DOCTYPE html> as the very first line the browser can slip into quirks mode where old inconsistent rendering rules apply. This can cause your layout to behave unpredictably across different browsers. The fix takes two seconds just add that one line at the top of every file.
Mistake 2 Forgetting to Close Tags
<!-- Broken -->
<p>First paragraph.
<p>Second paragraph.
<div>Some content
<!-- Fixed -->
<p>First paragraph.</p>
<p>Second paragraph.</p>
<div>Some content</div>Try building the broken version and inspecting it in your browser many browsers will silently fix this for you by auto closing tags at unpredictable points which can lead to layout issues that are genuinely confusing to debug especially once CSS gets involved. Always close every tag that requires closing.
Mistake 3 Improper Nesting
<!-- Broken -->
<p><strong>Bold text</p></strong>
<!-- Fixed -->
<p><strong>Bold text</strong></p>The rule is simple tags must close in the reverse order they were opened like nested boxes the innermost one has to close first. Test both versions in your browser the broken one may still render bold text but the underlying structure is invalid and can cause real problems once you add CSS or JavaScript that depends on predictable nesting.
Mistake 4: Using Multiple <h1> Tags
<!-- Broken -->
<h1>Welcome to My Site</h1>
<h1>About Me</h1>
<h1>My Projects</h1>
<!-- Fixed -->
<h1>Welcome to My Site</h1>
<h2>About Me</h2>
<h2>My Projects</h2>A page should have exactly one <h1> representing its single main topic. Using multiple <h1> tags confuses the documents outline for both search engines and assistive technology use <h2> for top-level sections beneath it instead.
Mistake 5: Skipping Heading Levels
<!-- Broken -->
<h1>My Blog</h1>
<h4>Recent Posts</h4>
<!-- Fixed -->
<h1>My Blog</h1>
<h2>Recent Posts</h2>Beginners often skip straight from <h1> to <h4> because they wanted smaller looking text not because the content structure actually called for a fourth level heading. Choose heading levels based on document structure and control font size separately with CSS.
Mistake 6: Missing Alt Text on Images
<!-- Broken -->
<img src="team.jpg">
<!-- Fixed -->
<img src="team.jpg" alt="Our five-person marketing team at the annual retreat">Missing alt text means screen reader users get nothing useful when they reach that image and if the image fails to load sighted users just see a broken icon with no explanation. Always add specific descriptive alt text or an intentionally empty alt="" for purely decorative images.
Mistake 7: Links with No href or Vague Text
<!-- Broken -->
<a>Click here</a> to learn more.
<!-- Fixed -->
<a href="learn-more.html">Learn more about our services</a>.A link with no href is not functional at all it will not be clickable. And even when the href is present vague text like click here tells users and search engines nothing about the destination. Always include a working href and descriptive link text.
Mistake 8: Using <br> Instead of Real Paragraphs
<!-- Broken -->
<p>First idea.<br><br>Second idea.<br><br>Third idea.</p>
<!-- Fixed -->
<p>First idea.</p>
<p>Second idea.</p>
<p>Third idea.</p>Stacking <br> tags to fake paragraph spacing might look similar visually but its semantically incorrect. Screen readers and search engines treat a wall of text broken with line breaks very differently from properly separated paragraphs.
Mistake 9 Putting Visible Content Inside <head>
<!-- Broken -->
<head>
<title>My Page</title>
<p>Welcome to my website!</p>
</head>
<!-- Fixed -->
<head>
<title>My Page</title>
</head>
<body>
<p>Welcome to my website!</p>
</body>The <head> section is exclusively for metadata title meta tags and linked stylesheets. Any content meant to actually be seen by the user belongs inside <body> never inside <head>.
Mistake 10 Duplicate IDs on the Same Page
<!-- Broken -->
<div id="section">First section</div>
<div id="section">Second section</div>
<!-- Fixed -->
<div id="section-one">First section</div>
<div id="section-two">Second section</div>An id must be unique within a page its meant to identify exactly one specific element. Using the same id twice causes real problems with CSS styling JavaScript targeting and jump to section links since only the first matching element will reliably work as expected.
Mistake 11 Mismatched colspan/rowspan Math in Tables
<!-- Broken -->
<table>
<tr><th colspan="3">Order Summary</th></tr>
<tr><td>Item</td><td>Price</td></tr>
</table>
<!-- Fixed -->
<table>
<tr><th colspan="2">Order Summary</th></tr>
<tr><td>Item</td><td>Price</td></tr>
</table>If a header spans 3 columns but the rows underneath only add up to 2 cells the table layout will misalign visually. Always double-check your column math whenever using colspan or rowspan.
Mistake 12: Missing name Attributes on Form Inputs
<!-- Broken -->
<input type="text" id="email">
<!-- Fixed -->
<input type="text" id="email" name="email">Without a name attribute an inputs value simply will not be included when the form is submitted even though the field looks completely normal on the page. This is a sneaky bug because everything appears to work fine visually while quietly failing behind the scenes.
Mistake 13: Relying on Placeholder Text Instead of Labels
<!-- Broken -->
<input type="text" name="phone" placeholder="Phone Number">
<!-- Fixed -->
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone">Placeholder text disappears the moment a user starts typing, and it is not reliably read by every screen reader. Always pair form fields with a proper visible <label> connected via matching for and id attributes.
Mistake 14 Overusing <div> for Everything
<!-- Broken -->
<div>Main Heading</div>
<div>Some paragraph text here.</div>
<div><div>Click me</div></div>
<!-- Fixed -->
<h1>Main Heading</h1>
<p>Some paragraph text here.</p>
<button>Click me</button>Wrapping everything in <div> tags even headings paragraphs and buttons that have proper dedicated tags, loses meaning that browsers screen readers and search engines depend on. Always reach for the tag that actually matches what the content is rather than defaulting to a generic container.
Mistake 15: Using Reserved Characters Without Entities
<!-- Broken -->
<p>5 < 10 and 10 > 5</p>
<!-- Fixed -->
<p>5 < 10 and 10 > 5</p>Typing < or > directly as text can confuse the browsers parser since these characters normally signal the start or end of a tag. Use the < and > entities whenever you genuinely want these symbols to display as visible text as we covered back in post 14.
Mistake 16: Broken Relative File Paths
<!-- Broken (assuming the image is actually in an "images" subfolder) -->
<img src="photo.jpg" alt="Team photo">
<!-- Fixed -->
<img src="images/photo.jpg" alt="Team photo">A very common beginner frustration is an image or link that just won't show up and the cause is almost always a mismatched file path wrong folder wrong filename or wrong capitalization which matters on some servers even if it does not on your own computer. Whenever something is not loading the file path is the very first thing to check.
Mistake 17 Forgetting the Viewport Meta Tag
<!-- Broken -->
<head>
<meta charset="UTF-8">
<title>My Site</title>
</head>
<!-- Fixed -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Site</title>
</head>Without this tag your page will appear tiny and zoomed out on mobile devices since the browser assumes a desktop width layout by default. This is such a common oversight that its genuinely worth double checking on every single project you build.
Mistake 18 Inconsistent or Careless Indentation
<!-- Hard to read -->
<div>
<p>Text</p>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<!-- Clean and consistent -->
<div>
<p>Text</p>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</div>This will not break your page functionally, but messy indentation makes bugs far harder to spot and makes your code look unpolished to anyone else who opens it. Most code editors can auto format this for you with a keyboard shortcut use it often.
Practical: A Full Spot the Mistakes Exercise
Heres a page with several mistakes stacked together. Try identifying every issue before scrolling to the fixed version below.
<html>
<head>
<title>Page</title>
<p>Some intro text</p>
</head>
<body>
<h1>My Bakery
<h1>Our Menu</h1>
<img src="bread.jpg">
<p>Fresh bread < 24 hours old</p>
<a>click here</a>
</body>
</html>Heres the corrected version with every issue fixed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sarah's Bakery - Our Menu</title>
</head>
<body>
<p>Some intro text</p>
<h1>My Bakery</h1>
<h2>Our Menu</h2>
<img src="bread.jpg" alt="Freshly baked bread loaves">
<p>Fresh bread < 24 hours old</p>
<a href="menu.html">View our full menu</a>
</body>
</html>Count how many of the eighteen mistakes above you were able to spot on your own. If you caught most of them you have genuinely internalized the material from this series so far.
Your Turn: Practice Exercise
- Deliberately write a short HTML page containing at least five mistakes from this list.
- Open it in your browser and observe what actually breaks versus what still looks fine despite being wrong.
- Fix each mistake one at a time checking the page after each fix.
- Run the final version through the W3C validator to confirm everything is genuinely clean.
Conclusion
Every mistake in this post is one that virtually every developer has made at some point the difference between a beginner and an experienced developer is not that one makes mistakes and the other does not its that the experienced developer recognizes and fixes them almost instantly. If you have followed along with the broken and fixed examples here you now have a mental checklist for the most common issues you will run into. In the next post we will bring everything together in Build Your First Simple HTML Web Page where we will construct a complete real webpage from scratch start to finish.