Difference between div and span tags

In HTML there are two types of elements.
1. Block Level Elements
2. Inline Level Elements
The “div” belongs to the block level elements. That means the moment you define anything within div tag, it takes the entire block of the page until you define a width for it.
1<div class="container">
2 <p>Hello World!</p>
3</div>
Now this will take the width of entire page until the
code below shows up.
1<div class="container" style="width:80%">
2 <p>Hello World!</p>
3</div>
Above div tag will consume 80% of the page to print
the text. Also if you define two div tags it will appear
below. That’s why it’s called block level elements.
Inline level elements never consume the entire page
but only the part where it is used. Even if you define
two span tags, it will appear inline with other.
1<span>Text1</span>
2<span>Text2</span>
Even if you define it below, it will printed on the
page as
Text1Text2
You can try this out on an editor and test it with any
browser. Hope I cleared your doubt.
Add on’s:
Other block level elements are <p>, <iframe>, <h1> till
<h6> etc
Other inline level elements are <a>, <strong>, <em>,
<sub>, <sup> etc

Source