<div>

Syntax

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

Examples

<div>
  <h2>Section Title</h2>
  <p>This is some content inside a div container.</p>
  <p>Divs help organize your page structure.</p>
</div>

<div style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; max-width: 400px;">
  <h3 style="margin-top: 0;">Product Card</h3>
  <p>This card demonstrates how divs can be styled to create visual components.</p>
  <button style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;">Learn More</button>
</div>

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
  <div style="background: #f0f0f0; padding: 20px; border-radius: 8px;">
    <h4>Column 1</h4>
    <p>Content here</p>
  </div>
  <div style="background: #e0e0e0; padding: 20px; border-radius: 8px;">
    <h4>Column 2</h4>
    <p>Content here</p>
  </div>
  <div style="background: #d0d0d0; padding: 20px; border-radius: 8px;">
    <h4>Column 3</h4>
    <p>Content here</p>
  </div>
</div>

<div style="background: #f5f5f5; padding: 20px;">
  <div style="background: white; padding: 15px; margin-bottom: 10px; border-radius: 4px;">
    <h3>Parent Container</h3>
    <div style="background: #e8e8e8; padding: 10px; border-left: 3px solid #007bff;">
      <p>Nested child div with custom styling</p>
    </div>
  </div>
</div>

Attributes

• id (string): Unique identifier for the div element
• class (string): CSS class names for styling
• style (string): Inline CSS styles
• data-* (string): Custom data attributes for storing extra information

Best practices

• Use semantic HTML5 elements (section, article, nav) instead of divs when appropriate
• Add meaningful class or id names that describe the content, not the appearance
• Avoid excessive div nesting (div soup) - keep your structure as flat as possible
• Use divs for layout purposes and semantic elements for content structure
• Consider using CSS Grid or Flexbox on divs for modern, responsive layouts
• Don't use divs where a more specific element would be better (like <button> for buttons)

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard