Divitis: A Disease of the Markup

[Lomanu4]

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

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! ?

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.