🚁 Don’t use <div> — Have Some Empathy 🚀

I’ve watched countless web development videos on YouTube and written an infinite number of HTML elements — whether in vanilla HTML, React, or other frontend framework.

No matter where I go, I see the same old <div>, and for the longest time, I was fine with that and hardly any YouTubers seemed to care. Then, one day, I heard a YouTuber casually say, ‘You should be using the correct semantic element here, but for the sake of this tutorial, I’m going with <div>.’

Not a Member Click here to read free

That casual comment struck a chord with me. I vaguely recalled hearing about semantic elements back in college but hadn’t paid much attention since. Curiosity piqued, I started digging into the importance of semantic elements. This article is a condensation of my findings, presented without diving too deep into the technicalities (I’ll link to more in-depth resources for those interested).

So what’s wrong with div?

For most developers (myself included), HTML often feels like it’s all about presentation. This misconception leads to the overuse of <div> tags. For example, instead of writing:

<p> Some Para... </p>