HTML Style Guide

An HTML style guide is a set of guidelines and best practices for writing HTML code. The goal is to ensure consistency, readability, and maintainability of code across a project or organization. Here’s a basic overview of common principles in an HTML style guide, with examples:

1. Indentation and Spacing

Rule: Use consistent indentation to make the HTML structure clear.

Example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Example Page</title>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is a sample paragraph.</p>
    </body>
</html>

Indentation: Typically, 4 spaces or a tab.

2. Element Nesting

Rule: Properly nest elements to reflect the structure of the document.

Example:

<ul>
    <li>
        <a href="#home">Home</a>
    </li>
    <li>
        <a href="#about">About</a>
    </li>
</ul>

Do not: Place block elements directly inside inline elements.

3. Attribute Quotation

Rule: Always use double quotes for attributes.

Example:

<img src="image.jpg" alt="Description of image">
<a href="https://example.com" title="Visit Example">Example</a>

Do not: Use single quotes or omit quotes entirely.

4. Self-Closing Tags

Rule: Include a trailing slash for self-closing tags (optional based on HTML version).

Example:

<img src="logo.png" alt="Logo">
<br />

Do not: Omit the slash in HTML5 (although it’s allowed).

5. HTML5 Semantic Elements

Rule: Use semantic elements to describe the meaning of content.

Example:

<header>
    <h1>Page Title</h1>
</header>
<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
    </ul>
</nav>
<main>
    <section>
        <h2>About Us</h2>
        <p>Some information about us.</p>
    </section>
</main>
<footer>
    <p>&copy; 2024 Your Company</p>
</footer>

6. Class and ID Naming

Rule: Use meaningful names for classes and IDs, following a consistent naming convention (e.g., BEM, CamelCase).

Example:

<div class="header">
    <h1 class="header__title">Page Title</h1>
</div>

BEM (Block Element Modifier) convention: block__element--modifier

7. Avoid Inline Styles

Rule: Prefer using external or internal stylesheets for CSS rather than inline styles.

Example:

<!-- Preferred -->
<link rel="stylesheet" href="styles.css">

<!-- Avoid -->
<p style="color: red;">This is a red paragraph.</p>

8. Commenting

Rule: Use comments to explain sections of code or complex logic.

Example:

<!-- Main navigation menu -->
<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>

9. Doctype Declaration

Rule: Always include the <!DOCTYPE html> declaration at the top of the document.

Example:

<!DOCTYPE html>
<html lang="en">
    <!-- Document content -->
</html>

10. File Naming and Organization

Rule: Use descriptive names for HTML files and organize them logically.

Example:

/project
    /css
        styles.css
    /images
        logo.png
    /js
        scripts.js
    index.html
    about.html

These practices help maintain a clean, readable, and manageable codebase. Each organization may adapt these rules based on their specific needs and preferences.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us