HTML Reference
<div> — The Container Element
The most-used HTML element. A generic block container with no meaning — and that's exactly the point.
Last updated: October 2026
Definition: The <div> element is a generic block-level container with no semantic meaning. It is used to group content for styling or scripting when no other semantic element fits.
🎬 Live Example
Three divs styled as a card layout. This is the classic use case — pure structure for CSS.
💡 Every card above is a <div>. If this content were a blog post, we would use <article> instead.
Basic Syntax
<div>
<p>Any content here</p>
</div>The <div> has no attributes of its own (only global attributes). It is a wrapper.
⚙️ Global Attributes
The <div> has no specific attributes. It uses the standard global attributes available to every HTML element:
| Attribute | Purpose |
|---|---|
id | Unique identifier for CSS or JavaScript. |
class | One or more class names for CSS. |
style | Inline CSS. |
data-* | Custom data attributes for JavaScript. |
title | Tooltip on hover. |
hidden | Hides the element. |
role | ARIA role for accessibility. |
aria-* | ARIA attributes for accessibility. |
The Wrapper Pattern
Group content to apply layout styles. This is the most common use of <div>.
<div class="card">
<h3>Card Title</h3>
<p>Card description.</p>
</div>The Grid Container Pattern
A div that wraps other divs to form a grid or flex layout.
<div class="grid grid-cols-3 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>JavaScript Hook Pattern
A div used as a target for JavaScript selection or dynamic rendering.
<div id="app-root"></div>
<script>
const root = document.getElementById("app-root");
root.innerHTML = "<h1>Rendered by JS</h1>";
</script>data-* Attributes for Interactivity
Store custom data on a div that JavaScript can read later.
<div class="product" data-id="42" data-price="29.99">
<h3>Widget</h3>
</div>
<script>
const product = document.querySelector(".product");
console.log(product.dataset.id); // "42"
console.log(product.dataset.price); // "29.99"
</script>🎯 div vs Semantic Elements
The single most important decision when using <div> — is there a semantic element that fits?
| If the content is... | Use this instead |
|---|---|
| The top of a page or section | <header> |
| A set of navigation links | <nav> |
| The main content of the page | <main> |
| A self-contained piece (blog post, product) | <article> |
| A thematic grouping with a heading | <section> |
| Tangential content (sidebar, related posts) | <aside> |
| The bottom of a page or section | <footer> |
| A clickable action | <button> |
| A paragraph of text | <p> |
💡 Rule of thumb: If you're wrapping content only because CSS needs a target, use <div>. If the content has meaning (a header, an article, a navigation list), use the semantic element.
⚠️ Common Mistakes
- Using
<div>for everything. This is called "div soup" and it hurts SEO and accessibility. Screen readers can't navigate a page built entirely from divs. - Making a clickable div with
onclick. A div with onclick is not keyboard accessible and not announced as a button. Use a<button>. - Using
<div>inside<p>. This is invalid HTML — the browser will close the paragraph early. Use a<span>for inline grouping. - Forgetting that
<div>is block-level. It forces a line break. For inline containers, use<span>. - Using
<div>where<section>would be better. If a group of content has a heading and stands as a thematic unit, use<section>. - Nesting
<a>inside<div>inside<a>. Nested anchors are invalid. Flatten the structure.
♿ Accessibility Notes
<div>has no implicit role. Screen readers treat it as invisible. This is fine for wrappers — but not for meaningful content.- Never use a
<div>as a button. If you must, addrole="button",tabindex="0", and keyboard event handlers. But it's simpler and better to just use<button>. - Use landmarks for navigation. A page built entirely of divs has no landmarks. Screen reader users can't jump to the main content or navigation. Use
<header>,<nav>,<main>,<footer>for structure. - Live regions. If you update a div dynamically (like a notification), add
aria-live="polite"so screen readers announce the change.
❓ Frequently Asked Questions
What is the HTML <div> tag?
The <div> tag is a generic block-level container with no semantic meaning. It is used to group elements for styling with CSS or for JavaScript manipulation. It is the most common HTML element.
When should I use a <div>?
Use a <div> when you need a container for styling or scripting and no semantic element fits. For example, a wrapper for a grid, a flex container, or a grouping for JavaScript hooks.
When should I NOT use a <div>?
Avoid using <div> when a semantic element fits. Use <header>, <nav>, <main>, <article>, <section>, <aside>, or <footer> when the content has meaning. Use <button> for buttons, not <div> with onclick.
What is the difference between <div> and <section>?
<div> has no semantic meaning — it is purely for grouping. <section> represents a thematic grouping of content and usually has a heading. Use <section> when the group has meaning; use <div> when it is just for styling.
Can I nest <div> elements?
Yes. Divs can be nested as deeply as needed. This is common in CSS layouts where outer divs define the grid and inner divs define individual components.