HTML Div Element
The <div> tag is a generic block-level container used to group other elements together, primarily for styling and layout purposes with CSS or JavaScript.
By itself, a <div> has no semantic meaning β it's a plain box. Modern HTML5 encourages using semantic elements like <section> or <article> where they fit better, reserving <div> for purely structural grouping.
<div class="box">content</div>Grouping content
Divs are commonly used to wrap sections of a page (like a sidebar or card) so CSS can style or position the whole group at once.
Div vs semantic tags
Where possible, prefer <header>, <nav>, <main>, <section>, or <article> over <div> since they add meaning for accessibility and SEO.
<div class="card">
<h2>Title</h2>
<p>Description</p>
</div>Title
DescriptionA div groups a heading and paragraph so they can be styled together as one 'card'.
<div style="display:flex; gap:10px;">
<div>Box A</div>
<div>Box B</div>
</div>Box A Box BNested divs with flexbox create a simple horizontal layout.
Key points
- <div> is a generic, non-semantic block container.
- Used to group elements for CSS styling or JS targeting.
- Prefer semantic tags like <section> when meaning matters.
- Divs are extremely common in real-world layouts.