When should you use a <div> versus a <span> element?

Use <div> as a block-level container to group and lay out chunks of content, and <span> as an inline container to style a small piece of text within a line.

The problem both solve: sometimes you want to format a region of the page that does not correspond to any single meaningful tag like <p>. The answer is a generic container element — and there are two flavours, one block, one inline.

<div> — block container, for grouping and layout:

<div class="card">
    <h2>Title</h2>
    <p>Content</p>
</div>

It breaks onto its own line and spans the parent's width, which is why it is the building block of page layouts.

<span> — inline container, for styling part of a line of text:

<p>Lorem ipsum <span style="color: red;">consectetur</span> sed do eiusmod.</p>

It sits inside the text flow and wraps only the words you target.

Both are intentionally meaningless (semantically neutral). When the content actually has a meaning — navigation, an article, a section — prefer the semantic element (<nav>, <article>, <section>) over a bare <div>, and reach for <div>/<span> only when no semantic tag fits.