<div>
The <div> element is a generic block-level container for flow content. It has no inherent semantic meaning and is used to group elements for styling, layout, or scripting purposes.
This page was last updated on 2025-11-27
Syntax
<div>
block content here
</div>
Attributes
- class - CSS class name (most common use)
- id - Unique identifier
- style - Inline CSS styles
- title - Advisory information
- lang - Language of the content
- dir - Text direction (ltr or rtl)
Examples
Basic container:
<div class="content-box">
<h2>Section Title</h2>
<p>Section content goes here.</p>
</div>
Layout wrapper:
<div id="main-content">
<div class="sidebar">...</div>
<div class="article">...</div>
</div>
Styling group:
<div style="background: #f0f0f0; padding: 20px;">
<p>Content with background styling.</p>
</div>
When to Use
Use <div> when you need to group block-level elements together and no semantic HTML5 element is appropriate. It is useful for creating layout structures, applying CSS styling to groups of elements, or targeting content with JavaScript.
In modern HTML5, prefer semantic elements when available: use <header> for page headers, <nav> for navigation, <main> for main content, <article> for self-contained content, <section> for thematic groupings, <aside> for sidebars, and <footer> for footers. Reserve <div> for purely presentational grouping where no semantic element fits.
Related Elements
- <span> - Generic inline container
- <p> - Paragraph element
- <blockquote> - Block quotation
- <pre> - Preformatted text block
