<div>: блочный элемент
Пример:
<div>Текст</div>
<div>Текст</div>
Текст внутри <div> ведет себя как внутри абзаца <p>, за исключением отсутствия отступов:
<p>Текст</p>
<p>Текст</p>
<div> создаёт блок, к которому можно применять стили CSS: ширину, высоту, цвет, скругленные углы и т. д. Это блочный элемент, занимающий 100% ширины, из-за чего последующий контент начинается с новой строки.
<span>: строчный элемент
В отличие от <div>, <span> — строчный элемент. Разница:
<div>Текст</div><span>Текст</span>
Текст внутри <span> отображается на той же строке. Он не занимает всю ширину.
Практическое применение <div> и <span> с CSS
Полная функциональность <div> и <span> раскрывается при использовании CSS. Например, внутри <div> можно обернуть текст <span> для стилизации фрагмента:
<div>
Это <span>фрагмент</span> текста.
</div>
CSS позволяет применить стили только к тексту внутри <span>, не затрагивая остальной текст внутри <div>. <div> создаёт блоки, а <span> — выделяет фрагменты текста внутри этих блоков или других элементов.