HTML Tutorial: HTML Style Guide
Learn HTML style guide rules for writing clean, consistent, and readable code with examples and colorful outputs
A good HTML style guide ensures your code is readable, consistent, and easy to maintain. It covers indentation, naming, comments, and formatting.
1️⃣ Indentation and Formatting
INPUT:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to my website.</p>
</body>
</html>
OUTPUT:
Hello World
Welcome to my website.
✔️ Proper indentation improves readability ✔️ Nested tags are visually aligned
2️⃣ Consistent Naming
INPUT:
<div id="main-container">
<h2 class="section-title">About Us</h2>
<p class="section-text">We provide web design services.</p>
</div>
OUTPUT:
About Us
We provide web design services.
✔️ Use clear, descriptive IDs and classes ✔️ Follow consistent naming patterns (kebab-case, camelCase)
3️⃣ Comments and Documentation
INPUT:
<!-- Main header of the page -->
<header style="background:#0077cc; color:white; padding:20px;">
My Website Header
</header>
<!-- Footer section with contact info -->
<footer style="background:#009933; color:white; padding:20px;">
Contact: info@example.com
</footer>
OUTPUT:
My Website Header
✔️ Comments explain sections and improve maintenance ✔️ Use for readability
4️⃣ Avoid Inline Styles
INPUT:
<!-- Bad: inline style -->
<p style="color:red; font-size:20px;">Warning!</p>
<!-- Good: use class -->
<p class="warning-text">Warning!</p>
OUTPUT:
Warning!
✔️ Use CSS classes instead of inline styles for maintainability ✔️ Keeps HTML clean and separates content from design
5️⃣ Best Practices Summary
- Use proper indentation for nested elements
- Use meaningful and consistent IDs and class names
- Add comments to explain sections
- Separate content (HTML) from styling (CSS)
- Keep code readable and organized for teams and future maintenance
🚀 What’s Next?
👉 HTML Entities
Next lesson will cover:
- Special characters in HTML using entities
- How to display symbols, emojis, and reserved characters
- Proper encoding for clean display
Following a style guide ensures your HTML code is clean, readable, and maintainable, improving collaboration, accessibility, and website quality.