HTML Div — htmlstart Learn

The <div> tag is a generic block container used for grouping and layout.

What is a <div>?

The <div> (division) element is a generic, invisible container. It groups other elements so you can style or position them together with CSS.

<div style="background: #f5f5f0; padding: 24px; border-radius: 8px;">
  <h2>Card Title</h2>
  <p>Card content goes here.</p>
  <a href="#">Learn more</a>
</div>

Multiple Divs — Layout

<div style="display: flex; gap: 24px;">

  <div style="flex: 1; padding: 20px; border: 1px solid #ccc;">
    <h3>Card 1</h3>
    <p>First card content.</p>
  </div>

  <div style="flex: 1; padding: 20px; border: 1px solid #ccc;">
    <h3>Card 2</h3>
    <p>Second card content.</p>
  </div>

</div>

Class and ID on Div

<div class="card">Styled by .card in CSS</div>
<div id="hero">Styled by #hero in CSS</div>

Prefer semantic HTML elements (<section>, <article>, <header>) over <div> when they describe the content's purpose. Use <div> only when no semantic element fits.