В чем разница между использованием button и link?

Разница между button и link элементами

Button и link (a) — это два совершенно разных элемента с разными семантическими назначениями, хотя с точки зрения UX они могут выглядеть похоже. Выбор между ними критически важен для доступности и функциональности приложения.

Семантическое назначение

Ссылка (link/a) предназначена для навигации между страницами или ресурсами. Она указывает браузеру на то, что пользователь перейдёт на другой URL или якорь на странице.

Кнопка (button) предназначена для действий — отправки формы, открытия модального окна, удаления элемента, переключения состояния и прочих интерактивных действий.

// Link - навигация
<a href="/profile">Перейти в профиль</a>

// Button - действие
<button onClick={handleDelete}>Удалить</button>

Клавиатурная навигация

Это критическое различие для доступности (accessibility):

• Link: перемещается через Tab, откликается на Enter
• Button: перемещается через Tab, откликается на Space и Enter

// Правильно: ссылка
<a href="/users/123">Посмотреть пользователя</a>

// Правильно: кнопка с onClick
<button onClick={() => deleteUser(123)}>Удалить пользователя</button>

// НЕПРАВИЛЬНО: кнопка-ссылка (смешивание семантики)
<button onClick={() => navigate('/users/123')}>
  Посмотреть пользователя
</button>

SEO и поисковые роботы

Поисковики воспринимают ссылки как граф переходов между страницами. Если использовать <button> для навигации, поисковик не поймёт структуру сайта:

// Поисковик видит эту ссылку
<a href="/articles">Все статьи</a>

// Поисковик НЕ увидит этот переход
<button onClick={() => navigate('/articles')}>Все статьи</button>

История браузера

Обычные ссылки автоматически добавляют запись в историю браузера, позволяя пользователю использовать кнопку Назад. Кнопки с onClick этого не делают (если явно не реализовать):

// Автоматически добавляет в историю
<a href="/profile">Профиль</a>

// НЕ добавляет в историю
<button onClick={handleProfileClick}>Профиль</button>

Стилизация и оформление

Браузеры имеют встроенные стили для разных элементов:

// Ссылка по умолчанию имеет цвет и подчёркивание
<a href="/home" style={{color: 'blue', textDecoration: 'underline'}}>
  Главная
</a>

// Кнопка имеет фон, границы, курсор pointer
<button style={{
  backgroundColor: '#007bff',
  color: 'white',
  padding: '10px 20px',
  border: '1px solid #0056b3',
  cursor: 'pointer',
  borderRadius: '4px'
}}>
  Отправить
</button>

Как выбрать правильный элемент

Используй LINK если:

• Пользователь переходит на другую страницу или URL
• Нужна SEO навигация
• Нужна система истории браузера
• Есть href для перехода

Используй BUTTON если:

• Выполняется действие на текущей странице
• Отправляется форма
• Открывается модальное окно
• Изменяется состояние приложения
• Нет навигации по URL

Практические примеры

// Ссылка на новую страницу
<a href="/products/123">Подробнее о товаре</a>

// Кнопка для добавления в корзину
<button onClick={() => addToCart(productId)}>Добавить в корзину</button>

// Кнопка для отправки формы
<form onSubmit={handleSubmit}>
  <input type="text" />
  <button type="submit">Отправить</button>
</form>

// Ссылка с якорем на позицию страницы
<a href="#benefits">Прочитать преимущества</a>

// Кнопка для внешнего сайта
<button onClick={() => window.open('https://example.com', '_blank')}>
  Открыть в новом окне
</button>

Доступность (a11y)

Использование правильного элемента критично для людей с ограничениями:

// Экраны для чтения правильно объявляют role и поведение
<a href="/help" aria-label="Справка">Помощь</a>

<button aria-label="Удалить этот комментарий">Удалить</button>

// Неправильно: button выглядит как link, но это не так
<button onClick={() => navigate('/help')} style={{color: 'blue', textDecoration: 'underline'}}>
  Помощь
</button>

Итог

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