DEV Community

Cover image for Stop Overusing Divs! A Practical Guide to Semantic HTML Best Practices
Muhammad Usman
Muhammad Usman

Posted on

14 1 1 2 1

Stop Overusing Divs! A Practical Guide to Semantic HTML Best Practices

Alright, in this guide, we’ll discuss why and when to use semantic HTML elements over divs. Alright, so I just have a couple of examples for you.

First of all, why do we even want to use semantic tags instead of divs? Well:

  1. It’s easier to read and scan the HTML if it’s properly structured with semantic tags (I’ll show you why in a second).
  2. Better for SEO: It makes it easier for search engines like Google to index your content, which helps you rank higher and get more traffic.
  3. Better for screen readers/assistive tech to categorize and index your website.
  4. Accessibility: It’s just better overall.

These are the three—well, four—main reasons.

Typical Semantic HTML Boilerplate

Let me give you an example. Here’s a typical HTML boilerplate:

<!DOCTYPE html>
<html>
 <head>
 <title>Example</title>
 </head>
 <body>
 <header>
 <img src="logo.png" alt="Logo">
 <nav>
 <ul>
 <li><a href="/">Home</a></li>
 <li><a href="/about">About</a></li>
 </ul>
 </nav>
 </header>
<main>
 <section>
 <h2>About Us</h2>
 <p>Lorem ipsum...</p>
 </section>
 <section>
 <h2>How It Works</h2>
 <p>Lorem ipsum...</p>
 </section>
 <aside>Sidebar content...</aside>
 </main>
<footer>
 <p>Terms & Conditions</p>
 </footer>
 </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Breakdown:

  • <header>: Logo, introductory links.
  • <nav>: Main navigation (like that list of links).
  • <main>: Dominant content.
  • <section>: Groups related content (e.g., "About Us" and "How It Works").
  • <aside>: Sidebar or secondary content.
  • : Less important links (terms, privacy policy).

MDN Web Docs Example

On MDN’s JavaScript guide page:

<main>
 <article>
 <h1>JavaScript Guide</h1>
 <p>Learn JavaScript...</p>
 </article>
 <aside>
 <nav>
 <ul>
 <li><a href="#toc">Table of Contents</a></li>
 </ul>
 </nav>
 </aside>
</main>
Enter fullscreen mode Exit fullscreen mode

Key points:

  • <article>: The guide is self-contained. You could republish it elsewhere, and it’d still make sense.
  • <aside>: The sidebar navigation isn’t part of the main content.
  • <nav> in the footer? Nope. MDN uses it in the <aside> because it’s critical navigation.

When to Use divs

Use divs for styling/layout when no semantic meaning exists.

<div class="info-bar">
<section class="breadcrumbs">
<a href="/">Home</a> > <a href="/guides">Guides</a>
</section>
<button>Sign In</button>
</div>

Enter fullscreen mode Exit fullscreen mode

Why a div here? The info-bar groups unrelated elements (breadcrumbs and a button) purely for layout. They don’t share a semantic purpose.

Summary

Use semantic tags when:

  • Content is related (<section>).
  • It’s self-contained (<article>).
  • It’s critical navigation (<nav>).
  • It’s secondary content (<aside>).

Use divs when: You just need a box for styling.

By the way, if this guide was helpful, I’d really appreciate a big heart and follow! Thanks for reading to the end, and I hope to write for you again!

Stay connected with me on my other platforms:

LinkedIn | Medium | Bluesky

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (1)

Collapse
 
thecodemagi profile image
Gamal Jastram

Ouff thank you!!

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay