В чем разница между span и div в HTML и CSS

Что проверяют

Знаете ли вы не только «блочный и строчный», но и откуда это берётся: из стилей браузера по умолчанию и из модели контента HTML. Следом обычно спрашивают, почему div с обработчиком клика плох для доступности и какой элемент взять вместо него.

Как отвечать

Оба элемента это универсальные контейнеры без семантики, в дереве доступности у них роль generic. Разница в трёх вещах:

• отображение: стили браузера по умолчанию дают div значение display: block, а span значение display: inline. Блок начинается с новой строки и растягивается на ширину родителя, строчный элемент встаёт в поток текста. Это только дефолт, он меняется одной строкой CSS;
• модель контента: div относится к потоковому контенту и может содержать почти что угодно, span к фразовому и внутри допускает только фразовый контент: текст, a, em, img, другие span;
• поведение строчного элемента: у display: inline не работают width и height, вертикальные margin не раздвигают строки, вертикальный padding рисуется, но на соседей не влияет. Нужны размеры, ставьте inline-block, inline-flex или block.

Полезно показать, где выбор делает парсер: div внутри p недопустим, и браузер сам закроет абзац. В DOM окажутся пустой p и div рядом с ним, отсюда странные отступы, которые никто не может объяснить.

Закончите семантикой: div и span нужны, когда подходящего элемента нет. Для навигации есть nav, для самостоятельного блока article, для действия button, для выделения strong и em. От этого зависят скринридеры и отчасти поисковики.

Где спотыкаются

Называют div семантическим элементом или говорят, что span нельзя сделать блоком. Семантики у них нет, а display меняется свободно.

Делают кликабельный div без role, tabindex и обработки клавиатуры. Такой «кнопкой» не воспользоваться с клавиатуры, и скринридер не объявит её кнопкой. Правильно взять button.

Кладут div в p и не понимают, откуда лишний пустой абзац, или вкладывают div в span. Браузер это отрисует, но разметка невалидна, а реальную структуру показывает только DOM в инструментах разработчика.