HTML Style Guide - Detailed Overview

Introduction to HTML Style Guide

A style guide helps ensure consistency and maintainability in your HTML code. It includes best practices and conventions for writing HTML to ensure clarity and uniformity across your project.

HTML Document Structure

Follow a consistent structure for your HTML documents. Each document should include the following sections:

<!DOCTYPE html>
<html> with a lang attribute
<head> with meta tags, title, and links to stylesheets
<body> with content

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document Title</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <!-- Content goes here -->
    </body>
</html>

Document Title

HTML Indentation and Formatting

Consistent indentation and formatting improve readability. Use 2 or 4 spaces for indentation and keep lines of code within 80-100 characters:

<div>
    <h2>Title</h2>
    <p>Some text here.</p>
</div>

Title

Some text here.

Semantic HTML

Use semantic HTML elements to convey meaning and structure. For example, use <header>, <footer>, <article>, and <section> instead of generic <div> tags:

<header>
    <h1>Main Header</h1>
</header>
<article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
</article>

Main Header

Article Title

Article content goes here.

HTML Attribute Conventions

Follow conventions for HTML attributes:

Use lowercase for attribute names and values.
Quote attribute values.
Use meaningful attribute names and values.

<a href="https://www.shariqsp.com">Visit ShariqSP</a>

Visit ShariqSP

Comments

Use comments to explain sections of your code. Comments should be clear and helpful:

<!-- This is a comment explaining the navigation section -->
<nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
</nav>