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