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:
classiddata-*src,for,type,href,valuetitle,altaria-*,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>© 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.
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.