Menu
Text & Formatting
<div> Generic Block
A non-semantic block container — usually styled with CSS.
1When to Use <div>
Use <div> when no semantic element fits (e.g. <article>, <section>, <header>). It is purely for grouping and styling.
Example Code
css
<div class="card">
<div class="card-header">Title</div>
<div class="card-body">Body</div>
</div>2Put the element in context
A div is a generic container when no more specific semantic element fits. It can group children for layout or styling, but it does not explain the group’s purpose to a reader. Look for a meaningful section, article, navigation, or other element before choosing a generic wrapper.
3Practice with a small page
Wrap a group of related controls in a div and use it for layout. Compare that with a navigation list that belongs in nav. Keep generic wrappers where they are useful without replacing every meaningful element with a div.
Finished reading?
Mark this topic as complete to track progress.