<div> Generic block container
A generic block box with no meaning, for grouping and styling.
<div> is a neutral block container with no meaning of its own. That makes it a good fit for grouping elements so CSS can style them or lay them out.
Trouble starts with "div soup", a whole page built out of divs. If a semantic element fits, such as <header>, <nav>, <main>, <article> or <button>, use that. You get the meaning and the accessibility for free.
The div element in the HTML Living Standard (opens in a new tab) calls it an element of last resort, for when nothing else fits. The Fix the Div Soup lesson shows how to swap out divs you do not need.
Syntax
<div class="name">
Content
</div>When to use it
A <div> earns its place when you need a box purely for CSS: a wrapper that limits the page width and centers it, one card in a row of product cards, a container for a background color that spans several sections, or a group of form fields you want to place side by side. It is also allowed inside <dl> to wrap each term with its description, so you can style each pair as one block.
Before you type div, ask whether the group has a heading and would belong in a table of contents. If yes, section fits better; if it could be shared on its own, use article; if it is a picture with a caption, use figure. Never put a div inside a <p>. Paragraphs cannot contain block elements, so the browser closes the paragraph early and your styles break. If you are tempted to rebuild tabular data from divs, see what tools like Div Table (opens in a new tab) generate and compare it with a real table first.
Live example
Edit the code and watch the preview.
<div class="card" style="border:1px solid #ccc;padding:12px">
<h2>Card title</h2>
<p>A div groups elements so CSS can style them together.</p>
</div>More examples
Centered page wrapper
A common use of div is a wrapper that keeps content at a readable width and centers it. The semantic elements still describe the page; the div only adds a styling box around them.
<div style="max-width:480px;margin:0 auto;padding:16px;background:#f7f7f7">
<header>
<img src="logo.svg" alt="Sunny Bakery" width="200" height="60">
</header>
<main>
<h1>Fresh bread every morning</h1>
<p>We open at 7 am, Monday to Saturday.</p>
</main>
</div>Grouping terms in a description list
The HTML standard allows div as a child of dl to wrap each term and its description. Here each pair gets its own bottom border, which would be hard to style without the wrapper.
<dl>
<div style="border-bottom:1px solid #ccc;padding:8px 0">
<dt>Flour</dt>
<dd>200 grams</dd>
</div>
<div style="border-bottom:1px solid #ccc;padding:8px 0">
<dt>Milk</dt>
<dd>300 millilitres</dd>
</div>
</dl>Tip: Try a semantic element first. div is for when nothing else fits.
Browser support
div has existed since HTML 3.2 and works in every browser ever released. Its only default style is display:block. Using div as a child of <dl> to group terms is a newer rule of the HTML Living Standard, but browsers have always rendered it correctly.
Accessibility
A div has no role, so screen readers ignore it as structure. A clickable div is no substitute for a button or a link, because keyboard users cannot reach it (WCAG 2.1.1). The W3C note Understanding Keyboard (opens in a new tab) explains why every control has to work without a mouse.
Common mistakes
Wrong
<div onclick="save()">Save</div>Right
<button type="button" onclick="save()">Save</button>A div cannot take focus or respond to the keyboard. Use a real button.
Wrong
<div class="title">About us</div>Right
<h2>About us</h2>A heading element puts the text into the document structure.
Frequently asked questions
What is the difference between div and span?
Mostly the size of the job. Both are generic containers with no meaning. <div> is block-level (flow content) and groups larger chunks such as several paragraphs or a card. <span> is inline (phrasing content) and wraps a few words inside a line of text. When a more specific element exists, use it instead of either.
Is using too many divs bad for SEO?
Divs do not hurt rankings by themselves. A page built only from divs, though, gives search engines and assistive technology fewer clues about its structure. Mark up the meaningful parts with <header>, <nav>, <main>, <article> and headings, and keep divs for pure layout or styling wrappers. If a grid of divs really is the right layout, a div table generator (opens in a new tab) can write the markup for you. Real data still belongs in a table.
Practise it
- div and span (Module 4: Structure and Semantics)
- The Box Model (Module 9: A Touch of CSS)
- Project: Style Your Card (Module 9: A Touch of CSS)