Почему нельзя использовать div элемент вместо button в HTML

Ответ

Использование div вместо button нарушает семантику HTML и создаёт проблемы с доступностью. Кнопки (button) имеют встроенные ARIA-роли и состояния, поддерживают фокус и клавиатурные события (Enter/Space) без дополнительного кода.

Пример проблем:

<!-- Плохо: -->
<div onclick="submitForm()">Отправить</div>

<!-- Хорошо: -->
<button type="button" onclick="submitForm()">Отправить</button>

Различия:

  1. Доступность: скринридеры распознают button как интерактивный элемент
  2. Фокус: кнопки автоматически включаются в tab-порядок
  3. Поведение: кнопки корректно обрабатывают состояния disabled
  4. Семантика: поисковики лучше понимают назначение элемента

Для стилизации лучше модифицировать button, а не заменять его div.

Ответ 18+ 🔞

Слушай, а вот это реально пиздец как бесит, когда вместо нормальной кнопки лепят div! Ну серьёзно, ёпта, будто button — это какой-то позорный элемент, а этот уродливый div с onclick — верх инженерной мысли!

Представь, ты слепой и слушаешь сайт через скринридер. А он тебе: «Блок. Отправить». И всё. А где кнопка-то, блядь? Где состояние? Нажата она или нет? А этот твой div про всё это нихуя не знает! Это как пытаться есть суп вилкой — вроде столовый прибор, но нихуя не работает как надо.

Вот смотри, какой пиздец:

<!-- Это говно: -->
<div onclick="submitForm()" class="btn">Отправить</div>

<!-- А это красота: -->
<button type="button" onclick="submitForm()" class="btn">Отправить</button>

Разница, блядь, как между «Муму» и утопленной Муму! Первый вариант — это немой Герасим, который только мычит и нихуя не может нормально объяснить. А второй — это уже полноценный человек, который и в табуляцию встанет, и скринридеру честно скажет «я кнопка, сука!», и даже если его disabled сделаешь, он спокойно откинется и скажет «я, блядь, выключен, не трогай меня».

А эти умники ещё и стилизовать не умеют! «Ой, у button свои стили по дефолту, фу!». Да ебать твои старые костыли, возьми и обнули их! Это же одна строчка в CSS:

button.btn {
  all: unset; /* Или более аккуратный сброс */
  /* А дальше лепи свои модные стили, как на том уродском div! */
}

Вот и весь секрет, в рот меня чих-пых! Не надо выдумывать велосипед с квадратными колёсами, когда уже сто лет как придумали нормальную телегу. Используй button для действий, a для переходов, а div оставь для того, для чего он создан — просто делить хуйню на куски. Не будь распиздяем, делай нормально!