Learn how to distinguish between <div> and <section> by applying the "heading test" to improve semantic HTML structure.
What it is
In HTML5, both <div> and <section> are generic containers. However, they serve different semantic purposes. A <div> is a purely presentational or structural wrapper with no inherent meaning. It exists to group elements for styling (CSS) or scripting (JavaScript). In contrast, a <section> represents a thematic grouping of content, typically with a heading. The key mental model is that <section> defines *what* the content is about, while <div> defines *how* it looks or behaves.
Related terms include semantic markup, which helps search engines and assistive technologies understand page structure, and accessibility, where proper landmarks aid navigation for screen reader users.
Why it matters
- Accessibility: Screen readers can navigate by sections if they are properly defined, allowing users to jump between major content areas.
- SEO: Search engines use semantic tags to better understand the hierarchy and relevance of your content.
- Maintainability: Code that uses meaningful tags is easier for developers to read and debug than code filled with anonymous
<div>s. - Future-proofing: Semantic HTML remains valid and useful even as CSS frameworks or JavaScript libraries change.
Syntax or steps
The decision process relies on the "Heading Test." Ask yourself: Does this block of content have a distinct theme that would benefit from its own heading? If yes, use <section>. If no, and you only need a container for layout or styling, use <div>.
- Identify the content block you want to wrap.
- Determine if the content has a specific topic or theme.
- If it has a theme, add an appropriate heading (
<h1>–<h6>) inside the container. - Wrap the themed content in
<section>. - If there is no theme or heading, wrap the content in
<div>.
Example
<!DOCTYPE html>
<html lang="en">
<body>
<!-- Correct: Thematic grouping with a heading -->
<section>
<h2>Latest News</h2>
<p>Breaking stories from around the world.</p>
</section>
<!-- Correct: Layout container without thematic meaning -->
<div class="sidebar">
<p>Ad space goes here.</p>
</div>
</body>
</html>In this example, the first block is wrapped in <section> because it contains a heading ("Latest News") and represents a distinct topic. The second block uses <div> because it is merely a visual container for a sidebar; it does not introduce a new thematic section of the document.
Common mistakes
- Using
<section>for layout: Do not use<section>just to create columns or grids. Use<div>or CSS Grid/Flexbox on a<div>instead. - Missing headings in
<section>: While not strictly invalid, a<section>without a heading loses its semantic value. If you cannot provide a heading, consider using<div>or another element like<article>if appropriate. - Overusing
<div>: Developers often default to<div>for everything. This creates "div soup," making the DOM harder to parse for machines and humans alike.
When to use it
| Feature | <div> |
<section> |
|---|---|---|
| Purpose | Styling and scripting hooks | Thematic grouping of content |
| Heading Required? | No | Yes (recommended) |
| Screen Reader Landmark | No | Yes (region landmark) |
Use <div> when you need a box for CSS positioning or JavaScript targeting. Use <section> when you are defining a chapter, tab, or distinct part of the page's narrative.
Practice
Guided Exercise: Take a paragraph of text describing "Contact Information." Wrap it in a <section> and add an <h3> titled "Get in Touch."
Challenge: Create a two-column layout using CSS Flexbox. Should the column wrappers be <div> or <section>? Why?
Hint: The columns are for layout, not thematic content, so <div> is correct.
Quick check
Question: You are wrapping a set of navigation links. Should you use <div> or <section>?
Answer: Neither. You should use the dedicated <nav> element. If forced to choose between the two, <div> is safer than misusing <section>, but <nav> is the correct semantic choice.
Summary
The distinction between <div> and <section> lies in semantics versus presentation. Use <section> for thematic groups with headings to enhance accessibility and SEO, and reserve <div> for non-semantic layout and styling containers.