<div>

Since:		HTML 4（1997）

The div element is a generic block-level container in HTML. It carries no inherent meaning on its own and is used to group other elements together for layout and styling purposes.

Syntax

<div>content</div>

<!-- Use class or id to connect with CSS and JavaScript -->
<div class="container">
  <div id="header">Header</div>
  <div id="main">Main content</div>
</div>

Main Attributes

Attribute	Description
class	Specifies one or more CSS classes. Multiple classes can be separated by spaces.
id	Specifies a unique identifier for the element. Must not be duplicated within the same page.
style	Applies inline CSS styles directly to the element.
data-*	A custom data attribute. Used to store and retrieve data from JavaScript.

Sample Code

sample_div.html

<!-- Create a card component using div -->
<div class="card">
  <div class="card-title">Title</div>
  <div class="card-body">The card body text goes here.</div>
</div>

<div class="card">
  <div class="card-title">Second Card</div>
  <div class="card-body">Nesting div elements lets you build complex layouts.</div>
</div>

<!-- Used as a Flexbox or Grid container for layout -->
<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="main-content">Main Content</div>
</div>

<!-- Used as a JavaScript manipulation target -->
<div id="modal" style="display: none;">
  <div class="modal-content">
    <p>Modal content</p>
    <button onclick="document.getElementById('modal').style.display='none'">Close</button>
  </div>
</div>

<!-- Passing data to JavaScript using data attributes -->
<div class="product-card" data-product-id="42" data-price="1980">
  <div class="product-name">Intro to Programming</div>
  <div class="product-price">$19.80</div>
</div>

Result

Two bordered cards are displayed stacked vertically. Inside each card, a title and body text are grouped together.

View sample page

Flexbox Layout

div is most commonly used as a Flexbox container, enabling flexible placement of child elements side by side, in a column, or centered.

<style>
  /* Side-by-side with center alignment */
  .flex-row {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* Cards side by side that wrap onto new lines */
  .card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  .card-grid .card {
    flex: 1 1 200px; /* Min 200px, share available space equally */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
  }

  /* Header: logo on left, nav on right */
  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
  }
</style>

<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

<header class="site-header">
  <div class="logo">Site Name</div>
  <nav>Navigation</nav>
</header>

CSS Grid Layout

For complex two-dimensional layouts where you need to control both rows and columns, CSS Grid is the better choice.

<style>
  /* 3-column grid */
  .grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
    gap: 16px;
  }

  /* Layout with sidebar */
  .page-layout {
    display: grid;
    grid-template-columns: 1fr 280px; /* Main content + sidebar */
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header  header"
      "main    sidebar"
      "footer  footer";
    gap: 16px;
    min-height: 100vh;
  }
  .page-layout .header  { grid-area: header; }
  .page-layout .main    { grid-area: main; }
  .page-layout .sidebar { grid-area: sidebar; }
  .page-layout .footer  { grid-area: footer; }

  /* Responsive: single column below 600px */
  @media (max-width: 600px) {
    .grid-3col {
      grid-template-columns: 1fr;
    }
    .page-layout {
      grid-template-columns: 1fr;
      grid-template-areas:
        "header"
        "main"
        "sidebar"
        "footer";
    }
  }
</style>

<div class="page-layout">
  <div class="header">Header</div>
  <main class="main">Main Content</main>
  <aside class="sidebar">Sidebar</aside>
  <div class="footer">Footer</div>
</div>

Notes

The div element is one of the most commonly used elements in HTML. It behaves as a block-level element, meaning it starts on a new line and stretches to fill the full width of its parent by default. It serves as a general-purpose "container" for grouping elements to apply CSS styles or manipulate them with JavaScript.

However, for meaningful document structure, prefer appropriate semantic elements. Use header for page headers, nav for navigation, main for the main content, and footer for footers. Reserve div for generic grouping that does not fit any semantic element.

To group inline content, use span — the inline generic container — instead of div.