Skip to main content
HTML for Beginners
CHAPTER 23 Beginner

HTML Best Practices and Clean Structure

Updated: May 10, 2026
5 min read

# HTML Best Practices and Clean Structure

1. Introduction

Anybody can write HTML that "works." A professional developer writes HTML that is clean, readable, accessible, and fast. In this chapter, we cover the golden rules of structuring your codebase.

2. Learning Objectives

  • Write properly indented, clean HTML.
  • Avoid "Div Soup".
  • Implement semantic HTML rules.

3. Detailed Explanations

Indentation is Mandatory

Always use 2 or 4 spaces to indent nested elements. This makes reading parent-child relationships easy.
html
12345678910 
<!-- BAD: Unreadable -->
<div><p>Hello</p><ul><li>Item</li></ul></div>

<!-- GOOD: Easy to read -->
<div>
    <p>Hello</p>
    <ul>
        <li>Item</li>
    </ul>
</div>

Always Use Lowercase

While HTML is technically case-insensitive, the standard is to write tags and attributes entirely in lowercase.
html
12345 
<!-- BAD -->
<DIV CLASS="container"></DIV>

<!-- GOOD -->
<div class="container"></div>

Quote Attribute Values

Always wrap your attribute values in double quotes.
html
12345 
<!-- BAD (Breaks if there is a space in the value) -->
<img src=profile.jpg alt=Jane Doe>

<!-- GOOD -->
<img src="profile.jpg" alt="Jane Doe">

Avoid "Div Soup"

"Div Soup" is a slang term for a webpage built entirely using <div> tags. Use semantic HTML instead (<header>, <nav>, <main>, <article>, <footer>).
html
123456789 
<!-- BAD: Div Soup -->
<div id="header">
    <div class="nav">Links</div>
</div>

<!-- GOOD: Semantic Structure -->
<header>
    <nav>Links</nav>
</header>

4. Mini Project: Refactor Messy HTML

Look at this messy code and see how we fix it.

The Mess:

html
12345678 
<HTML>
<BODY>
<DIV id="MAIN">
<H1>My title</H1>
<p>text text</p>
</DIV>
</BODY>
</HTML>

The Refactor:

html
1234567891011121314 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Title</title>
</head>
<body>
    <main id="main-content">
        <h1>My title</h1>
        <p>Text text.</p>
    </main>
</body>
</html>

5. MCQs

Q1: Which of the following is considered bad practice in HTML? A) Using lowercase tags. B) Leaving out quotes around attribute values. C) Using indentation. D) Using the <main> tag. *Answer: B*

6. Summary

Clean code shows that you are a professional. Always indent properly, use lowercase tags, quote your attributes, provide a doctype, and use semantic tags over <div> whenever possible.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter HTML Tables Advanced Concepts
Next Chapter HTML Project: Build a Portfolio Website

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1