DEV Community

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

Posted on

16 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

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
thecodemagi profile image
Gamal Jastram

Ouff thank you!!

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore