⭐ HTML Best Practices

Professional HTML Development

Writing Quality HTML

Following best practices ensures your HTML is maintainable, accessible, performant, and professional.

💻 Document Structure

<!-- Always declare DOCTYPE -->
<!DOCTYPE html>

<!-- Set language attribute -->
<html lang="en">

<head>
    <!-- Specify character encoding -->
    <meta charset="UTF-8">
    
    <!-- Mobile-first viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Descriptive title -->
    <title>Page Title - Site Name</title>
    
    <!-- Meta description -->
    <meta name="description" content="Page description">
    
    <!-- CSS before JavaScript -->
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <!-- Content here -->
    
    <!-- Scripts at the end (or use defer) -->
    <script src="script.js"></script>
</body>
</html>

🔧 Code Formatting

<!-- Proper indentation (2 or 4 spaces) -->
<div class="container">
  <header>
    <h1>Title</h1>
    <nav>
      <a href="/">Home</a>
    </nav>
  </header>
</div>

<!-- Lowercase tags and attributes -->
<div class="box"></div>  <!-- Good -->
<DIV CLASS="box"></DIV>  <!-- Avoid -->

<!-- Quote attribute values -->
<img src="image.jpg" alt="Description">  <!-- Good -->
<img src=image.jpg alt=Description>      <!-- Bad -->

<!-- Close all tags -->
<p>Paragraph</p>  <!-- Good -->
<p>Paragraph       <!-- Bad -->

🎨 Semantic HTML

<!-- Use semantic elements -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

<main>
  <article>
    <h1>Article Title</h1>
    <p>Content</p>
  </article>
  
  <aside>
    <h2>Related</h2>
  </aside>
</main>

<footer>
  <p>© 2025</p>
</footer>

<!-- Bad: Generic divs everywhere -->
<div class="header">
  <div class="nav"></div>
</div>
<div class="main">
  <div class="article"></div>
</div>

🔗 Links and Images

<!-- Always include alt text -->
<img src="photo.jpg" alt="Person standing on mountain">

<!-- Decorative images -->
<img src="decoration.png" alt="">

<!-- Descriptive link text -->
<a href="/guide">Read our complete HTML guide</a>  <!-- Good -->
<a href="/guide">Click here</a>                    <!-- Bad -->

<!-- External links -->
<a href="https://external.com" 
   target="_blank" 
   rel="noopener noreferrer">
    External Site
</a>

<!-- Email links -->
<a href="mailto:email@example.com">Contact Us</a>

📋 Forms

<!-- Always label inputs -->
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  
  <!-- Group related inputs -->
  <fieldset>
    <legend>Contact Method</legend>
    
    <label>
      <input type="radio" name="contact" value="email">
      Email
    </label>
    
    <label>
      <input type="radio" name="contact" value="phone">
      Phone
    </label>
  </fieldset>
  
  <!-- Use appropriate input types -->
  <input type="email" placeholder="email@example.com">
  <input type="tel" placeholder="(123) 456-7890">
  <input type="url" placeholder="https://example.com">
  
  <button type="submit">Submit</button>
</form>

⚡ Performance

<!-- Lazy load images -->
<img src="image.jpg" alt="Description" loading="lazy">

<!-- Defer non-critical JavaScript -->
<script src="script.js" defer></script>
<script src="analytics.js" async></script>

<!-- Preload critical resources -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- Minimize inline styles and scripts -->
<!-- Bad: -->
<div style="color: red; font-size: 20px;">Text</div>

<!-- Good: -->
<div class="highlight">Text</div>

<!-- Optimize images -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description">
</picture>

♿ Accessibility

<!-- Proper heading hierarchy -->
<h1>Main Title</h1>
  <h2>Section</h2>
    <h3>Subsection</h3>
  <h2>Another Section</h2>

<!-- Skip links -->
<a href="#main-content" class="skip-link">Skip to content</a>

<main id="main-content">
  <!-- Content -->
</main>

<!-- ARIA when needed -->
<button aria-label="Close dialog">×</button>

<nav aria-label="Main navigation">
  <!-- Nav items -->
</nav>

<!-- Color contrast -->
<!-- Ensure 4.5:1 ratio for normal text -->
<!-- Ensure 3:1 ratio for large text -->

🔒 Security

<!-- Validate user input -->
<input type="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}">

<!-- External links security -->
<a href="https://external.com" rel="noopener noreferrer">
    External Link
</a>

<!-- Use HTTPS -->
<link rel="stylesheet" href="https://cdn.example.com/style.css">

<!-- Sanitize content (avoid XSS) -->
<!-- Never insert user input directly into HTML -->

<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'">

📱 Mobile Best Practices

<!-- Viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Touch-friendly targets (44x44px minimum) -->
<button style="min-width: 44px; min-height: 44px;">
    Click Me
</button>

<!-- Phone number links -->
<a href="tel:+1234567890">Call Us</a>

<!-- Responsive images -->
<img src="small.jpg" 
     srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 600px) 400px, 
            (max-width: 1000px) 800px, 
            1200px"
     alt="Description">

✅ Development Checklist

  • Valid HTML: No errors in W3C validator
  • Semantic: Use appropriate elements
  • Accessible: WCAG 2.1 AA compliance
  • Mobile-friendly: Responsive design
  • SEO optimized: Meta tags, structure
  • Performance: Optimized images, lazy loading
  • Security: Input validation, HTTPS
  • Cross-browser: Test in major browsers
  • Clean code: Proper indentation, comments
  • Documentation: README, code comments

🎯 Key Takeaways