🏆 Module 18 · Professional Dev🟡 IntermediateLESSON 58

HTML Best Practices

⏱️ 14 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress85%

🎯 What you'll learn: Consistent indentation, sensible naming conventions, when comments actually help, and the most common HTML mistakes to avoid.

Section 1

Indentation & Naming Conventions

Consistent indentation (2 spaces is the modern web convention) makes nesting visually obvious at a glance. For class and id names, use lowercase, hyphen-separated names — kebab-case — which matches CSS/HTML's own case-insensitive conventions.

naming-convention.html

HTML

<!-- Good -->
<div class="product-card" id="featured-item">

<!-- Avoid -->
<div class="ProductCard" id="featuredItem123xyz">

Section 2

When to Comment

Good identifiers (semantic tags, clear class names) make most HTML self-explanatory. Reserve comments for marking major section boundaries in long files, or explaining a genuinely non-obvious workaround — not restating what a tag obviously does.

comments.html

HTML

<!-- Not useful: restates the obvious -->
<!-- This is a paragraph -->
<p>Some text</p>

<!-- Useful: marks a section boundary in a long page -->
<!-- ============ FOOTER ============ -->
<footer>...</footer>

Section 3

Common Mistakes to Avoid

Mistake	Fix
Missing alt on images	Always include alt, even if empty for decorative images
Multiple <h1> tags without hierarchy	One clear top-level heading, nested properly below it
Divitis (div for everything)	Use semantic tags: header, nav, main, article, footer
Unclosed tags	Always close non-void elements properly
Inline styles everywhere	Use classes and external CSS instead

⚠️

Browsers are forgiving — that's the trap

Browsers silently auto-correct many HTML mistakes, which means bad habits don't show visible errors. Validation (next lesson) is how you actually catch them.

🧩 Knowledge Check — Lesson 58

5 questions to test your understanding.

1. What naming convention is standard for HTML class/id names?

2. When is an HTML comment actually useful?

3. What's the fix for "divitis"?

4. Why is "browsers are forgiving" actually a trap?

5. What should decorative images that add no meaning still have?

💪

Coding Challenge — Lesson 58

Apply what you learned · Intermediate Level

Challenge: Clean Up a Messy Snippet

Given a div-only page with class="ProductCard" and an image missing alt, rewrite it using a semantic <article> tag, kebab-case class naming, and a proper alt attribute.

💡 Show hints if you're stuck

ProductCard → product-card

Finished this lesson?

Mark it complete to track your progress.

Lesson 58 of 62Module 18 — Professional Development

HTML Best Practices

Indentation & Naming Conventions

When to Comment

Common Mistakes to Avoid

Lesson 58 Complete!