HTML Best Practices and Common Mistakes

Plenty of HTML "works" in the sense that a browser renders it without complaint, while still being fragile, inaccessible, or hard to maintain. Here's a checklist worth returning to.

Validate your markup

The W3C Markup Validator checks your HTML against the actual spec — unclosed tags, invalid nesting, missing required attributes. It catches mistakes browsers silently paper over, which is exactly the kind of bug that only surfaces later as a weird rendering difference in some other browser.

Common mistakes to avoid

Using the wrong element for the job.

<!-- Avoid -->
<div onclick="submitForm()">Submit</div>

<!-- Prefer -->
<button type="submit">Submit</button>

Skipping heading levels for visual reasons.

<!-- Avoid: h4 used just because it "looks right" -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Prefer -->
<h2>Section</h2>
<h3>Subsection</h3>

Forgetting alt text, or writing useless alt text.

<!-- Avoid -->
<img src="chart.png" alt="image" />

<!-- Prefer -->
<img src="chart.png" alt="Bar chart showing Q3 revenue up 12% year-over-year" />

Nesting block elements inside inline ones.

<!-- Invalid: <div> (block) inside <a> without careful thought, and <p> inside <span> -->
<span><p>Text</p></span>

Most browsers "fix" this silently by moving things around, which means what renders may not match what you wrote — don't rely on that recovery behavior.

Inline styles and inline event handlers.

<!-- Avoid -->
<p style="color: red;" onclick="doSomething()">Click me</p>

<!-- Prefer: keep structure, styling, and behavior separate -->
<p class="alert-text">Click me</p>

Separating HTML (structure), CSS (presentation), and JavaScript (behavior) into their own files makes each one independently reusable and easier to change without hunting through markup.

A final checklist

• [ ] Exactly one <h1> per page, headings in order after that.
• [ ] Every <img> has appropriate alt text.
• [ ] Every <input> has an associated <label>.
• [ ] Interactive elements are <button> or <a>, not styled <div>s.
• [ ] Layout regions use semantic elements (<header>, <nav>, <main>, <footer>) instead of generic <div>s.
• [ ] The page has a <title> and a <meta name="viewport">.
• [ ] Tab through the page with only a keyboard and confirm the focus order makes sense.

None of these are exotic techniques — they're the same tags covered throughout this course, just applied with a bit more discipline. That discipline is most of what separates a page that merely works from one that's genuinely well-built.