Both <span> and <div> are meant to group together related parts of a web page.
But, they both serve different functions!!
The <div> element is ππ₯π¨ππ€-π₯π’π§π (meaning there’s a line-break before & after the content encased the tag) and used to group larger chunks of code
<div> isn’t meant to be used all the time though! Don’t forget about your semantic HTML
Check out an example..
The <span> element is π’π§-π₯π’π§π (meaning the content in the tag doesn’t start on a new line) and is meant for a small chunk of HTML inside a line!
It’s usually used to apply styling to a portion of inline content!! Check out an example
To solidify your understanding, check out this example of how <span> and <div> look!
And here’s a second example
the Codepen links: