HTML Style Guide

An HTML style guide is a set of conventions and best practices for writing clean, consistent, and maintainable HTML code. It helps developers create well-structured, readable, and efficient web pages.

Key Principles

• Use lowercase for element names and attributes
• Always close tags properly
• Use double quotes for attribute values
• Indent nested elements consistently
• Separate concerns: structure (HTML), presentation (CSS), and behavior (JavaScript)

Document Structure

Start with the proper HTML Document Structure:

    
    
    Page Title


    


    

Formatting and Indentation

Proper formatting enhances readability. Use consistent indentation (typically 2 or 4 spaces) for nested elements:

    
        Home
        About
        Contact
    

    

Semantic HTML

Use HTML5 Semantic Elements to provide meaning to your document structure:

• Use <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> appropriately
• Prefer semantic elements over generic <div> and <span> when possible

Attributes

Follow these guidelines for HTML Attributes:

• Use lowercase attribute names
• Always use double quotes for attribute values
• Don't use unnecessary spaces around equals signs

Images

When working with HTML Images:

• Always include the alt attribute for accessibility
• Specify image dimensions using width and height attributes

Forms

For HTML Forms:

• Always use <label> elements for form controls
• Group related form elements using <fieldset> and <legend>

Comments

Use HTML Comments to explain complex structures or to separate major sections:

Best Practices

• Validate your HTML using W3C Validator
• Use meaningful class and ID names
• Keep your HTML structure as simple as possible
• Optimize for HTML Accessibility
• Consider HTML SEO Basics when structuring your content

By following these guidelines, you'll create cleaner, more maintainable HTML code. Remember, consistency is key in any style guide. Adapt these principles to fit your team's specific needs and preferences.