structure
<div>
Generic block-level container with no inherent semantic meaning, used to group content for styling or scripting. Reach for it only when no semantic element (section, article, nav, header) fits the content.
<div class="container">...</div>Common attributes
| Attribute | Purpose |
|---|---|
| class | CSS class hook for styling |
| id | Unique identifier for JS/anchors |
| style | Inline CSS declarations |
| data-* | Custom data attributes readable from JS |
Examples
<div class="card">Hello</div>Basic styled container
<div id="app"></div>Mount point for a JS framework
<div data-user-id="42">Ada</div>Custom data attribute readable via dataset.userId
Gotcha
Overusing
creates 'div soup' that hurts accessibility and SEO. Prefer semantic elements (section, article, nav, header, footer, main) when they fit.
Related tags
<span>
Generic inline container with no semantic meaning, used to style or script a run of text or inline content. Use it when semantic inline elements like <em>, <strong>, or <code> don't fit.
<section>
A thematic grouping of content that typically has a heading and belongs in a document outline. Use it when the content is a distinct chunk of a larger whole; use <article> instead if it stands alone.
<article>
Self-contained content that could be distributed independently — a blog post, news story, forum reply, or product card. Use it when the content would make sense syndicated or on its own page.
<header>
Represents introductory content or a group of navigational aids for its nearest sectioning ancestor. Use it at the top of the page, or inside an <article> or <section> for that block's heading area.
<nav>
Marks a section of major navigation links, either within the site or the current page. Use for primary menus, breadcrumbs, and pagination — not for every group of links.