12 Common HTML Mistakes Beginners Make (And How to Fix Them)
Everyone writes bad HTML when they're learning — I certainly did. My first freelance site had a single <div> wrapping the entire body, four <h1>s on the homepage, and zero alt attributes. What matters is spotting the patterns so you stop repeating them. These are the twelve mistakes I flag most often when I review code from juniors at work — and every one of them has bitten me personally at some point.
The 12 mistakes, ranked by how often I see them
- Missing the <!doctype html> declaration (triggers quirks mode)
- Nesting block elements inside <a> incorrectly or wrapping interactive elements in <a>
- Using <br> for spacing instead of CSS margins
- Skipping the alt attribute on images (or writing 'image of…')
- Using multiple <h1> tags for visual size instead of hierarchy
- Forgetting <label> — or associating it wrong — on form inputs
- Wrapping everything in <div> when semantic tags exist
- Using <i> and <b> instead of <em> and <strong>
- Inline style attributes everywhere
- Not closing self-closing tags consistently (or closing void elements)
- Tables for layout (it's 2026 — use CSS Grid)
- Missing viewport meta tag
1. The viewport meta tag everyone forgets
This is the single most common bug I see on legacy client sites. Without this line, mobile browsers render your page at 980px wide and shrink the whole thing down — making text unreadable and tap targets microscopic.
<meta name="viewport" content="width=device-width, initial-scale=1" />2. Alt text — what it's actually for
Alt text isn't a keyword-stuffing field. It's what screen readers announce, and what shows when the image fails to load. Rule of thumb: if the image is purely decorative, use alt="" (empty string, not missing). If it carries meaning, describe the meaning — not the pixels.
<!-- Decorative -->
<img src="swirl.svg" alt="" />
<!-- Informative -->
<img src="chart.png" alt="Q3 revenue rose 18% quarter over quarter" />3. Heading hierarchy is a document outline, not a font-size picker
One <h1> per page. <h2> for major sections. <h3> only inside an <h2>. If you want a big centered title, use CSS — don't reach for <h1> because it looks large by default.
4. <label> the right way
<!-- Bad: label with no association -->
<label>Email</label>
<input type="email" />
<!-- Good: wrap or use for/id -->
<label for="email">Email</label>
<input id="email" type="email" />This isn't just about screen readers — clicking the label now focuses the input, which meaningfully improves mobile UX.
5. Stop <div>-ing everything
Every <div class="header"> should be a <header>. Every <div class="nav"> should be a <nav>. Semantic tags cost you nothing, give crawlers structure, and unlock free accessibility landmarks.
6. <em> vs <i>, <strong> vs <b>
<em>/<strong> carry meaning (emphasis, importance) — screen readers change intonation. <i>/<b> are purely visual and semantically empty. When in doubt, use the meaningful pair.
7. Inline styles are a code-review red flag
Every inline style is a promise you'll write !important later. Move it to a class, even if it's used exactly once.
Frequently asked questions
Why is alt text so important?
Screen readers announce it to blind users, search engines use it to understand images for image search, and it's shown when the image fails to load. It also affects your accessibility score in Lighthouse, which Google uses as a ranking signal.
Can I skip <!doctype html>?
No — without it browsers fall back to 'quirks mode', which uses buggy 1990s CSS behaviour (broken box model, inconsistent margins). Always keep it as the very first line.
Is it OK to use tables anywhere in 2026?
Yes — for actual tabular data (schedules, pricing tables, comparison grids). Never for layout. If your table has no <th>, it's probably a layout table and should be CSS Grid or Flexbox.
Do I still need to close self-closing tags with a slash?
In HTML5 it's optional (<br> and <br /> are equivalent). Pick one and be consistent — my team uses the trailing slash because JSX enforces it and the switch feels less jarring.
Keep reading
External references
Enjoyed this article?
Share it with a fellow developer or explore more tutorials in our blog.
More articles