HTML Best Practices

Previous Next

Build HTML that is semantic, accessible, performant, and maintainable. This checklist gathers the most important habits for production-quality pages.

1) Structure & Semantics


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Title</title>
  </head>
  <body>
    <header>...</header>
    <main id="content">
      <article>
        <h1>Heading level 1</h1>
        <p>Use <section>/<article> meaningfully.</p>
      </article>
      <aside>Related info</aside>
    </main>
    <footer>© 2025</footer>
  </body>
</html>

Use one <h1> per page (logical headings thereafter).
Prefer semantic tags over generic <div>/<span>.
Set correct lang on <html> and on sections when language changes.

2) Accessibility Essentials


<img src="avatar.jpg" alt="Sonu Kumar Pandit">
<button aria-expanded="false" aria-controls="menu">Menu</button>
<a href="/pricing">View pricing</a>  <!-- Avoid “Click here” -->

Provide meaningful alt text (or alt="" for decorative images).
Use accessible names for controls (<label> for inputs; aria-* when needed).
Ensure focus order and keyboard operability.

3) Performance Basics


<!-- Put critical CSS early; defer non-critical JS -->
<link rel="preload" as="image" href="/hero.jpg">
<img src="/photo.jpg" loading="lazy" decoding="async">
<script src="/app.js" defer></script>

Compress and resize images; use srcset/sizes for responsive images.
Use defer or place scripts at the end to avoid blocking rendering.
Enable HTTP caching and gzip/brotli at server level.

4) SEO Essentials


<title>HTML Best Practices | Codingwithsonu</title>
<meta name="description" content="Essential HTML best practices...">
<link rel="canonical" href="https://codingwithsonu.com/html/html-best-practices.php">

Unique, descriptive <title> per page (≤ 60–65 chars typically).
Concise meta description (~155–160 chars).
Use clean, descriptive URLs and logical heading structure.

5) Forms: Usability & Validation


<label for="email">Email</label>
<input id="email" type="email" required autocomplete="email" inputmode="email">

Use proper types (email, number, date) for built-in validation/keyboard.
Always pair inputs with visible <label>.
Validate on server as well as client; never trust client data.

6) Links & Images


<a href="guide.pdf" download target="_blank" rel="noopener">Download guide</a>
<img src="image.jpg" alt="Mountains at sunset" width="600" height="400">

Use descriptive link text (what will happen when clicked).
Add intrinsic width/height to images to reduce layout shift (CLS).
Use rel="noopener" with target="_blank" for security.

7) Security Basics (Front-end)


<!-- Never inject untrusted HTML. Escape user content. -->
<!-- Use HTTPS, set Content-Security-Policy, and avoid inline scripts where possible. -->

Avoid inline event handlers (onclick="..."); prefer external JS.
Use CSP headers to limit sources of scripts/styles.
Sanitize/escape any user-generated content before output.

8) Maintainability


<!-- Keep HTML, CSS, and JS in separate files. -->
<!-- Use consistent indentation and naming (BEM or similar). -->

Consistent formatting, linting, and code review.
Reusable components with classes; avoid excessive id-specific styling.
Comment why, not obvious what; remove dead code.

9) Validation & Testing


<!-- Validate markup and check accessibility: -->
• W3C HTML Validator
• Lighthouse / WebPageTest
• Axe / WAVE (a11y)

Validate HTML; fix missing/extra closing tags & duplicate IDs.
Test keyboard navigation, color contrast, and screen-reader output.
Profile performance on slow networks/devices.

10) Quick “Bad vs Good”


<!-- Bad -->
<div onclick="doX()">Click here</div>

<!-- Good -->
<button id="doX">Submit form</button>
<script>
  document.getElementById('doX').addEventListener('click', submitForm);
</script>

Summary: Use semantic HTML, make it accessible, optimize assets, secure your outputs, and keep code clean and validated. Small habits add up to big quality gains.

Previous Next