What is the difference between div and section in HTML?

A <div> is a generic, non-semantic container with no inherent meaning. A <section> is a semantic element that represents a thematically related group of content, typically with a heading. Use <section> when the content has a clear topic; use <div> for layout and styling purposes only.

When should I use section instead of div?

Use <section> when grouping content that shares a common theme and would logically appear in a document outline — for example, an About section, a Features section, or a Reviews section. Use <div> when you only need a container for styling or layout purposes and the content has no distinct semantic meaning.

Does using section instead of div affect SEO?

Yes, indirectly. Semantic HTML like <section> helps search engines better understand the structure and topic of your content. It also improves accessibility, which is a positive signal. However, <section> alone is not a magic SEO boost — quality content and proper headings matter far more.

Can I use a div inside a section or a section inside a div?

Yes, both are perfectly valid. A <section> can contain <div> elements for inner layout, and a <div> wrapper can contain multiple <section> elements. The key rule is: use <section> for meaningful content groups and <div> purely for structure or styling.

div vs section in HTML — Code Tutorium

The core difference

Both <div> and <section> are block-level HTML elements used to group content. The difference is entirely about meaning.

A <div> is a generic container. It tells the browser (and developers) nothing about what is inside it. A <section>, introduced in HTML5, is a semantic element — it signals that its content forms a distinct, thematically related unit within the page.

💡 One-line rule

If you could give the content a heading and it would make sense as its own topic — use <section>. If you just need a box for styling — use <div>.

What is a <div>?

The <div> element (short for division) has been part of HTML since the early days. It is a block-level, non-semantic wrapper with no inherent meaning or accessibility role. Browsers treat it as a plain box.

Its sole job is to give you a hook for CSS and JavaScript — a place to attach classes, IDs, and event listeners.

index.html

<!-- div: purely a layout/styling wrapper -->
<div class="card-grid">
  <div class="card">Item one</div>
  <div class="card">Item two</div>
  <div class="card">Item three</div>
</div>

Here the <div> elements are layout tools — they create a grid of cards. There is no meaningful topic being grouped; CSS is the only reason they exist.

What is a <section>?

The <section> element, introduced in HTML5, represents a thematic grouping of content. According to the HTML specification, a section is "a generic section of a document or application" — one that could theoretically appear in the document's outline with its own heading.

Screen readers and search engines recognise <section> as a landmark region, giving users and crawlers a clearer understanding of how the page is structured.

index.html

<!-- section: content grouped by topic -->
<section>
  <h2>About Us</h2>
  <p>We are a team of developers who love building for the web.</p>
</section>

<section>
  <h2>Our Services</h2>
  <p>We offer web design, development, and consulting.</p>
</section>

Each <section> has a clear topic and a heading. Remove those headings and the sections would lose their meaning — a sign that <section> is the right choice here.

Side-by-side comparison

comparison.html

<!-- ✅ Correct use of <section> -->
<section>
  <h2>Customer Reviews</h2>
  <p>"Best product I have ever used." — Sarah K.</p>
  <p>"Absolutely love it." — James T.</p>
</section>

<!-- ✅ Correct use of <div> -->
<div class="review-layout">
  <div class="review-card">...</div>
  <div class="review-card">...</div>
</div>

<!-- ❌ Wrong: section used purely for styling -->
<section class="blue-background">
  <img src="hero.jpg" alt="Hero image">
</section>

Why does it matter?

Accessibility

Screen readers expose <section> as a landmark region, allowing keyboard users to jump directly to it. A page full of <div> elements gives assistive technology nothing to navigate by — users must listen to the entire page from top to bottom.

📌 Accessibility note

A <section> with an accessible name (via aria-labelledby pointing to its heading) becomes a named landmark. Screen reader users can pull up a list of all landmarks and jump straight to the one they need.

SEO

Search engines use semantic markup to understand page structure. When your content is wrapped in meaningful elements like <section>, crawlers can more easily identify the topics covered on each part of your page, which can positively influence how your content is ranked and displayed.

Maintainability

Semantic HTML is also self-documenting. A developer reading your code instantly understands that a <section> block contains meaningful content, not just a styling wrapper. This makes codebases easier to read, review, and maintain over time.

When to use which — a practical guide

✅ Use <section> — an "About" block, a "Features" list, a "Pricing" area, a "Contact" form group, a "Related Articles" block. Each has a clear topic and a heading.
✅ Use <div> — a CSS grid wrapper, a flex row container, an inner card layout, a JavaScript hook. No semantic meaning needed.
❌ Don't use <section> — just to add a background colour, create a full-width stripe, or wrap a single image. That is a job for <div>.

⚠️ Common mistake

Replacing every single <div> with <section> is not "more semantic" — it is incorrect. Overusing <section> creates noise that harms accessibility, not helps it.

Can you nest them?

Absolutely. Nesting <div> inside <section> (and vice versa) is entirely valid and very common in real projects.

index.html

<section>
  <h2>Our Team</h2>

  <!-- div used for the inner grid layout -->
  <div class="team-grid">
    <div class="team-card">
      <img src="alice.jpg" alt="Alice">
      <h3>Alice</h3>
      <p>Lead Developer</p>
    </div>
    <div class="team-card">
      <img src="ben.jpg" alt="Ben">
      <h3>Ben</h3>
      <p>UI Designer</p>
    </div>
  </div>
</section>

The <section> groups the thematic content ("Our Team"). The <div> elements inside handle the grid layout — that is the correct division of responsibility.

Other semantic elements to know

HTML5 introduced several semantic alternatives to <div>. Knowing when to reach for each one will make your HTML much more expressive:

<header> — introductory content or navigation at the top of the page or a section.
<footer> — closing content: copyright, links, author info.
<main> — the primary content of the page (only one per page).
<article> — a self-contained piece of content (blog post, news story, comment) that makes sense on its own.
<aside> — content tangentially related to the main content (sidebar, callout).
<nav> — a block of navigation links.

📌 article vs section

An <article> is self-contained and can be lifted out of the page and still make sense on its own (syndicated RSS, a tweet embed). A <section> is part of a larger whole and depends on its context. When in doubt: does the content make sense alone? Use <article>. Is it one part of a bigger topic? Use <section>.

Summary

The choice between <div> and <section> comes down to intent. Use <div> when you need a generic wrapper for CSS or JavaScript and the content has no inherent topic. Use <section> when you are grouping related content around a theme — especially when it would carry a heading.

Getting this right is a small change that improves accessibility, helps search engines, and makes your HTML self-documenting. Ready to go deeper? Our full HTML course covers all the semantic elements, document structure, and best practices — completely free.

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

The core difference

What is a <div>?

What is a <section>?

Side-by-side comparison

Why does it matter?

Accessibility

SEO

Maintainability

When to use which — a practical guide

Can you nest them?

Other semantic elements to know

Summary