• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Style Guide

← Previous Next →

An HTML Style Guide is a set of conventions and best practices for writing clean, readable, and maintainable HTML code. Following a style guide helps teams work consistently and reduces errors.

🔹 Key Guidelines for HTML Styling

  1. Use Proper Indentation:
    Indent nested elements with 2 or 4 spaces for readability.

  2. Lowercase Tags and Attributes:
    Write all tags and attributes in lowercase to maintain consistency.

  3. Use Double Quotes for Attribute Values:
    Always wrap attribute values in double quotes, e.g., class="container".

  4. Self-Closing Tags:
    For void elements like <img>, <br>, <hr>, don't add a closing tag.

  5. Semantic HTML:
    Use meaningful tags (<header>, <nav>, <article>, <footer>) for better accessibility and SEO.

  6. Consistent Attribute Order:
    For readability, order attributes logically (e.g., id, class, name, href, src, alt, title).

  7. Avoid Inline Styles:
    Use external or internal CSS for styling instead of inline style attributes.

  8. Use Comments Wisely:
    Add comments for complex code but avoid excessive commenting.

  9. Use Meaningful IDs and Classes:
    Use descriptive names for ids and classes to clarify purpose.

  10. Limit Line Length:
    Keep lines short (80-120 characters) for easier reading and version control diffs.

💻 Example: Well-Formatted HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sample Page</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header id="main-header" class="site-header">
    <h1>Welcome to My Site</h1>
    <nav class="main-nav">
      <ul>
        <li><a href="index.html" title="Home page">Home</a></li>
        <li><a href="about.html" title="About us">About</a></li>
        <li><a href="contact.html" title="Contact us">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article class="post">
      <h2>Post Title</h2>
      <p>This is a paragraph with <a href="#">a link</a>.</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2025 My Site</p>
  </footer>
</body>
</html>

Practice Questions

Q1. Format the given messy HTML code according to style guide rules.

Q2. Write semantic HTML for a blog post including header, main, and footer sections.

Q3. Create a navigation menu with consistent indentation and attribute order.

Q4. Correctly use void tags like <img> and <br> without closing tags.

Q5. Identify and fix inline styles by moving them to external CSS.

Q6. Use descriptive class and id names for a form section.

Q7. Add comments to explain a complex section of HTML code.

Q8. Write an accessible image tag with alt text following best practices.

Q9. Create a consistent attribute order for a list of links.

Q10. Refactor an HTML page to keep lines under 100 characters.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top