What is the difference between `<section>` and `<div>`?

html

responsive-design

best-practices

semantics

byAlex Kataev·Nov 10, 2024

Crux of the matter: <section> forms semantic regions which logically group related content with a heading. <div>, on the other hand, is a handy generic container, used for styling and scripting without any intrinsic meaningfulness.

Example with <section>:

<section>
  <h2>Recipes</h2>  <!-- Because who doesn't love a chocolate cake recipe! 🍫🍰 -->
  <p>Chocolate Cake Recipe</p>
</section>

Example with <div>:

<div class="sidebar">
  <p>Signup for our newsletter!</p> <!-- Our newsletter contains more chocolate cake recipes. Promise no spam! 📮🍫 -->
</div>

Choose <section> for significant parts of your content (think of them as chapters), and <div> for styling or scripts where semantics don’t matter (these are your trusty boxes).

The skinny on semantics and accessibility

The key discriminators between <section> and <div> are semantics and accessibility. A <section> signals to browsers and assistive technologies that there's a specific theme or purpose to a section of the page, contributing to better content navigation and outline. This not only facilitates user interaction, but can also boost your SEO rankings since it provides a clear understanding of the nature of your content.

Oh, and don't forget to label <section> elements with attributes like aria-label. It's like putting a name tag on your content for screen readers and other assistive tools.

Getting dressed with styling and scripting

Enter <div>, the workhorse of CSS styling and JavaScript interactions. No semantic frills here - just a versatile container ready for any situation where you need a block-level box and no other HTML element fits the semantic bill.

But here's a small word of caution: beware of falling into 'divitis'. Overusing <div> can lead to convoluted and div-astating 😄 code. To keep your codebase clean and readable, consider arming your <div> with descriptive attributes like class, id, or aria-roles.

Picking the right tool for the job

Where <section> shines: Use this handy element when you're carving out distinct topics or modules within your content, resembling chapters of a book that can stand alone or figure in your site's outline.
Where <div> steps in: Need a no-frills container for layouts, styles, or scripting functions with no required additional semantic meaning? <div> is your trusty companion.

Just remember, while CSS isn't picky about whether it styles <section> or <div>, strive for balance. Clarity and accessibility should reign supreme over convenience.

Clear structure, happier users (and developers)

Why structure matters

A well-organized HTML document is like a well-written book. It starts with a concise table of contents (your headers and sections) and neatly divided chapters (individual sections). Here's a small cheat sheet on achieving this:

Group your content into <section> elements. This creates a more intuitive navigation experience and boosts those SEO scores.
Don't forget to use headings after your <section> elements. Miss this, and you miss the whole point of using <section>.
And finally, <div> is perfect for when you need your structure to be, well, structure – with no added semantics. Cleaner code, cleaner design.

Common pitfalls: don't trip on these

Just in case you missed them:

Nesting sections: Watch out for overdoing <section> within <section>. It can overwhelm your document structure and confuse screen readers.
Neglected headings: Always follow a <section> with a heading. An unlabeled <section> is like a book chapter without a title—confusing and unhelpful.
Divitis: Showering your code with <div> everywhere can lead to messy and hard-to-read code. Use semantic elements whenever possible, and keep those <div>s in check!