📝 Why Follow HTML Style Guidelines?

Following consistent HTML style guidelines makes your code more readable, maintainable, and professional. Good style helps teams work together effectively.


<!-- Good: Clean, readable HTML -->
<div class="container">
    <h1>Welcome</h1>
    <p>This is clean code.</p>
</div>

Output:

Welcome

This is clean code.

Essential Style Guidelines

🔤

Use Lowercase

Always use lowercase for element names

<!-- Good -->
<h1>Title</h1>
<p>Text</p>

<!-- Bad -->
<H1>Title</H1>

📏

Proper Indentation

Use 2 or 4 spaces for indentation

<div>
  <h1>Title</h1>
  <p>Paragraph</p>
</div>

🔗

Close All Tags

Always close your HTML tags

<!-- Good -->
<p>Text</p>
<br>

<!-- Better -->
<p>Text</p>
<br />

📋

Quote Attributes

Always quote attribute values

<!-- Good -->
<img src="image.jpg" alt="Photo">

<!-- Bad -->
<img src=image.jpg alt=Photo>

🔹 Document Structure

Always include proper document structure:

<!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 goes here -->
</body>
</html>

🔹 Naming Conventions

Use meaningful names for classes and IDs:

<!-- Good: Descriptive names -->
<div class="navigation-menu">
    <ul class="menu-list">
        <li class="menu-item">Home</li>
    </ul>
</div>

<!-- Bad: Generic names -->
<div class="div1">
    <ul class="list">
        <li class="item">Home</li>
    </ul>
</div>

HTML Style Guide