HTML Style Guide

HTML Style Guide for Beginners

An HTML style guide helps you write clean, readable, and maintainable HTML code. It covers naming conventions, formatting, indentation, and good practices.


1. Use Proper Doctype

Always begin your HTML file with the correct <!DOCTYPE html> declaration.

<!DOCTYPE html>
<html>
  ...
</html>

2. Use Lowercase Tags

HTML5 is not case-sensitive, but lowercase tags are standard.

<p>This is a paragraph.</p>

3. Proper Indentation (2 or 4 Spaces)

Use consistent indentation to make your HTML easy to read.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

4. Close All Tags

Even self-closing tags should be properly formatted (especially in XHTML or JSX).

<img src="image.jpg" alt="Sample image">

5. Use Double Quotes for Attribute Values

Always wrap attribute values in double quotes.

<a href="https://example.com">Visit</a>

6. Keep CSS and HTML Separate

Use external or internal styles instead of inline styles whenever possible.

<!-- Avoid -->
<p style="color: red;">Inline style</p>

<!-- Prefer -->
<style>
  .red-text { color: red; }
</style>
<p class="red-text">Styled via class</p>

7. Semantic HTML

Use semantic tags for better accessibility and SEO.

<header>Website Header</header>
<nav>Navigation Menu</nav>
<main>Main Content</main>
<footer>Footer Info</footer>

8. Use Meaningful Class and ID Names

Use clear, descriptive class and ID names — avoid div1, style2, etc.

<div class="hero-banner">Welcome Section</div>

9. Comment Your Code

Add comments to explain sections of your code for future reference.

<!-- This section displays the hero image -->
<section class="hero"></section>

10. Use Meta Tags for SEO

Include meta tags like charset and viewport for SEO and mobile optimization.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Final Tips

  • Keep your code clean and DRY (Don't Repeat Yourself)
  • Use validator tools like W3C Validator
  • Maintain consistent formatting
  • Comment complex sections
  • Name files using lowercase and hyphens (e.g., about-us.html)