Div и span — это тэги в языке HTML, которые содержат «что-нибудь». Произвольную часть текста, кода или текста с кодом. То есть. они не привязаны к какому-либо конкретному виду контента: картинке, ссылке, списку, абзацу, таблице или иному типу содержания. В тэги div или span мы можем включить абсолютно что угодно. Какую-то часть простого текста, или же текст плюс иные тэги в нем (те же картинки, ссылки, абзацы и т.д.). И задать этим тэгам (div или span) определенные настройки (стили) — и они будут действовать на заключенный в них контент. В чем же разница между этими двумя тэгами? Почему разработчики не оставили какой-либо из них один?

Тэг div — это контейнер

Тэг div является контейнером. Ему можно задавать ширину и высоту. То есть, он является эдакой трансформируемой «коробкой», которой можно менять размеры по собственному желанию. А заодно менять размеры и заключенному в нем контенту. Так, если мы заключим в div картинку, и дважды уменьшим ему высоту — картинка тоже «сплющится». То же самое произойдет и с текстом (абзацем) внутри div. И с таблицей. И с любым другим видом контента. Контейнер div примет заданные размеры, а находящийся в нем контент уже будет подстраиваться под них.

Этот тэг используют, как правило, для больших, значительных кусков текста или кода. Для важных блоков: статьи, меню, облака тэгов, шапки, подвала, сайдбара сайта. В него заключается какой-либо важный блок, и в стилях прописываются все необходимые свойства (шрифт текста в этом блоке, его высота, отступы, рамки и т.д.). Раньше, когда не было еще HTML 5, все важные блоки сайта заключались именно в эти тэги.

Span — это не контейнер

Тэг span — это не контейнер. Ему невозможно задать ширину или высоту (задать можно, но ни высота, ни ширина его не изменится).  Это строчный элемент: такой, как ссылка. Мы не можем задавать ширину и высоту ссылке: это нелепо, ведь это простой текст. Предназначен этот тэг для небольших кусочков кода, которые нужно как-то выделить. Например, в него можно включить отдельно взятую ссылку https://vulcancasino-slots.com/ и придать ей какие-либо уникальные свойства (стили): цвет, размер шрифта, подчеркивание и т.д. В таких случаях span уместен и очень даже удобен.

Подытожим

Тэг div нужно применять к большим блокам сайта: шапке, меню, подвалу, блоку со статьей. По той простой причине, что он может задать размер всему этому блоку. Указываем тэгу div ширину и высоту, он принимает нужные размеры. А все его содержимое будет находиться внутри, и не вылезет за его рамки.

А тэг span нужно применять к небольшим частицам текста, которые иначе оформить просто не удалось. Скажем, можно выделить словосочетание «Вы — наши лучшие друзья!» в тексте ярким цветом. Или придать подчеркивание одной конкретно взятой ссылке. Не писать же для этих мелочей отдельные стили?