div
Тег <div>...</div> является контейнером. Он не имеет особых свойств. Поэтому его часто используются для формирования дизайна сайта. По умолчанию div является блочным элементом. Поэтому на странице будет занимать 100% ширины родительского элемента.span
Тег <span>...</span> является таким же контейнерем, что и div. Но span - это строчный элемент. Это означает, что его можно использовать внутри блока текста, чтобы выделить часть текста. Аналогом такого же поведения являются теги для форматирования текста <b>, <i>, <u>.
Внутри блочных элементов (div) может быть сколько угодно строчных элементов (span). Но ставить блочный элемент внутрь строчного - это ошибка. В таком случае разные браузеры будут давать непредсказуемый результат.