<div>

<div> is a generic container for flow content. It groups elements for styling or scripting without giving the group article, navigation, or section meaning.

A layout wrapper

The wrapper arranges two pieces of content using native Grid. The headings and paragraphs supply the content’s structure; the <div> supplies the styling hook.

<h1>Workshop details</h1>
<div class="layout">
  <div>
    <h2>Bring</h2>
    <p>A laptop and your questions.</p>
  </div>
  <div>
    <h2>Leave with</h2>
    <p>A page you can explain and edit.</p>
  </div>
</div>

/* Layout belongs to CSS, not the div element itself. */
.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
}
.layout > div {
  padding: 1rem;
  background: #eff6ff;
}

Content and attributes

Use global attributes such as class, a unique id, and a real data-* attribute like data-state="ready". Do not write data-* literally in markup or put comments inside a start tag’s attributes.

A <div> normally displays as a block, but display can change its layout. It accepts flow content, with a specialized use inside <dl> for grouping term-description pairs. A div must not be placed inside a paragraph; the parser closes the paragraph first.

When to choose something else

Use main for the document’s central content and article for a self-contained composition. A clickable div does not provide keyboard activation, focus, or a useful role automatically. Use a button for an action and a link for navigation.

Sources and browser support

MDN: div describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.