DEV Community

Cover image for From Shitty Code to Solid Dev: Mastering HTML the Right Way
Varun Chowdary
Varun Chowdary

Posted on

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

#webdev #html #beginners #coding

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>
Enter fullscreen mode Exit fullscreen mode

😬 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>
Enter fullscreen mode Exit fullscreen mode

💡 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>
Enter fullscreen mode Exit fullscreen mode

😬 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>
Enter fullscreen mode Exit fullscreen mode

💡 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.

Top comments (0)