• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

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.

HTML Style Guide Quiz

Q1: What is the recommended indentation size in HTML?

A. 1 space
B. 2 or 4 spaces
C. Tab only
D. No indentation

Q2: Which is the correct way to write attributes?

A. class=myClass
B. class='myClass'
C. class="myClass"
D. class=myclass

Q3: Which of these is NOT a void element?

A. <img>
B. <br>
C. <div>
D. <hr>

Q4: What is semantic HTML?

A. Using tags for styling only
B. Using tags to describe meaning and structure
C. Using inline styles
D. Using deprecated tags

Q5: Where should CSS styles preferably be placed?

A. Inline style attribute
B. External stylesheet or <style> block
C. Directly inside HTML tags
D. Inside JavaScript

Q6: What should be avoided in naming classes and ids?

A. Meaningful names
B. Short and cryptic names
C. Descriptive names
D. Lowercase letters

Q7: Which tag should be used for the main content?

A. <header>
B. <footer>
C. <main>
D. <section>

Q8: How should long lines be handled?

A. Keep them long for fewer lines
B. Break into smaller lines under 80-120 chars
C. Use no line breaks
D. Put everything on one line

Q9: Which tag is used for navigation menus?

A. <menu>
B. <nav>
C. <ul>
D. <list>

Q10: Comments in HTML start with:

A. //
B. /*
C. <!--
D. #
← Previous Next →
Login
Go Back Top