HTML Style Guide

Well-structured HTML is easier to read, maintain, and learn. The following style rules help you write clean, consistent code.

Indentation

Use 2 or 4 spaces for indentation when nesting HTML elements. It helps visually separate hierarchical levels.

<ul>
  <li>First</li>
  <li>Second</li>
</ul>

Lowercase Usage

Always write HTML tags and attributes in lowercase. While HTML is case-insensitive, lowercase improves consistency.

Attribute Quotes

Always use double quotes for attribute values. This is the most widely adopted convention.

<img src="logo.png" alt="Company Logo">

Attribute Order

Use attributes in a consistent order (e.g., class, id, src, alt). This helps readability.

Blank Lines

Insert blank lines between larger HTML sections. It visually separates different content blocks.

Class and ID Naming

Use meaningful, hyphen-separated names for classes and IDs (e.g., 'main-header', 'footer-links').

<div class="main-header">
  <h1>Welcome</h1>
</div>

Comments

Use comments to mark larger blocks or provide explanations. Don’t overuse them, but make navigation easier.

<!-- Start of main section -->
<main>
  ...
</main>

Consistency

The most important rule: be consistent! Choose a style and follow it throughout the entire project.