Divitis: A Disease of the Markup
Eris Sulistina

Eris Sulistina @sejutaimpian

Joined:
May 14, 2024

Divitis: A Disease of the Markup

Publish Date: May 19
0 0

Divitis is a condition that infects your HTML when it's overly exposed to the <div> element.
Left untreated, this infection can lead to:

  • 👓 Myopia – code that’s hard to read
  • 🧓 Premature aging – messy and unscalable CSS
  • 🧏 Partial numbness – inaccessible for assistive tech
  • 🧠 Alzheimer's – SEO-unfriendly and hard to remember

Here’s what a Divitis case might look like:

<div class="header">
  <div class="nav">
    <div class="link">Home</div>
    <div class="link">About</div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

The Cure: Semantic HTML

Around 2014, coinciding with the rise of HTML5, web scientists discovered an effective treatment: Semantic HTML.

Here's how the markup can be transformed after applying the cure:

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
Enter fullscreen mode Exit fullscreen mode

Semantic elements help browsers and developers understand the meaning and structure of your content. They also make your site more accessible, maintainable, and SEO-friendly.

But Wait… Is <div> Really That Bad?

Let’s be clear — this is all a bit of metaphorical roleplay.
Just because I compared <div> to bacteria doesn’t mean it’s harmful by nature. In fact, <div> is still a valuable tool in HTML. There are cases where no semantic equivalent exists, and <div> is the best option.

Semantic HTML isn’t a silver bullet — it won’t eliminate every issue — but using it wisely helps prevent your codebase from turning into an unreadable, inaccessible mess.

TL;DR

  • ✅ Use semantic elements whenever possible
  • ✅ Avoid wrapping everything in <div>s
  • ✅ Remember: semantic HTML = better accessibility, structure, and SEO
  • ⚠️ <div> is not evil, but overusing it is

Thanks for reading! If you’ve ever suffered from Divitis (or treated someone else’s), feel free to share your experience in the comments.
See you in the next post! 👋

Comments 0 total

    Add comment