Home / HTML / Style Guide

HTML Style Guide

What is an HTML Style Guide?

An HTML style guide is a set of conventions and best practices for writing HTML code. Following a consistent style guide makes your code more readable, maintainable, and easier to work with. This guide provides recommendations for writing clean, professional HTML.

Document Structure

Always use proper HTML5 document structure:

Example
<!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>
</head>
<body>
    <!-- Content here -->
</body>
</html>

Indentation and Formatting

Use consistent indentation (2 or 4 spaces, or tabs). Be consistent throughout your code:

Example - Good
<div>
    <h1>Title</h1>
    <p>Content here.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</div>
Example - Bad (Inconsistent)
<div>
<h1>Title</h1>
<p>Content here.</p>
<ul>
<li>Item 1</li>
  <li>Item 2</li>
</ul>
</div>

Element Naming

Use lowercase for HTML element names:

Example - Good
<div>
    <p>Content</p>
    <h1>Heading</h1>
</div>
Example - Bad
<DIV>
    <P>Content</P>
    <H1>Heading</H1>
</DIV>

Attribute Naming

Use lowercase for HTML attribute names:

Example - Good
<img src="image.jpg" alt="Description">
<a href="page.html" title="Link">Link</a>
Example - Bad
<img SRC="image.jpg" ALT="Description">
<a HREF="page.html" TITLE="Link">Link</a>

Attribute Values

Always quote attribute values:

Example - Good
<img src="image.jpg" alt="Description">
<a href="page.html" class="link">Link</a>
Example - Bad
<img src=image.jpg alt=Description>
<a href=page.html class=link>Link</a>

Closing Tags

Always close HTML elements properly:

Example - Good
<p>This is a paragraph.</p>
<div>
    <p>Content</p>
</div>
Example - Bad (Self-closing elements are fine)
<!-- OK: Void elements -->
<img src="image.jpg" alt="Description">
<br>
<hr>

<!-- Bad: Missing closing tags for non-void elements -->
<p>This is a paragraph.
<div>
    <p>Content
</div>

Empty Elements

For void elements (elements with no content), you can use self-closing syntax or just the opening tag:

Example
<!-- Both are valid in HTML5 -->
<img src="image.jpg" alt="Description">
<img src="image.jpg" alt="Description" />

<br>
<br />

<hr>
<hr />

Semantic HTML

Use semantic HTML5 elements when possible:

Example - Good (Semantic)
<header>
    <nav>Navigation</nav>
</header>
<main>
    <article>
        <section>Content</section>
    </article>
    <aside>Sidebar</aside>
</main>
<footer>Footer</footer>
Example - Bad (Generic)
<div class="header">
    <div class="nav">Navigation</div>
</div>
<div class="main">
    <div class="article">
        <div class="section">Content</div>
    </div>
    <div class="aside">Sidebar</div>
</div>
<div class="footer">Footer</div>

Class and ID Naming

Use descriptive, lowercase class and ID names with hyphens or underscores for multiple words:

Example - Good
<div class="main-content"></div>
<div id="header-nav"></div>
<div class="sidebar_widget"></div>
Example - Bad
<div class="MainContent"></div>
<div id="HeaderNav"></div>
<div class="sidebar widget"></div> <!-- Multiple classes OK, but be consistent -->

Comments

Use comments to explain complex sections or mark sections:

Example
<!-- Header section -->
<header>
    <h1>Title</h1>
</header>

<!-- Main content section -->
<main>
    <!-- Article content -->
    <article>
        <p>Content here...</p>
    </article>
</main>

Accessibility

Always include accessibility attributes:

Example - Good
<img src="image.jpg" alt="Descriptive text about the image">
<button aria-label="Close dialog">X</button>
<input type="text" name="name" aria-required="true">
Example - Bad
<img src="image.jpg">
<button>X</button>
<input type="text" name="name">

CSS and JavaScript

Keep CSS and JavaScript separate from HTML when possible:

Example - Good (External)
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script src="script.js"></script>
</body>
Example - OK for small projects (Internal)
<head>
    <style>
        /* CSS here */
    </style>
</head>
<body>
    <script>
        // JavaScript here
    </script>
</body>
Example - Avoid when possible (Inline)
<p style="color: red;">Text</p>
<button onclick="alert('Hello')">Click</button>

File Naming

Use lowercase, descriptive file names with hyphens:

Example - Good
index.html
about-us.html
contact-page.html
my-article.html
Example - Bad
Index.HTML
AboutUs.html
Contact Page.html
my_article.html

Best Practices Summary

HTML Validation

Always validate your HTML code. Use online validators like the W3C Markup Validation Service to check for errors and ensure your HTML follows standards.

← URL Encode HTML Forms →