Что делает тег div

Просто блочный элемент.
Применяется для группировки элементов страницы в группу.
И всё

Это невидимый контейнер для группировки элементов.
Нужен, чтобы стилизовать блок (фон, отступы и т. д.) через CSS, упорядочить вёрстку (колонки, сетки) и управлять содержимым через JavaScript.
Если есть смысл (шапка, статья), лучше брать семантические теги (<header>, <article>).
Для строк используй <span>.

Этот элемент сам ничего не отображает. Но для вёрстки имеет большое значение через CSS, особенно с директивами макетирования flex/grid. Они являются кубиками контента для позиционирования, стилизации, выравнивания и адаптации к разным девайсам. Если ты откроешь исходник этой страницы, то увидишь типичную «гармошку» из вложенных <div>, которые задают иерархию стилей..

простой пример из реальной жизни:
что делает чемодан?
Так вот тег div, по своей сути делает тоже самое :))

Делает контейнер для элементов.