HTML Div
A div groups content when no more specific element fits. It is useful for a layout wrapper, but it should not replace every heading, landmark, list, and button in a document.
How it works
- Use a div for a neutral grouping that needs a class or layout rule. It has no special section or interaction meaning by itself.
- Consider main, nav, article, section, header, and footer when those roles describe the content.
- A wrapper can use flex or grid in CSS. This affects the visual layout without changing the logical reading order in the source.
A practical example
<div class="event-grid">
<article><h2>Tool care</h2><p>Learn to maintain basic tools.</p></article>
<article><h2>Bike repair</h2><p>Inspect a bicycle safely.</p></article>
</div>
The div is only a grid wrapper. Each self-contained event description is an article with a genuine heading.