HTML Style Guide

A well-structured HTML style guide helps maintain consistency, readability, and maintainability in your code. Here's a comprehensive guide with examples:

1. Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

2. Indentation and Formatting

Use 2 or 4 spaces for indentation (be consistent)
Always close tags
Use lowercase for element and attribute names

Good:

<div class="container">
  <article class="post">
    <h1>Article Title</h1>
    <p>This is a paragraph.</p>
  </article>
</div>

Bad:

<DIV class='container'>
<article class="post">
<H1>Article Title</H1><p>This is a paragraph.
</article></div>

3. Attribute Order

Follow a consistent order for attributes:

class
id
data-*
src, for, type, href, value
title, alt
aria-*, role

<a class="btn btn-primary" id="submit-btn" href="#" role="button">Submit</a>
<img class="logo" src="logo.png" alt="Company Logo" width="200" height="100">

4. Quotes

Always use double quotes for attributes:

Good:

<div class="container">

Bad:

<div class='container'>

5. Boolean Attributes

Omit values for boolean attributes:

Good:

<input type="checkbox" checked>
<button disabled>Save</button>

Bad:

<input type="checkbox" checked="checked">
<button disabled="disabled">Save</button>

6. Semantic HTML

Use appropriate semantic elements:

<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <section>
      <h1>Main Heading</h1>
      <p>Article content...</p>
    </section>
  </article>
</main>

<footer>
  <p>&copy; 2023 Company Name</p>
</footer>

7. Forms

<form id="contact-form" class="form-vertical">
  <div class="form-group">
    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" placeholder="Enter your name" required>
  </div>
  
  <div class="form-group">
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email" placeholder="your@email.com" required>
  </div>
  
  <fieldset>
    <legend>Preferred Contact Method</legend>
    <input type="radio" id="contact-email" name="contact" value="email" checked>
    <label for="contact-email">Email</label>
    
    <input type="radio" id="contact-phone" name="contact" value="phone">
    <label for="contact-phone">Phone</label>
  </fieldset>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

8. Comments

Use comments to separate sections and explain complex structures:

<!-- Main Navigation -->
<nav class="main-nav">
  <!-- ... -->
</nav>

<!-- Product Grid Section -->
<section class="product-grid">
  <!-- 
    Each product card contains:
    - Product image
    - Title
    - Price
    - Add to cart button
   -->
  <div class="product-card">
    <!-- ... -->
  </div>
</section>

9. Accessibility

Include ARIA attributes where appropriate:

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/products">Products</a></li>
  </ul>
</nav>

<button aria-expanded="false" aria-controls="dropdown-menu">
  Menu
</button>

<div id="dropdown-menu" aria-hidden="true">
  <!-- Dropdown content -->
</div>

10. Performance Considerations

<!-- Lazy load non-critical images -->
<img src="placeholder.jpg" data-src="actual-image.jpg" alt="Description" class="lazy-load">

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

<!-- Preload critical resources -->
<link rel="preload" href="critical.css" as="style">

Following these guidelines will help you create clean, maintainable, and accessible HTML code that works well across different browsers and devices.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us