<div> is a block-level container for grouping sections of content, while <span> is an inline container for text or inline elements within a line.
A <div> starts on a new line and takes the full width available. A <span> stays within the surrounding text and takes only the width of its content. That makes <div> the tool for layout wrappers and <span> the tool for styling or grouping part of a sentence.
Neither element has semantic meaning. Both exist for layout and styling. Use them only when no meaningful element fits, such as <nav> for navigation or <strong> for important text.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
