Главное отличие этих двух тегов — один из них <span> является строчным элементом, а другой <div> — блочным. Это означает, что с помощью тега <div> можно часть информации (текст, картинки и так далее) выделить в отдельный блок и задать ему определенные свойства стилей. Блок <div> всегда имеет отступы: перед <div> и после </div>. А с помощью тега <span> можно выделить строку, слово или отдельную букву внутри других тегов, а потом задать отдельный стиль для выделенного текста. Причем для <span> нельзя задать атрибуты ширины и высоты, так же как и для любого другого строчного элемента.