HTML Best Practices

Learning objectives#

• Apply a professional HTML checklist
• Keep markup clean, readable and valid
• Load CSS and JavaScript efficiently
• Avoid common security mistakes in HTML

Explanation#

Structure: full document skeleton, one <h1>, logical headings, semantic landmarks, lists for lists and tables for data.

Readability: lowercase tags, double-quoted attributes, two-space indentation, meaningful class names (card-title, not red-text).

Separation: HTML for content, CSS in .css files, JavaScript in .js files. Avoid inline style="" and onclick="" in real projects.

Performance: CSS <link> in <head>; scripts with defer; images sized, compressed and lazy-loaded.

Security: rel="noopener" on target="_blank" links, sandbox on untrusted iframes, never put secrets (API keys, passwords) in HTML — anyone can view the source.

Code example: A clean, production-ready page template#

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title>Products | ShopEasy</title>
7  <meta name="description" content="Browse our full range of products.">
8  <link rel="stylesheet" href="/css/site.css">
9  <script src="/js/app.js" defer></script>
10</head>
11<body>
12  <a class="skip-link" href="#main">Skip to content</a>
13  <header class="site-header">
14    <nav aria-label="Main">…</nav>
15  </header>
16

17  <main id="main">
18    <h1>Products</h1>
19    <section aria-labelledby="new-heading">
20      <h2 id="new-heading">New arrivals</h2>
21      <ul class="product-list">
22        <li class="product-card">…</li>
23      </ul>
24    </section>
25  </main>
26

27  <footer class="site-footer">…</footer>
28</body>
29</html>

A well-organised template: metadata, external CSS and JS, a skip link, landmarks, a single h1 and a list of products.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. Every metadata tag sits in <head>, CSS first, script with defer.
2. A skip link is the first focusable element.
3. Landmarks: header, nav, main, footer.
4. The section is labelled by its own heading via aria-labelledby.
5. Products are a list, so screen readers announce how many there are.
6. Class names describe what things are, not how they look.

Real-world use case#

Common mistakes#

Best practices#

• Validate with validator.w3.org
• Audit with Lighthouse in Chrome DevTools
• Use a formatter (Prettier) so indentation is consistent
• Name classes by purpose (product-card) not appearance (blue-box)
• Keep comments short and remove commented-out code

Remember this#

Practice exercise#

11. Missing DOCTYPE, lang, <head> with charset, viewport and title.
22. "Welcome" should be an <h1> styled with CSS, not a div with inline style.
33. A clickable div is not keyboard accessible — use <button> (or a link if it navigates).
44. The link text "here" is not descriptive, and target="_blank" needs rel="noopener".

Mini quiz#

Want more? Practise all HTML MCQs · HTML interview questions

Related topics#

My notes#

Saved in this browser.