Clean Code Standards
Indentation, Semantic Tags, Validation Guide

Clean Code Standards: Write HTML That Speaks Clearly

Code isn’t just for machines. It’s also for the humans who read, edit, and collaborate on it. Clean HTML code makes websites faster, easier to maintain, and more accessible — while also keeping search engines happy. Let’s explore how to write HTML that’s as elegant behind the scenes as it is on the surface.

1. Indenting and Spacing

Indentation is not just visual — it’s functional. It helps you and others understand structure at a glance.

Best Practice:

• Use 2 or 4 spaces for indentation consistently (avoid tabs)
• Each nested element should be indented
• Add line breaks between sections for readability

Example:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

2. Use Semantic Tags (Not Just Divs)

Semantic tags like <header>, <main>, <article>, and <footer> give your content meaning. This improves accessibility and SEO.

Bad Example:

<div class="header">Hello World</div>

Good Example:

<header>
  <h1>Hello World</h1>
</header>

[ Search engines and screen readers now understand this is the page header ]

3. Avoid Deprecated Tags

Some tags were phased out with the arrival of HTML5. Using them leads to messy code and poor user experience.

| Deprecated Tag | Use Instead | |----------------|-------------| | <font> | CSS (e.g., style="font-family: Arial;") | | <center> | CSS (e.g., text-align: center;) | | <u> | CSS or <em>, <strong> based on context |

Example (Bad):

<font color="red">Banana is ripe</font>

Example (Correct):

<p style="color: red;">Banana is ripe</p>

4. Write Clear, Meaningful Markup

Use descriptive tag structures and IDs or classes that reflect their role or content.

Better Naming Examples:

<section id="fruit-benefits">
  <h2>Why Cherries Are Awesome</h2>
</section>

Avoid vague names like id="box1" or class="abc".

5. Validate Your HTML

Validation helps you catch errors that break accessibility, SEO, and rendering.

Use the W3C Validator:

https://validator.w3.org/

Example: Broken vs Valid

<p>Cherry is red
</p>  <!-- Correct -->

<p>Banana is yellow<p>

[ The second example is invalid HTML due to an unclosed paragraph tag ]

6. Comment Sparingly, But Meaningfully

Comments should explain intent, not restate the obvious.

<!-- Featured fruit section with seasonal highlights -->
<section id="featured">
  ...
</section>

Avoid comments like <!-- Start --> or <!-- End --> — they add no value.

7. Sample Clean Code Block

<main>
  <article>
    <h1>Apple Facts</h1>
    <p>Apples are rich in fiber and Vitamin C.</p>
  </article>

  <article>
    <h1>Banana Facts</h1>
    <p>Bananas are a great source of potassium.</p>
  </article>
</main>

[ This is readable, well-structured, semantic, and accessible HTML ]

Summary

Writing clean HTML code is a habit — and a skill. You now know how to:

• Indent and format HTML clearly
• Use semantic and modern tags
• Avoid outdated or deprecated code
• Validate and comment with intent

What’s Next?

Now that your code is clean and clear, we’ll build a full-page HTML layout that puts all these standards into action — structured, semantic, and styled right.