HTML Style Guide
🧾 Why Follow an HTML Style Guide?
A consistent HTML Style Guide ensures your code is readable, maintainable, and scalable. Whether you're working solo or in a team, clean code helps avoid confusion and improves collaboration. 💼🛠️
>>“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” – Martin Fowler 👨💻
🔠 Naming Conventions
- ✅ Use lowercase for all HTML element names: <div>, <section>
- 💡 Use hyphens (not underscores or camelCase) for class names: menu-item
- 📛 IDs should also be lowercase and descriptive: main-header
🧹 Code Formatting
- ✅ Use proper indentation (usually 2 or 4 spaces)
- 🧱 Nest elements properly for clarity
- ✅ Always close tags (even optional ones like <li>)
Well-Formatted HTML
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>Note
⚠️ Avoid using tab and space interchangeably. Stick to one indentation style consistently.
🗂️ File Organization
- 🧾 Keep HTML files organized in a logical folder structure
- 📂 Separate CSS and JavaScript into their own folders (e.g., css/, js/)
- 🖼️ Store images in a dedicated images/ folder
🧪 Use Semantic HTML
Always prefer semantic tags like <header>, <main>, <article>, and <footer> over generic <div> when possible.
Note
💡 Semantic elements help improve accessibility, SEO, and clarity.
🔤 Quotes and Attributes
- ✅ Always use double quotes for attribute values: <img src="logo.png" alt="Logo" />
- ✅ Always include the alt attribute for images
🧼 Commenting
- 💬 Use comments to describe sections: <!-- Main Navigation -->
- ✅ Keep comments brief and meaningful
HTML Comments
<!-- Start of Header -->
<header>
<h1>My Site</h1>
</header>📘 Best Practices Summary
| Rule | Do | Don't |
|---|---|---|
| Element Names | <section> | <SECTION> |
| Class Naming | card-title | CardTitle or card_title |
| Indentation | 2 or 4 spaces | No indentation or tabs + spaces mixed |
| Images | alt="..." provided | No alt attribute |
🔗 Additional Resources
>>“Code is like humor. When you have to explain it, it’s bad.” – Cory House 😂