<div> - Content Division

The `<div>` Element

Block-level HTML 3.2

The <div> element is a generic container for flow content with no semantic meaning. It’s used to group elements for styling or JavaScript purposes when no other semantic element is appropriate.

Quick Example

<div class="card">
<h2>Welcome</h2>
<p>This content is grouped in a div container.</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="card">
<h2>Welcome</h2>
<p>This content is grouped in a div container.</p>
</div>

Syntax

<div>
  <!-- Content goes here -->
</div>

The <div> element acts as a container without adding any semantic meaning to its contents.

Attributes

The <div> element supports all global attributes like id, class, style, and data attributes.

<div id="main-content" class="container" data-section="intro">
  Content here
</div>

Common Use Cases

Layout Container

<div class="container" style="max-width: 800px; margin: 0 auto; padding: 1rem;">
<h1>Page Title</h1>
<p>Content centered with maximum width.</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="container" style="max-width: 800px; margin: 0 auto; padding: 1rem;">
<h1>Page Title</h1>
<p>Content centered with maximum width.</p>
</div>

<div class="product-card" style="border: 1px solid #ddd; padding: 1rem; border-radius: 8px;">
<h3>Product Name</h3>
<p>Product description goes here.</p>
<button>Add to Cart</button>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="product-card" style="border: 1px solid #ddd; padding: 1rem; border-radius: 8px;">
<h3>Product Name</h3>
<p>Product description goes here.</p>
<button>Add to Cart</button>
</div>

Grid Layout

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.grid-item {
  background: #f3f4f6;
  padding: 1rem;
  text-align: center;
  border-radius: 4px;
}
</style>

<div class="grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.grid-item {
  background: #f3f4f6;
  padding: 1rem;
  text-align: center;
  border-radius: 4px;
}
</style>

<div class="grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>

Flexbox Container

<style>
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #e5e7eb;
  border-radius: 4px;
}
.flex-item {
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}
</style>

<div class="flex-container">
<div class="flex-item">Left</div>
<div class="flex-item">Center</div>
<div class="flex-item">Right</div>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #e5e7eb;
  border-radius: 4px;
}
.flex-item {
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}
</style>

<div class="flex-container">
<div class="flex-item">Left</div>
<div class="flex-item">Center</div>
<div class="flex-item">Right</div>
</div>

Card Components

<style>
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1.5rem;
  margin: 1rem 0;
}
.card-header {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}
.card-title {
  margin: 0;
  color: #1f2937;
}
</style>

<div class="card">
<div class="card-header">
  <h3 class="card-title">Card Title</h3>
</div>
<div class="card-body">
  <p>Card content goes here with all the details.</p>
</div>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1.5rem;
  margin: 1rem 0;
}
.card-header {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}
.card-title {
  margin: 0;
  color: #1f2937;
}
</style>

<div class="card">
<div class="card-header">
  <h3 class="card-title">Card Title</h3>
</div>
<div class="card-body">
  <p>Card content goes here with all the details.</p>
</div>
</div>

Wrapper Divs

<div class="page-wrapper" style="min-height: 100vh; display: flex; flex-direction: column;">
<div class="header" style="background: #3b82f6; color: white; padding: 1rem;">
  Header
</div>
<div class="content" style="flex: 1; padding: 1rem;">
  Main Content
</div>
<div class="footer" style="background: #1f2937; color: white; padding: 1rem;">
  Footer
</div>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="page-wrapper" style="min-height: 100vh; display: flex; flex-direction: column;">
<div class="header" style="background: #3b82f6; color: white; padding: 1rem;">
  Header
</div>
<div class="content" style="flex: 1; padding: 1rem;">
  Main Content
</div>
<div class="footer" style="background: #1f2937; color: white; padding: 1rem;">
  Footer
</div>
</div>

When to Use Div

Use Div When…

No semantic element fits
You need a container for styling
You need to group elements for JavaScript
Creating custom layout structures

<!-- No semantic alternative for this visual grouping -->
<div class="sidebar-widget">
<h4>Recent Posts</h4>
<ul>
  <li>Post 1</li>
  <li>Post 2</li>
  <li>Post 3</li>
</ul>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- No semantic alternative for this visual grouping -->
<div class="sidebar-widget">
<h4>Recent Posts</h4>
<ul>
  <li>Post 1</li>
  <li>Post 2</li>
  <li>Post 3</li>
</ul>
</div>

Don’t Use Div When…

Semantic elements are more appropriate:

Better (Semantic)
Avoid (Non-semantic)

<article>
  <header>
    <h1>Article Title</h1>
  </header>
  <section>
    <p>Article content...</p>
  </section>
  <footer>
    <p>Published: 2025-12-11</p>
  </footer>
</article>

<div class="article">
  <div class="header">
    <h1>Article Title</h1>
  </div>
  <div class="content">
    <p>Article content...</p>
  </div>
  <div class="footer">
    <p>Published: 2025-12-11</p>
  </div>
</div>

Semantic Alternatives

Common Alternatives

Instead of…	Use…	When…
`<div class="header">`	`<header>`	Introductory content
`<div class="nav">`	`<nav>`	Navigation links
`<div class="main">`	`<main>`	Primary content
`<div class="article">`	`<article>`	Self-contained content
`<div class="section">`	`<section>`	Thematic grouping
`<div class="aside">`	`<aside>`	Tangentially related content
`<div class="footer">`	`<footer>`	Footer information

<article>
  <header>
    <h1>Blog Post Title</h1>
    <p>Published on December 11, 2025</p>
  </header>

  <section>
    <h2>Introduction</h2>
    <p>Post content...</p>
  </section>

  <footer>
    <p>Tags: HTML, CSS, JavaScript</p>
  </footer>
</article>

<div class="article">
  <div class="header">
    <h1>Blog Post Title</h1>
    <p>Published on December 11, 2025</p>
  </div>

  <div class="section">
    <h2>Introduction</h2>
    <p>Post content...</p>
  </div>

  <div class="footer">
    <p>Tags: HTML, CSS, JavaScript</p>
  </div>
</div>

Styling Divs

Basic Styling

<style>
.box {
  background: #dbeafe;
  border: 2px solid #3b82f6;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
}
</style>

<div class="box">
<p>A styled div container.</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.box {
  background: #dbeafe;
  border: 2px solid #3b82f6;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
}
</style>

<div class="box">
<p>A styled div container.</p>
</div>

Nested Divs for Layout

<style>
.outer {
  background: #f3f4f6;
  padding: 1rem;
  border-radius: 8px;
}
.inner {
  background: white;
  padding: 1rem;
  border-radius: 4px;
  border-left: 4px solid #3b82f6;
}
</style>

<div class="outer">
<div class="inner">
  <h3>Nested Content</h3>
  <p>Inner div with different styling.</p>
</div>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.outer {
  background: #f3f4f6;
  padding: 1rem;
  border-radius: 8px;
}
.inner {
  background: white;
  padding: 1rem;
  border-radius: 4px;
  border-left: 4px solid #3b82f6;
}
</style>

<div class="outer">
<div class="inner">
  <h3>Nested Content</h3>
  <p>Inner div with different styling.</p>
</div>
</div>

Responsive Columns

<style>
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.column {
  background: #f9fafb;
  padding: 1rem;
  border-radius: 4px;
}
</style>

<div class="columns">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.column {
  background: #f9fafb;
  padding: 1rem;
  border-radius: 4px;
}
</style>

<div class="columns">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>

Accessibility Considerations

Add Landmarks with ARIA

When using divs for major sections, add ARIA landmarks:

<div role="banner">
  <!-- Site header -->
</div>

<div role="navigation">
  <!-- Navigation links -->
</div>

<div role="main">
  <!-- Main content -->
</div>

Avoid Div Soup

Too many nested divs hurt accessibility:

Better
Avoid

<section class="products">
  <article class="product">
    <h2>Product Name</h2>
    <p>Description</p>
  </article>
</section>

<div class="products">
  <div class="product-wrapper">
    <div class="product-container">
      <div class="product">
        <div class="title-wrapper">
          <h2>Product Name</h2>
        </div>
        <div class="description-wrapper">
          <p>Description</p>
        </div>
      </div>
    </div>
  </div>
</div>

Divs have no semantic meaning for screen readers:

<!-- Screen reader: "Product Name, heading level 2. Description" -->
<div class="product">
  <h2>Product Name</h2>
  <p>Description</p>
</div>

<!-- Screen reader: "Article. Product Name, heading level 2. Description" -->
<article class="product">
  <h2>Product Name</h2>
  <p>Description</p>
</article>

Common Patterns

Container Pattern

<div class="container" style="max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
<h1>Centered Content</h1>
<p>This content is contained within a maximum width and centered.</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="container" style="max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
<h1>Centered Content</h1>
<p>This content is contained within a maximum width and centered.</p>
</div>

Row/Column Pattern

<style>
.row { display: flex; gap: 1rem; margin: 1rem 0; }
.col { flex: 1; background: #f3f4f6; padding: 1rem; border-radius: 4px; }
</style>

<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.row { display: flex; gap: 1rem; margin: 1rem 0; }
.col { flex: 1; background: #f3f4f6; padding: 1rem; border-radius: 4px; }
</style>

<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>

Modal/Overlay Pattern

<style>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2rem;
  border-radius: 8px;
  max-width: 500px;
}
</style>

<div class="overlay">
<div class="modal">
  <h2>Modal Title</h2>
  <p>Modal content goes here.</p>
</div>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2rem;
  border-radius: 8px;
  max-width: 500px;
}
</style>

<div class="overlay">
<div class="modal">
  <h2>Modal Title</h2>
  <p>Modal content goes here.</p>
</div>
</div>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <div> element has been supported since HTML 3.2.

Generic inline container. Learn more →

Thematic grouping of content. Learn more →

Self-contained composition. Learn more →

Introductory content or navigation. Learn more →

<div> - Content Division

The <div> Element

Quick Example

Syntax

Attributes

Common Use Cases

Layout Container

Grouping Related Content

Grid Layout

Flexbox Container

Card Components

Wrapper Divs

When to Use Div

Use Div When…

Don’t Use Div When…

Semantic Alternatives

Common Alternatives

Example Comparison

Styling Divs

Basic Styling

Nested Divs for Layout

Responsive Columns

Accessibility Considerations

Add Landmarks with ARIA

Avoid Div Soup

Screen Reader Impact

Common Patterns

Container Pattern

Row/Column Pattern

Modal/Overlay Pattern

Browser Support

Related Elements

Specifications

The `<div>` Element