HTML Best Practices, Validation and Common Mistakes

Good HTML is valid, clean and easy to read. In this lesson you will learn how to validate HTML with the W3C validator, follow a best practices checklist, and fix the 10 most common HTML mistakes.

How to validate your HTML

Browsers are very forgiving. If you forget to close a tag, they guess what you meant and show the page anyway. That sounds nice, but different browsers may guess differently, and screen readers and search engines may get confused. A validator is a tool that checks your HTML against the official rules, like a spell checker for code.

The best known is the W3C Markup Validation Service at validator.w3.org. You can:

1. Enter the address of a live page ("Validate by URI").
2. Upload an HTML file ("Validate by File Upload").
3. Paste your code ("Validate by Direct Input").

The validator lists errors (real rule breaks you should fix) and warnings (suggestions). Each message shows the line number. Fix the first error first, because one mistake, like an unclosed tag, can cause many errors further down.

Tip: Many code editors, like VS Code, can show HTML problems as you type with an extension such as HTMLHint. Combine that with the validator before you publish.

HTML best practices checklist

Use this checklist for every page:

• Start with <!doctype html> and <html lang="...">.
• Put <meta charset="utf-8"> first in <head>, then the viewport meta tag.
• Write a unique <title> and meta description.
• Use semantic elements: <header>, <nav>, <main>, <article>, <section>, <footer>.
• One <h1>, then headings in order without skipping levels.
• Every <img> has alt, width and height.
• Every form field has a <label>.
• Use <button> for actions and <a href> for navigation.
• Keep styling in CSS, not in HTML attributes.
• Use lowercase for elements and attributes, and double quotes for attribute values.
• Indent nested elements consistently (2 spaces is common).
• The page passes the W3C validator with no errors.

File naming matters too. Use lowercase letters, numbers and hyphens only: about-us.html, team-photo-2026.webp. Avoid spaces and capital letters. A space becomes %20 in the URL, and About.html and about.html are different files on most web servers. The home page is usually index.html.

10 common HTML mistakes (and how to fix them)

1. Missing doctype or lang. Without the doctype, browsers use old "quirks mode".

<!-- Wrong -->
<html>
<!-- Right -->
<!doctype html>
<html lang="en">

2. Block elements inside a paragraph. A <p> can only contain inline content, so the browser closes it early.

<!-- Wrong -->
<p>Our offers: <ul><li>Free delivery</li></ul></p>
<!-- Right -->
<p>Our offers:</p>
<ul><li>Free delivery</li></ul>

3. Duplicate id. An id must be unique on the page.

<!-- Wrong -->
<div id="card">Plan A</div>
<div id="card">Plan B</div>
<!-- Right -->
<div class="card" id="plan-a">Plan A</div>
<div class="card" id="plan-b">Plan B</div>

4. Wrong nesting order. Close tags in the reverse order you opened them.

<!-- Wrong -->
<p><strong>Sale ends <em>today</strong></em></p>
<!-- Right -->
<p><strong>Sale ends <em>today</em></strong></p>

5. Missing alt on images.

<!-- Wrong -->
<img src="ceo.jpg">
<!-- Right -->
<img src="ceo.jpg" alt="Sara Kim, founder and CEO" width="400" height="400">

6. Inputs without labels. A placeholder is not a label: it disappears when you type.

<!-- Wrong -->
<input type="email" placeholder="Email">
<!-- Right -->
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email">

7. Using headings for size. Headings show structure, not size. Use CSS for size.

<!-- Wrong: h4 used because it "looks small" -->
<h1>Pricing</h1>
<h4>Monthly plans</h4>
<!-- Right -->
<h1>Pricing</h1>
<h2>Monthly plans</h2>

8. A clickable div instead of a button.

<!-- Wrong -->
<div onclick="subscribe()">Subscribe</div>
<!-- Right -->
<button type="button" onclick="subscribe()">Subscribe</button>

9. Using <br> for spacing. Line breaks are for content like addresses or poems, not layout.

<!-- Wrong -->
<p>Welcome!</p>
<br><br><br>
<p>Our story</p>
<!-- Right: add space with CSS margin instead -->
<p>Welcome!</p>
<p>Our story</p>

10. Deprecated presentational tags. <center>, <font> and <marquee> are obsolete. Use CSS.

<!-- Wrong -->
<center><font color="red">Big sale!</font></center>
<!-- Right -->
<p class="sale-banner">Big sale!</p>

Common mistake: Thinking "it looks fine in my browser, so it's correct". Many of these mistakes look fine visually but break accessibility, SEO or other browsers. Always validate.

Indentation and readable code

Code is read by people much more often than it is written. Indent each nested element one level, put block elements on their own lines, and add blank lines between big sections. Short inline elements can stay on one line.

<article class="post">
  <header>
    <h2>Five tips for better sleep</h2>
    <p>By <a href="/authors/tom">Tom Reed</a> · <time datetime="2026-09-12">12 September 2026</time></p>
  </header>

  <p>Good sleep starts hours before bed.</p>

  <ol>
    <li>Keep the same bedtime every day.</li>
    <li>Avoid screens for the last hour.</li>
  </ol>
</article>

This code shows the page structure at a glance: you can see which elements are inside which. Editors can format code for you with tools like Prettier.

Practice exercise

Copy all ten "Wrong" examples above into one HTML file inside a basic page and run it through the W3C validator using Direct Input. Read each error message, then fix them one by one until the validator shows no errors.

Hint: Some mistakes (like a missing label or a clickable div) are not validator errors. The validator checks rules, not good design, so you still need the checklist.

Key takeaways

• Validate every page with the W3C validator and fix the first error first.
• Use a checklist: doctype, lang, charset, title, semantic tags, headings, alt, labels.
• Name files in lowercase with hyphens, and indent nested code consistently.
• Most common mistakes are wrong nesting, duplicate ids, missing alt or labels, and fake buttons.
• "Looks fine" is not the same as "is correct".