How to use div and span

Two generic containers

A div groups block-level content; a span marks a phrase within flowing text. Neither communicates a purpose by itself.

<div class="notice">
  <p>Your trial ends <span class="date">Friday</span>.</p>
</div>

Prefer meaningful elements

Before adding a div, consider main, nav, article, section, button, or another element whose built-in semantics match the content.

Add reusable hooks

Classes are reusable CSS and JavaScript hooks. IDs must be unique in the document and can act as fragment-link destinations.

<div class="card" id="course-html">...</div>
<p>Price: <span class="currency">KES</span> 500</p>

Avoid container clutter

Do not wrap every element automatically. Fewer, purposeful containers produce easier styling, a cleaner document tree, and less confusing code.