← Back to All Tags

<div>

Creates generic container divisions or section in a document

Definition and Usage

The <div> element establishes a division or section in an HTML document. It is the most commonly used container element in HTML.

The <div> tag is a block-level element that is often used as a container for other HTML elements to style them with CSS or manipulate them with JavaScript.

Tip: The <div> element is very versatile and can be used to group elements for styling purposes or to create layout structures.
Tip: Use semantic HTML5 elements like <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> when appropriate instead of generic <div> elements.

Browser Support

The <div> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Global Attributes

The <div> tag supports the Global Attributes in HTML.

Commonly used attributes include:

  • class: Specifies one or more class names for styling
  • id: Specifies a unique id for the element
  • style: Specifies inline CSS styles
  • data-*: Custom data attributes for storing extra information

Examples

Basic Div

Create a simple container div:

Example

<div>
  <h2>My Content</h2>
  <p>This is a paragraph inside a div element.</p>
</div>

Container Layouts

Use divs to create page layouts:

Example

<div class="container">
  <div class="header">
    <h1>Website Header</h1>
  </div>

  <div class="content">
    <p>Main content area</p>
  </div>

  <div class="footer">
    <p>Copyright 2024</p>
  </div>
</div>

Grid Layout

Create a grid layout with CSS Grid:

Example

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
  }

  .grid-item {
    background: #3b82f6;
    color: white;
    padding: 30px;
    text-align: center;
    border-radius: 8px;
  }
</style>

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
</div>

Flexbox Layout

Build flexible layouts with CSS Flexbox:

Example

<style>
  .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f3f4f6;
    border-radius: 8px;
  }

  .flex-item {
    background: #3b82f6;
    color: white;
    padding: 20px;
    border-radius: 6px;
    flex: 1;
    margin: 0 10px;
    text-align: center;
  }
</style>

<div class="flex-container">
  <div class="flex-item">Box 1</div>
  <div class="flex-item">Box 2</div>
  <div class="flex-item">Box 3</div>
</div>

With Classes and IDs

Use classes and IDs for styling and JavaScript:

Example

<style>
  .card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin: 16px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .card-title {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
  }

  .card-content {
    color: #6b7280;
    line-height: 1.6;
  }

  #featured-card {
    border-color: #3b82f6;
    background: #eff6ff;
  }
</style>

<div class="card" id="featured-card">
  <div class="card-title">Featured Article</div>
  <div class="card-content">
    <p>This is a featured article with special styling.</p>
  </div>
</div>

<div class="card">
  <div class="card-title">Regular Article</div>
  <div class="card-content">
    <p>This is a regular article.</p>
  </div>
</div>

Nested Divs

Create complex structures with nested divs:

Example

<div class="page-wrapper">
  <div class="header">
    <div class="logo">
      <h1>My Website</h1>
    </div>
    <div class="navigation">
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </div>
  </div>

  <div class="main-content">
    <div class="sidebar">
      <div class="widget">
        <h3>Categories</h3>
        <ul>
          <li>Technology</li>
          <li>Design</li>
        </ul>
      </div>
    </div>

    <div class="content-area">
      <div class="article">
        <h2>Article Title</h2>
        <p>Article content goes here.</p>
      </div>
    </div>
  </div>
</div>

Semantic Alternatives

Compare div with semantic HTML5 elements:

Example

<!-- Using divs (less semantic) -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
  <div class="sidebar">...</div>
</div>
<div class="footer">...</div>

<!-- Using semantic HTML5 (better) -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

Div vs Semantic HTML

Purpose Use <div> Use Semantic Element
Page header <div class="header"> <header>
Navigation menu <div class="nav"> <nav>
Main content <div class="main"> <main>
Article/blog post <div class="article"> <article>
Content section <div class="section"> <section>
Sidebar <div class="sidebar"> <aside>
Page footer <div class="footer"> <footer>
Generic container <div> ✓ No semantic equivalent

When to Use Div vs Semantic Tags

✅ Use <div> when:
  • You need a generic container for styling or layout purposes
  • No semantic HTML5 element fits the content's meaning
  • You're grouping elements purely for CSS or JavaScript manipulation
  • Creating wrapper elements for visual effects
✅ Use semantic elements when:
  • The content has a specific meaning (header, nav, article, etc.)
  • You want better accessibility for screen readers
  • You want improved SEO
  • You want clearer document structure

CSS Layout Examples

Two-Column Layout with Flexbox

Example

<style>
  .two-column {
    display: flex;
    gap: 20px;
  }

  .column {
    flex: 1;
    padding: 20px;
    background: #f3f4f6;
    border-radius: 8px;
  }

  .column.wide {
    flex: 2;
  }
</style>

<div class="two-column">
  <div class="column wide">
    <h2>Main Content</h2>
    <p>This column is wider.</p>
  </div>
  <div class="column">
    <h3>Sidebar</h3>
    <p>This is the sidebar.</p>
  </div>
</div>

Responsive Grid with CSS Grid

Example

<style>
  .responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    padding: 20px;
  }

  .grid-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .grid-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    transition: all 0.3s ease;
  }
</style>

<div class="responsive-grid">
  <div class="grid-card">
    <h3>Card 1</h3>
    <p>Content here</p>
  </div>
  <div class="grid-card">
    <h3>Card 2</h3>
    <p>Content here</p>
  </div>
  <div class="grid-card">
    <h3>Card 3</h3>
    <p>Content here</p>
  </div>
  <div class="grid-card">
    <h3>Card 4</h3>
    <p>Content here</p>
  </div>
</div>

Centered Container

Example

<style>
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .centered-box {
    max-width: 600px;
    margin: 40px auto;
    padding: 32px;
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
</style>

<div class="container">
  <div class="centered-box">
    <h2>Centered Content</h2>
    <p>This box is centered on the page with a maximum width.</p>
  </div>
</div>

Best Practices

  • Avoid "Div Soup": Don't overuse divs. Use semantic HTML5 elements when possible
  • Use Meaningful Class Names: Give divs descriptive class names that indicate their purpose
  • Keep Nesting Minimal: Avoid excessive nesting of divs (aim for 3-4 levels max)
  • Accessibility: Divs have no semantic meaning - use ARIA roles if needed for accessibility
  • Semantic First: Ask yourself if a semantic element would be better before using a div
  • Responsive Design: Use CSS Grid and Flexbox for modern, responsive layouts
  • Organization: Group related elements together in divs for easier styling
  • Performance: Minimize unnecessary wrapper divs that don't serve a purpose

Try it Yourself

Interactive Example

Here's a live example of divs with CSS styling:

Box 1
Box 2
Box 3
Box 4

Related Tags