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.
html
<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.
html
<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').
html
<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.
html
<!-- Start of main section -->
<main>
...
</main>Consistency
The most important rule: be consistent! Choose a style and follow it throughout the entire project.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
