The Div Element
Use div as a generic container to group content.
Syntax
<div> ...grouped content... </div>The <div> element is a generic block-level container. It has no meaning of its own but is used to group other elements together.
Developers often use <div> to organize sections of a page so they can be styled or arranged as a unit.
When to use div
- To group related elements.
- As a layout building block.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer wraps a page section in a <div> with a class to apply a CSS grid layout to its children.
- A front-end team uses <div> containers to group related form fields before styling them as a card.
- A JavaScript developer targets a <div id="app"> as the mount point for a React or Vue application.
More examples
Div as a layout container
A <div> groups the card content so CSS can apply padding, border, and shadow to the whole block.
<div class="card">
<h3>Plan: Pro</h3>
<p>All features included.</p>
<button>Upgrade</button>
</div>Div as JavaScript mount point
Frameworks like React render their output into a specific <div id="app"> container in the HTML.
<!DOCTYPE html>
<html lang="en">
<head><title>App</title></head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>Nested divs for column layout
Nesting <div class="col"> inside <div class="row"> creates a two-column layout target for CSS flexbox.
<div class="row">
<div class="col">
<p>Column one content.</p>
</div>
<div class="col">
<p>Column two content.</p>
</div>
</div>
Discussion