← Back to All Tags

<div>

Creates generic container divisions or section in a document

Quick Answer

What is the HTML <div> tag?

The <div> (division) tag is a generic block-level container for grouping and styling content. It has no semantic meaning but is essential for layout structure, CSS styling, and JavaScript manipulation. For better SEO and accessibility, prefer semantic elements (<article>, <section>, <nav>) when content has specific meaning.

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