<div>
A block container without meaning: groups elements for styling and layout.
Syntax
<div class="name">Content</div>Attributes
| Parameter | Type | Description |
|---|---|---|
| class | text | A class used to reach the block from CSS. |
Examples
A card made of several elements:
<style>
.card { border: 1px solid #ddd; border-radius: 8px; padding: 12px; max-width: 220px; }
</style>
<div class="card">
<h3>Cappuccino</h3>
<p>$3.80</p>
</div>A wrapper for flexbox:
<div style="display: flex; gap: 8px;">
<div style="background: lightblue; padding: 8px;">One</div>
<div style="background: lightpink; padding: 8px;">Two</div>
</div>Notes
First consider a semantic tag: <header>, <nav>, <main>, <section>, <article>. <div> is right when the wrapper is needed only for CSS.
See also
- <span> — An inline container without meaning: used to style part of a text.
- <section> — A thematic section of the page with its own heading.
- class — One or more classes of an element — the main way to reach it from CSS.
- display — Decides how an element behaves in the flow and how it lays out its content.
In the tutorial
- The box model — What an element consists of in CSS — content, padding, border and margin, sizes, centering and box-sizing.