Когда нужно использовать button?

Кнопка (<button>) vs. Другие интерактивные элементы

Использование элемента <button> является фундаментальным решением в веб-разработке, напрямую влияющим на доступность (a11y), семантику, поведение по умолчанию и пользовательский опыт. В отличие от симуляции кнопки с помощью <div> или <span>, <button> предоставляет встроенную, готовую функциональность.

Ключевые сценарии использования <button>

1. Любое интерактивное действие, инициируемое пользователем

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

• Отправка формы (type="submit").
• Сброс данных формы (type="reset").
• Открытие/закрытие модальных окон, аккордеонов, попапов.
• Удаление элемента (письмо, товар из корзины).
• Добавление в избранное (смена иконки/состояния).
• Запуск вычислений или сложных операций на клиенте.

2. Когда критически важна доступность (Accessibility)

Элемент <button> по умолчанию обладает необходимыми свойствами для скринридеров и управления с клавиатуры:

• Фокус по умолчанию: на него можно перейти с помощью Tab.
• Активация клавишами: Enter и Пробел (в отличие от <div>, где эту логику нужно писать вручную).
• Семантическая роль: скринридер объявляет его как кнопку (role="button").
• Состояния: браузер автоматически обрабатывает состояния :hover, :focus, :active.

Пример доступной кнопки:

<button aria-label="Удалить товар 'Смартфон X'" class="icon-btn">
  <svg aria-hidden="true">...</svg> <!-- Иконка корзины -->
</button>
<!-- ARIA-атрибуты дополняют, но не заменяют семантику <button> -->

3. Для отправки или управления формой (<form>)

Использование <button> внутри <form> является семантически корректным и дает доступ к специальным типам:

<form id="signup">
  <input type="email" name="email">
  <!-- Кнопка для отправки данных формы -->
  <button type="submit">Зарегистрироваться</button>
  <!-- Кнопка для очистки полей (используйте с осторожностью) -->
  <button type="reset">Очистить</button>
  <!-- Простая кнопка без действия по умолчанию в форме -->
  <button type="button" onclick="validate()">Проверить</button>
</form>

Указание type обязательно, особенно в формах, чтобы избежать непреднамеренной отправки.

Когда НЕ нужно использовать <button>?

1. Для навигации к уникальному URL (странице или якорю внутри страницы)

В этом случае семантически правильным является элемент <a> (гиперссылка), даже если он стилизован под кнопку.

• Неправильно: <button onclick="location.href='/about'">О нас</button>
• Правильно: <a href="/about" class="btn">О нас</a>

Причина: Ссылка имеет другую семантическую роль (role="link"), поведение (открытие в новой вкладке через Ctrl+Click или context menu), и ее можно добавить в закладки браузера.

2. Для триггеров контекстных меню или сложных составных виджетов

Иногда для элементов вроде выпадающего меню (<select>) или кастомных всплывающих подсказок используются другие семантические теги (<div>, <span>) с явным указанием ARIA-ролей (role="menu", role="combobox"), но даже в этих случаях внутренние actionable-элементы часто реализуются как <button>.

Практическое правило и пример

Правило: Если элемент при клике выполняет действие (submit, delete, show/hide) – используйте <button>. Если элемент ведет на новый ресурс (страницу, документ, внешний сайт, якорь) – используйте <a>.

Пример разграничения:

<!-- Карточка товара -->
<article class="product-card">
  <a href="/product/123" class="product-card__link">
    <!-- Весь кликабельный блок для перехода на страницу товара - это ссылка -->
    <img src="product.jpg" alt="Ноутбук">
    <h3>Ноутбук игровой</h3>
    <p>Описание товара...</p>
  </a>

  <div class="product-card__actions">
    <!-- Действие "Добавить в корзину" - это КНОПКА -->
    <button class="btn btn--primary" onclick="addToCart(123)">
      В корзину
    </button>
    <!-- Действие "Добавить в избранное" - это тоже КНОПКА -->
    <button class="btn btn--icon" aria-label="В избранное" onclick="toggleFavorite(123)">
      ♡
    </button>
  </div>
</article>

Заключение

Использование <button> – это не только вопрос визуального дизайна, но и соблюдение веб-стандартов. Правильный выбор элемента:

1. Упрощает разработку (не нужно изобретать фокус и активацию).
2. Делает интерфейс доступным для всех пользователей.
3. Улучшает SEO и семантику страницы.
4. Повышает надежность и предсказуемость поведения.

Всегда начинайте с семантически верного элемента (<button> для действий, <a> для навигации) и лишь затем применяйте CSS для стилизации, чтобы достичь нужного визуального результата.