What is the difference between div and span?

Neither element has a role beyond a generic container. A div is useful for grouping blocks that need styling or scripting, and a span is useful for wrapping a run of text inside a paragraph.

<div class="card">
  <p>
    Your plan renews on
    <span class="date">28 October</span>.
  </p>
</div>

When to avoid them

• Use nav instead of a div for major navigation
• Use button instead of a div with a click handler
• Use header, main and footer instead of divs with those class names
• Use ul and li instead of a stack of divs when the content is a list
• Use label and input instead of spans and divs for form controls

A page built mostly from divs is often called div soup. It works visually but gives assistive technology and maintainers almost no information about the structure.