fbpx
date icon October 30, 2024

What is the difference between ‘section’ and ‘div’ in HTML?

CEO & Founder at CodeOp

Just a few days ago, I wrote an article about the difference between em and rem in CSS. And when to use which.

So, let’s use this week to clear some of the most common doubts regarding the best practices in HTML and CSS. Today, we’ll talk about the two common, sometimes interchangeable, HTML elements: ‘div’ and ‘section’

In modern web development, writing clean, semantic HTML code is not just a best practice—it’s essential for accessibility, SEO, and maintainability.

Trust me, I had to deal with this when we first started developing codeop.tech. One of the devs we hired didn’t use the two elements properly, which made me think that maybe nobody is asking this question in their learning phase.

In lay terms, ‘div’ is a generic container that groups elements together, and ‘section’ is a semantic tag that defines content sections.

Let me elaborate.

Understanding the ‘div’ Element

The ‘div’ element is one of the most commonly used HTML tags. It stands for “division” and is primarily used as a container to group other elements together.

However, ‘div’ is non-semantic, meaning it doesn’t provide specific meaning to the content it wraps. Remember this because it’s a major difference.

It’s typically used when no specific element is available, and its primary purpose is layout and styling.

Let’s use an example. Say we need to make a small marketing block with text, images and a background to be used within landing pages.

Using a ‘div’ here helps us keep all the components together for styling and layout without suggesting that they represent distinct sections of a page like a ‘section’ would.

<html>

<head>

<title>Marketing Block Example</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f0f0f0;

}

.marketing-block {

width: 80%;

margin: 40px auto;

padding: 20px;

background-color: white;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

text-align: center;

}

.marketing-block img {

width: 100%;

max-width: 400px;

height: auto;

border-radius: 8px;

}

.marketing-block h2 {

font-size: 2rem;

color: #333;

margin: 20px 0;

}

.marketing-block p {

font-size: 1rem;

color: #666;

margin-bottom: 20px;

}

.cta-button {

background-color: #28a745;

color: white;

padding: 12px 20px;

text-decoration: none;

border-radius: 5px;

font-size: 1rem;

}

.cta-button:hover {

background-color: #218838;

}

</style>

</head>

<body>

<div class="marketing-block">

<img src="https://via.placeholder.com/400x300" alt="Product Image">

<h2>Introducing Our New Product</h2>

<p>Experience the next level of innovation with our new product. Designed to bring you the ultimate efficiency and comfort in your daily life.</p>

<a href="#" class="cta-button">Learn More</a>

</div>

</body>

</html>

When to Use ‘div’:

Use ‘div’ elements when you need a generic container for styling or layout purposes without intending to define a specific section of your document’s content.

It’s also great when used with CSS frameworks like Flexbox and Grid, where structural elements are important, but the semantics aren’t.

Understanding the ‘section’ Element

Unlike ‘div’, the ‘section’ element is semantic. It defines a section of a document and usually includes a heading (<h1> to <h6>) to indicate what that section is about.

The ‘section’ tag is meant to group related content under a common theme, such as articles, chapters, or a report section.

We use section> to improve the readability of your code and help search engines understand the content better.

&lt;!DOCTYPE html&gt;

&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;

&lt;title&gt;Understanding &lt;/title&gt;

&lt;style&gt;

.section-style {

margin: 20px 0;

padding: 10px;

background-color: #e0f7fa;

}

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;section class=&quot;section-style&quot;&gt;

&lt;h1&gt;About Us&lt;/h1&gt;

&lt;p&gt;We are a team of developers passionate about web development.&lt;/p&gt;

&lt;/section&gt;

&lt;section class=&quot;section-style&quot;&gt;

&lt;h2&gt;Our Mission&lt;/h2&gt;

&lt;p&gt;Our mission is to build user-friendly web applications.&lt;/p&gt;

&lt;/section&gt;

&lt;/body&gt;

&lt;/html&gt;

When to Use ‘section’:

  • Use it when your content logically belongs together and can be grouped under a common heading.
  • Ideal for long-form content like articles, reports, or documentation, where you want to divide the page into meaningful sections.
  • It improves accessibility by clearly indicating content blocks to screen readers and helps with SEO by giving semantic context to the document’s structure.

When to Use ‘section’ Over ‘div’

The ‘section’ element should be used when grouping content that forms a logical, standalone section of your webpage.

  1. Systematic Grouping: When the content is related by a common theme and can be independently summarized. For example, a section of a webpage that talks about a company’s services, blog posts, or testimonials.
  2. Logical Structure: If the content could stand alone as a separate part of the document and would make sense as a part of the site’s navigation or outline, it’s a good candidate for a ‘section’.
  3. Content Sections with Headings: Typically, you’ll see ‘section’ elements containing headings like <h2>, <h3>, etc. For example, in an article, each section could start with a heading to define the content.
  4. Accessibility & SEO: Search engines and screen readers use the structure provided by ‘section’ to better understand the content and its meaning.

When to Use ‘div’ Over ‘section’

The ‘div’ element is a more general container that groups elements for styling purposes without implying any specific meaning or structure.

  1. Styling and Layout: When applying specific styles (e.g., padding, margins, background color) to a group of elements. This is especially useful for applying classes or IDs for styling purposes.
  2. Interactive Elements: If you’re grouping buttons, images, or content that will be styled and animated , ‘div’ is a great choice.
  3. Multiple Components: When you have content that doesn’t need a heading or isn’t part of a broader section, ‘div’ helps group elements without adding extra semantic weight.

Using ‘section’ and ‘div’ Together

In this example, we create a small webpage with a section about services and a testimonial section, each containing individual divs for layout purposes.

&lt;!DOCTYPE html&gt;

&lt;html lang=&quot;en&quot;&gt;

&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;

&lt;!-- Services Section --&gt;

'section'

&lt;h2 class=&quot;section-title&quot;&gt;Our Services&lt;/h2&gt;

&lt;div class=&quot;service&quot;&gt;

&lt;div class=&quot;service-icon&quot;&gt;🌐&lt;/div&gt;

&lt;div class=&quot;service-description&quot;&gt;

&lt;h3&gt;Web Development&lt;/h3&gt;

&lt;p&gt;We build fast, responsive websites tailored to your business needs using the latest technologies.&lt;/p&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;div class=&quot;service&quot;&gt;

&lt;div class=&quot;service-icon&quot;&gt;📊&lt;/div&gt;

&lt;div class=&quot;service-description&quot;&gt;

&lt;h3&gt;Data Analytics&lt;/h3&gt;

&lt;p&gt;We provide insightful data analysis to help businesses make data-driven decisions.&lt;/p&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;/section&gt;

&lt;!-- Testimonials Section --&gt;

'section'

&lt;h2 class=&quot;section-title&quot;&gt;Client Testimonials&lt;/h2&gt;

&lt;div class=&quot;testimonial&quot;&gt;

&lt;div class=&quot;testimonial-author&quot;&gt;John Doe, CEO of TechCorp&lt;/div&gt;

&lt;p&gt; &quot;The web development services exceeded our expectations. Our site is faster, more responsive, and we've seen an increase in user engagement!&quot; &lt;/p&gt;

&lt;/div&gt;

&lt;div class=&quot;testimonial&quot;&gt;

&lt;div class=&quot;testimonial-author&quot;&gt;Jane Smith, Marketing Director&lt;/div&gt;

&lt;p&gt; &quot;Their data analytics solutions helped us streamline our marketing campaigns and increase our ROI by 20%!&quot; &lt;/p&gt;

&lt;/div&gt;

&lt;/section&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;
Author: Katrina Walker
CEO & Founder of CodeOp,
An International Tech School for Women, Trans and Nonbinary People
Originally from the San Francisco Bay Area, I relocated to South Europe in 2016 to explore the growing tech scene from a data science perspective. After working as a data scientist in both the public...
More from Katrina →