What is the exact purpose of div and span ??
i'm a little bit confused .....

in html elements are either block or inline types. block types causes line breaks and inline types can be added next to each other like text. so div is a block element when you insert to divs they are located on below the other, however, two spans are located next to each other.

I always teach it like this:

DIV = General purpose block element
SPAN = General purpose inline element

Style them with CSS for millions of different effects.

Airshow

I think Now you will clear te difference between the span and div
See below example

For example, this...

<ul class="menu">
  <li>Main page</li>
  <li>Contents</li>
  <li>Help</li>
</ul>

...is usually preferable to this:

<div class="menu">
  <span>Main page</span>
  <span>Contents</span>
  <span>Help</span>
</div>

The div tag is a generic box container.

The span tag is a generic device for adding styles (such as fonts) to text.