<div>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    .card {
      border: 1px solid #ccc;
      padding: 16px;
      margin: 8px;
      border-radius: 4px;
    }
    .card-title {
      font-weight: bold;
      font-size: 1.2em;
    }
    .card-body {
      color: #555;
    }
  </style>
</head>
<body>

  <!-- 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>

</body>
</html>

Result

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

<!-- The browser renders the output like this -->
┌─────────────────────────┐
│ Title                   │
│ The card body text...   │
└─────────────────────────┘
┌─────────────────────────┐
│ Second Card             │
│ Nesting div elements... │
└─────────────────────────┘

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.