BeingXpert Learn & Build Future

23. HTML Best Practices

What you will learn

  • Habits that make HTML clean and reliable
  • How to check your code for errors
  • A checklist to use before publishing

Why best practices matter

Browsers forgive many mistakes, so a sloppy page may still look fine. But messy code is harder to fix, can behave differently between browsers, and can hurt accessibility and search results. Good habits save time later.

The habits

1. Start every page correctly

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Descriptive Page Title</title>
</head>

2. Use lowercase and double quotes

Write tags and attribute names in lowercase and put attribute values in double quotes.

3. Close your elements and nest them correctly

Always close elements that need closing, and close inner elements before outer ones.

4. Indent your code

Indent nested elements by two spaces. Readable code is easier to debug.

5. Use semantic elements

Choose <nav>, <main>, <article>, and friends over a pile of <div> elements.

6. Keep structure, style, and behaviour separate

  • HTML for structure and content.
  • CSS in a separate file for appearance.
  • JavaScript in a separate file for behaviour.

Example

<link rel="stylesheet" href="css/style.css">
<script src="js/app.js" defer></script>

7. Always add alt text, width, and height to images

This helps accessibility and stops the page from jumping while images load.

8. Write meaningful names

Choose class and id names that describe purpose: main-menu, not blue-box-2.

9. Comment sparingly

Label big sections, and explain unusual choices. Remove dead code before publishing.

10. Keep file names tidy

Lowercase, hyphens, no spaces.

Check your code

Use the free W3C Markup Validation Service (search for it online) to paste in your HTML and see errors. Your browser’s developer tools (press F12) also show problems and let you inspect the page.

Test in more than one browser and on a phone. A page that looks right in one place can behave differently in another.

Before-you-publish checklist

  1. The page has a doctype, lang, a title, and the viewport tag.
  2. There is one <h1>, and headings go in order.
  3. Every image has alt.
  4. Every form field has a label.
  5. All links work, and the link text is meaningful.
  6. No passwords or private notes sit in comments.
  7. The validator shows no serious errors.
  8. You can use the whole page with a keyboard.

Common mistakes

  • Copying code you do not understand.
  • Putting styles in style attributes everywhere.
  • Ignoring validator messages because the page “looks fine”.
  • Never testing on a real phone.

Exercise

List three problems in this code: <P CLASS=big>Welcome<img src=logo.png>

Show solution 
1. Uppercase tag and attribute names (P, CLASS).
2. The class value has no quotes.
3. The paragraph is never closed.
4. The image has no alt text (and no width or height).

Fixed:
<p class="big">Welcome</p>
<img src="logo.png" alt="Company logo" width="100" height="50">

Knowledge check

1. Where should most CSS go?

In a separate stylesheet.

2. What tool checks HTML for errors?

The W3C Markup Validation Service.

3. Name one reason to use lowercase tags.

It is the common standard, it is consistent, and it is easier to read.

Summary

  • Write clean, consistent, semantic, accessible HTML.
  • Separate structure, style, and behaviour.
  • Validate and test before you publish.
Scroll to Top