il div è un elemento blocco. se scrivi
codice:
<div>testo1</div>
<div>testo2</div>
i due testi stanno su righe diverse.
i div sono contenitori, possono contenere altri elementi di qualsiasi tipo.
span invece è un elemento inline: non genera "a capo" e non può contenere altri elementi blocco (ma solo al limite altri elementi inline).
codice:
<span>testo1</span>
<span>testo2</span>
in questo caso i due testi vengono visualizzati sulla stessa riga.
A cosa servono? così da soli a nulla, si tratta di elementi generici. Di solito si assegnano delle classi e si modifica lo stile tramite css. Ad esempio
codice:
<div class="paragrafo1">
Questo è un testo <span class="testorosso">e questo è rosso</span>!
</div>