Какие проблемы могут возникнуть, если всю вёрстку делать с использованием только div-элементов?

Отсутствие семантики затрудняет понимание структуры страницы для поисковых систем, скринридеров и других инструментов, что негативно сказывается на доступности и SEO.

<!-- Плохо: только div -->
<div>
  <div>
    <div>Заголовок</div>
    <div>Параграф</div>
  </div>
</div>

<!-- Хорошо: семантические элементы -->
<article>
  <h1>Заголовок</h1>
  <p>Параграф</p>
</article>

Усложнение поддержки и внесения изменений в код, так как структура становится менее читаемой и предсказуемой.

Снижение доступности для пользователей с ограниченными возможностями: скринридеры не могут корректно интерпретировать структуру страницы без семантических элементов, таких как <nav>, <aside>, <article> и т.д.

Ухудшение SEO: поисковые системы хуже понимают содержимое страницы, когда информация не структурирована с помощью семантических тегов.

Большее количество кода для реализации базовых структур по сравнению с использованием соответствующих семантических элементов.

/* Пример стилей для div-only структуры */
.header-container > div {
  font-size: 24px;
  font-weight: bold;
}

/* Пример стилей с семантикой */
header h1 {
  font-size: 24px;
  font-weight: bold;
}

Усложнение применения стилей: приходится использовать более длинные и специфичные селекторы из-за отсутствия семантических тегов, что может привести к проблемам с каскадом и специфичностью.