Best Practices & Validation

Browsers are very forgiving. They will display a page full of mistakes and quietly guess what you meant. That sounds helpful, but the guesses differ between browsers, hide bugs from you, and often break accessibility. Good habits and a quick validation check keep your HTML correct from the start.

In this lesson you will learn how to validate a page, a checklist to run on every page you build, how to write HTML that is easy to read, and which old tags to replace.

Validate your HTML

A validator reads your HTML and reports everything that breaks the rules of the HTML standard. The official one is the W3C's Nu HTML Checker. You can paste your code, upload a file or give it the URL of a live page.

It reports two kinds of message:

• Errors break the rules: a missing closing tag, an element in a place where it is not allowed, a duplicate id, or an <img> without alt. Fix all of them.
• Warnings point to things that are allowed but probably not what you want, such as a <section> with no heading. Read each one and decide.

Fix the first error first and validate again. One missing tag near the top can cause many confusing errors further down, and they often disappear together. Many code editors can also highlight problems as you type, which catches mistakes even earlier.

Here is a short page with several common problems. Every one of them still "works" in a browser, which is exactly why they go unnoticed.

<html>
<head>
<title>My Page</title>
</head>
<body>
<H1>Welcome to Isha's Bakery</h1>
<p>Our cakes: <ul><li>Black forest<li>Pineapple</ul></p>
<img src=cake.jpg>
<div id="menu">...</div>
<div id="menu">...</div>
<p><b>Call:</b> <font color="red">98765 43210</font>
<a href="order.html"><button>Order now</button></a>
</body>
</html>

The problems: there is no doctype, no lang, no charset and no viewport; the tag names mix upper and lower case; a list sits inside a paragraph (which the browser splits apart); the image has no alt and an unquoted value; two elements share the same id; <font> is obsolete; the last paragraph is never closed; and a button sits inside a link, which is not allowed because one interactive element cannot contain another.

The fixed version

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cakes and Orders | Isha's Bakery</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Welcome to Isha's Bakery</h1>
  <p>Our cakes:</p>
  <ul>
    <li>Black forest</li>
    <li>Pineapple</li>
  </ul>
  <img src="images/cake.jpg" alt="Two-layer black forest cake with cherries" width="600" height="400">
  <nav id="menu">...</nav>
  <p><strong>Call:</strong> <a class="phone" href="tel:+919876543210">98765 43210</a></p>
  <a class="button" href="order.html">Order now</a>
</body>
</html>

The colour moved to the stylesheet, the phone number became a real tel: link that opens the dialler on a phone, and the "Order now" link is styled to look like a button instead of wrapping one. A link goes somewhere; a button does something. Pick one.

A checklist for every page

Run through this list before you publish a page:

1. <!DOCTYPE html> on the first line, and <html lang="..."> with the right language.
2. <meta charset="utf-8"> first in the head, then the viewport tag.
3. A unique, descriptive <title> and meta description. See The Head: Title & Meta Tags.
4. One <main>, with landmarks such as <header>, <nav> and <footer> where they fit.
5. Headings in order, usually one <h1>, without skipping levels.
6. alt on every <img>, and width and height too.
7. A connected <label> for every form control.
8. No duplicate id values.
9. Links with meaningful text, and <button> for actions.
10. The page passes the validator and a quick keyboard test, as described in Accessibility Basics.

Write HTML that is easy to read

Other people, including you in six months, will read your code. A consistent style makes mistakes easy to spot.

• Use lowercase for element and attribute names.
• Always quote attribute values, with double quotes.
• Indent nested elements, usually by two spaces, so the structure is visible.
• Close elements such as <p> and <li> even though the standard lets you leave some closing tags out. It makes the end of each element obvious.
• Write void elements without a closing slash: <br> and <img ...>. The form <br /> is also allowed, but pick one style. Never write <div />: a slash does not close a normal element, so the <div> stays open.
• Write boolean attributes on their own: required, not required="true".
• Use comments to explain why something is there, not what it is. Comments are covered in Comments & Character Entities.

Keep structure, style and behaviour apart

HTML describes structure, CSS controls looks, and JavaScript adds behaviour. Keeping them in separate files makes each one easier to change.

• Put CSS in a stylesheet, not in style attributes on individual elements.
• Attach JavaScript with addEventListener in a script file, not with onclick attributes.
• Name classes after what something is, such as price or notice, not how it looks, such as red-text. If the design changes to blue, red-text becomes a lie.

Files, folders and paths

• Use lowercase file names with hyphens instead of spaces: about-us.html, not About Us.html. Many web servers treat upper and lower case as different, so Logo.png and logo.png are different files.
• Name the home page of a folder index.html, so /courses/ shows it automatically.
• Keep a simple folder layout and use relative paths between your own pages.

my-site/
  index.html
  about.html
  css/style.css
  js/main.js
  images/logo.svg

Replace obsolete markup

You will meet these in old tutorials and old websites. Browsers may still display some of them, but they are no longer part of HTML.

A clean starting template

Save this as the starting point for every new page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Topic | Site Name</title>
  <meta name="description" content="One or two honest sentences about this page.">
  <meta name="color-scheme" content="light dark">
  <!-- <link rel="stylesheet" href="css/style.css"> -->
  <!-- <script src="js/main.js" defer></script> -->
</head>
<body>
  <a href="#main">Skip to main content</a>
  <header>
    <p>Site Name</p>
    <nav aria-label="Main">
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
    </nav>
  </header>
  <main id="main">
    <h1>Page topic</h1>
    <p>Your content starts here.</p>
  </main>
  <footer>
    <p>© 2026 Site Name</p>
  </footer>
</body>
</html>

The stylesheet and script lines are commented out because the files do not exist here; remove the comment markers in a real project.

Common mistakes

• Trusting the browser instead of the validator. "It looks fine" does not mean it is correct.
• Duplicate id values. Labels, links and scripts that use the id will pick the wrong element.
• Interactive elements inside each other. No button inside a link, no link inside a link.
• Inline style and onclick attributes everywhere. Move them into CSS and JavaScript files.
• Spaces and capital letters in file names. They break links on many servers.

Key points

• Browsers hide mistakes, so check pages with the W3C Nu HTML Checker and fix every error.
• Follow a checklist: doctype, lang, charset, viewport, title, landmarks, heading order, alt, labels and unique ids.
• Write lowercase, quoted, indented HTML and close your elements.
• Keep HTML, CSS and JavaScript in separate files, and name classes by meaning.
• Use lowercase, hyphenated file names and simple folders.
• Replace obsolete tags such as <center> and <font> with CSS.

<DIV class="box" id="offer">
<p>Diwali offer: <font color=green>20% off</font>
<p>Ends soon!</P>
<img src="Offer Banner.png">
<a href="sale.html"><button>See the sale</button></a>
</DIV>
<div id="offer"></div>

<div class="offer-box" id="offer">
  <p>Diwali offer: <strong class="discount">20% off</strong></p>
  <p>Ends soon!</p>
  <img src="offer-banner.png" alt="Diwali sale: 20% off all sweets boxes" width="800" height="300">
  <a class="button" href="sale.html">See the sale</a>
</div>
<div id="offer-details"></div>