From Shitty Code to Solid Dev: Mastering HTML the Right Way

Varun Chowdary — Tue, 08 Jul 2025 17:03:16 +0000

Ever written HTML so bad your CSS gave up?
That was me — spans pretending to be headings, divs nesting deeper than my weekend plans. 😅
This is Post #1 in my Frontend Clean Code Series — a guide to writing clean, purposeful HTML, CSS, and Angular/React templates your future self (and teammates) will thank you for.

💡 Why HTML Matters

HTML is the skeleton of your app. Mess it up, and everything else — CSS, JavaScript, Angular — starts to break or gets harder to work with.

Good HTML is:

✅ Semantic: Uses meaningful tags like <header>, <main>, <article>
✅ Accessible: Helps screen readers and assistive tools understand your layout
✅ Maintainable: Easier to debug and collaborate on in teams

⚠️ Mistake 1: Non-Semantic HTML

🚫 Code I used to write back in the day:

<span class="title">
  <h4>My Blog</h4>
</span>
<div class="content">
  <div>
    <div>
      <p>Welcome to my site!</p>
    </div>
  </div>
</div>

😬 What’s wrong here?

Wrapping a heading (<h4>) in a <span> is meaningless and bad for accessibility
Unnecessary <div> nesting makes CSS selectors a nightmare (e.g., .content div div p)
No clear structure — your teammates (and Google) won’t know what’s going on

✅ The Fix: Use Semantic Tags

<header>
  <h1>My Blog</h1>
</header>
<main>
  <p>Welcome to my site!</p>
</main>

💡 Why It’s Better

Accessibility: Screen readers recognize <h1> as the main heading
Simplicity: Fewer tags = less CSS, faster rendering
Teamwork: Easier to understand in Angular/React templates when working with others

⚠️ Mistake 2: Overusing `<div>` for Everything

🚫 I used to write things like:

<div class="container">
  <div class="nav">
    <div>Home</div>
    <div>About</div>
  </div>
</div>

😬 What’s wrong?

Using <div>s for everything makes your HTML messy and confusing.
It’s like putting all your things in one box without sorting or labeling anything.

✅ The Fix: Use Semantic Tags like `<nav>`, `<ul>`, `<li>`

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

💡 Why It’s Better

<nav> + <ul> tells browsers, screen readers, and other devs: "This is navigation!"
Makes styling and responsiveness easier (especially in React/Angular apps)

🔁 My Advice to Beginners

When I started, I treated HTML like a placeholder for JavaScript and CSS. But over time, I learned that clean, semantic HTML is the foundation of everything else.

✨ Think of HTML like writing a resume — it should be structured, clear, and readable without styling.

📌 Coming Up Next

In the next post, I’ll tackle how CSS can either style your dreams or spiral into spaghetti 🍝
Follow me for Post #2: “How to Avoid CSS Chaos (and Still Look Cool)”

🙌 Let’s Connect

💬 Have your own HTML horror story? Drop it in the comments — let’s laugh and learn together.
👀 Follow me here for more regular front-end tips and dev life posts.

DEV Community: Varun Chowdary

From Shitty Code to Solid Dev: Mastering HTML the Right Way

💡 Why HTML Matters

⚠️ Mistake 1: Non-Semantic HTML

🚫 Code I used to write back in the day:

😬 What’s wrong here?

✅ The Fix: Use Semantic Tags

💡 Why It’s Better

⚠️ Mistake 2: Overusing <div> for Everything

🚫 I used to write things like:

😬 What’s wrong?

✅ The Fix: Use Semantic Tags like <nav>, <ul>, <li>

💡 Why It’s Better

🔁 My Advice to Beginners

📌 Coming Up Next

🙌 Let’s Connect

⚠️ Mistake 2: Overusing `<div>` for Everything

✅ The Fix: Use Semantic Tags like `<nav>`, `<ul>`, `<li>`