DEV Community

Cover image for Stop Using <div> for Everything!
Amol Sasane
Amol Sasane

Posted on

Stop Using <div> for Everything!

#divtag #html #semantichtml #frontend

Have you ever opened your old HTML project and seen nothing but a sea of <div> tags? That’s called “ div soup” and trust me, we’ve all been there.

While <div> is useful, overusing it makes your code harder to read, maintain, and understand. More importantly, it gives zero meaning to browsers, search engines, and screen readers.

The good news? HTML already provides semantic tags designed for specific purposes. Let’s explore them! 🚀

Why Not Just <div> ?

  • ⚠️ <div> is non-semantic. It doesn’t describe its content.
  • According to the W3C:

“The div element has no special meaning at all…Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.”

  • Example: 
<div class="header">My Website</div>
Enter fullscreen mode Exit fullscreen mode

👎 This tells nothing to a search engine or screen reader.

  • Instead, use: 
<header>My Website</header>
Enter fullscreen mode Exit fullscreen mode

👍 Much more meaningful, tells the browser 'This is the Header of the website!'

Semantic HTML Tags to Use Instead of <div>

  • Benefits of Using Semantic Tags:
  1. ✅Better SEO (search engines understand your structure).
  2. ✅Better Accessibility (screen readers can announce meaningful sections).
  3. ✅Easier Maintainability (cleaner, structured code).
  4. ✅Improves collaboration (developers quickly understand sections).
  • Let’s explore a few of the more semantic alternatives to the <div> tag.
  1. <header> - Represents top section of a page or section. 
<header>
  <h1>My Website</h1>
  <nav> ... </nav>
</header>
Enter fullscreen mode Exit fullscreen mode
  1. <nav> - Defines navigation links. 
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>
Enter fullscreen mode Exit fullscreen mode
  1. <main> - Represents main content of the page (one per page). 
<main>
  <article> ... </article>
</main>
Enter fullscreen mode Exit fullscreen mode
  1. <section> - Groups related content with a heading. 
<section>
  <h2>Features</h2>
  <p>Our app has amazing features...</p>
</section>
Enter fullscreen mode Exit fullscreen mode
  1. <article> - Independent, reusable content unit. 
<article>
  <h2>Blog Title</h2>
  <p>Blog content goes here...</p>
</article>
Enter fullscreen mode Exit fullscreen mode
  1. <aside> - Side content related to the main content. 
<aside>
  <h3>Related Articles</h3>
  <ul>
    <li>Post 1</li>
    <li>Post 2</li>
  </ul>
</aside>
Enter fullscreen mode Exit fullscreen mode
  1. <footer> - Bottom of page/section. 
<footer>
  <p>© 2025 My Website</p>
</footer>
Enter fullscreen mode Exit fullscreen mode
  1. <figure> - Groups media (image/video) with caption. 
<figure>
  <img src="mountain.jpg" alt="Mountain view">
  <figcaption>A peaceful mountain view</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode
  1. <address> - Defines contact info. 
<address>
    <strong>ABC HQ</strong>
    123, XYZ Street, Pune, India
    Phone: +911234567890">
</address>
Enter fullscreen mode Exit fullscreen mode
  1. <details> - Disclosure widget to hide/reveal content.
  2. <summary> - Used with to provide a clickable summary. 
<details>
  <summary>Read more</summary>
  <p>This is the hidden content.</p>
</details>
Enter fullscreen mode Exit fullscreen mode

And many more...

Before vs. After

  • ❌ Div Soup: 
<div class="header">
  <div class="nav"> ... </div>
</div>
<div class="main">
  <div class="section"> ... </div>
</div>
<div class="footer"> ... </div>
Enter fullscreen mode Exit fullscreen mode
  • ✅ Clean, Semantic HTML: 
<header>
  <nav> ... </nav>
</header>
<main>
  <section> ... </section>
</main>
<footer> ... </footer>
Enter fullscreen mode Exit fullscreen mode
  • Example of Underrated Tags in Action: 
<section>
  <h2>Frequently Asked Questions</h2>

  <details>
    <summary>What is Semantic HTML?</summary>
    <p>Semantic HTML uses tags that have meaning, making code easier to read, maintain, and optimize.</p>
  </details>

  <details>
    <summary>Why not just use div?</summary>
    <p>Because div doesn’t describe content. Semantic tags make your content accessible and SEO-friendly.</p>
  </details>
</section>
Enter fullscreen mode Exit fullscreen mode

Conclusion

You don’t have to throw <div> out completely, it still has its place for grouping and styling when no semantic tag fits. But if you find yourself reaching for <div> by default, pause and ask:

👉 Is there a semantic tag that describes this content better?

Because at the end of the day, HTML tags isn’t just for humans, it’s for browsers too.

Write code that tells a story. ✨

For more such blogs.. Click Here

Top comments (0)