Learn the Front-end Beta Search

<div>

Draft

Definition

The <div> HTML element is a versatile and generic container that is used to group and organize other elements within an HTML document. It does not have any specific semantic meaning and is often used as a building block for creating layouts or applying styles to a group of related elements.

Syntax

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

Attributes

The <div> element supports all global attributes:

<div id="main-content" class="container" data-section="hero">
  <h1>Welcome to our website!</h1>
  <p>This is some introductory text.</p>
</div>

Examples

Basic Container Usage

HTML

Section Title

This is a paragraph inside a div container.

Code
<div class="bg-gray-100 p-6 border rounded">
  <h2 class="text-2xl font-bold mb-4">Section Title</h2>
  <p class="text-gray-700 mb-4">This is a paragraph inside a div container.</p>
  <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
    Click me
  </button>
</div>

Layout Structure

HTML

Header Section

Sidebar

Main Content

This is the main content area of the page.

Footer Section
Code
<div class="bg-white border rounded overflow-hidden">
  <div class="bg-blue-500 text-white p-4">
    <h1 class="text-xl font-bold">Header Section</h1>
  </div>

  <div class="flex">
    <div class="w-1/4 bg-gray-100 p-4">
      <h3 class="font-semibold mb-2">Sidebar</h3>
      <ul class="space-y-1">
        <li><a href="#" class="text-blue-600 hover:underline">Home</a></li>
        <li><a href="#" class="text-blue-600 hover:underline">About</a></li>
        <li><a href="#" class="text-blue-600 hover:underline">Contact</a></li>
      </ul>
    </div>

    <div class="flex-1 p-4">
      <h2 class="text-lg font-semibold mb-3">Main Content</h2>
      <p>This is the main content area of the page.</p>
    </div>

  </div>

  <div class="bg-gray-100 p-4 text-center text-gray-600">
    Footer Section
  </div>
</div>

Card Layout

HTML

Card Title

This is a description of the card content.

Another Card

Another card with different content.

Third Card

Yet another card example.

Code
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white border rounded-lg shadow-sm overflow-hidden">
    <div class="bg-blue-500 h-32"></div>
    <div class="p-4">
      <h3 class="font-semibold text-lg mb-2">Card Title</h3>
      <p class="text-gray-600 mb-4">This is a description of the card content.</p>
      <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
        Learn More
      </button>
    </div>
  </div>

  <div class="bg-white border rounded-lg shadow-sm overflow-hidden">
    <div class="bg-green-500 h-32"></div>
    <div class="p-4">
      <h3 class="font-semibold text-lg mb-2">Another Card</h3>
      <p class="text-gray-600 mb-4">Another card with different content.</p>
      <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
        Get Started
      </button>
    </div>
  </div>

  <div class="bg-white border rounded-lg shadow-sm overflow-hidden">
    <div class="bg-purple-500 h-32"></div>
    <div class="p-4">
      <h3 class="font-semibold text-lg mb-2">Third Card</h3>
      <p class="text-gray-600 mb-4">Yet another card example.</p>
      <button class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600">
        Explore
      </button>
    </div>
  </div>
</div>

Form Container

HTML

Contact Form

Code
<div class="max-w-md mx-auto bg-white p-6 border rounded-lg shadow-sm">
  <h2 class="text-2xl font-bold mb-6 text-center">Contact Form</h2>

  <form class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
      <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
      <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
      <textarea rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
    </div>

    <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors">
      Send Message
    </button>

  </form>
</div>

Browser Support

The <div> element is supported in all browsers and has been a standard HTML element since HTML 3.2.

Best Practices

  1. Semantic HTML: Use semantic elements like <header>, <nav>, <main>, <section>, <article>, and <footer> when possible instead of generic <div> elements
  2. Accessibility: Ensure <div> elements used for interactive purposes have proper ARIA roles and labels
  3. CSS Classes: Use meaningful class names that describe the purpose of the div
  4. Nesting: Avoid excessive nesting of div elements as it can make the HTML structure complex and hard to maintain

Common Use Cases

  • Layout containers: Creating page sections, sidebars, and content areas
  • Styling groups: Applying CSS styles to multiple related elements
  • JavaScript hooks: Providing elements for JavaScript to manipulate
  • Responsive design: Creating flexible layouts that adapt to different screen sizes
  • Component structure: Building reusable UI components
  • <section>: For thematic grouping of content
  • <article>: For self-contained, distributable content
  • <aside>: For content that is tangentially related to the main content
  • <header>: For introductory content or navigational aids
  • <footer>: For footer information
  • <main>: For the main content of the document