Ссылка или кнопка — что выбрать, чтобы работали Tab, новая вкладка и Google

Кнопка «Подробнее» на карточке товара. Выглядит как кнопка: яркая, со скруглёнными углами. Попробуй открыть её в новой вкладке колёсиком мыши. Ничего не вышло? Значит, внутри не ссылка.

Внешний вид тут ни при чём. Кнопкой элемент делает не CSS, а тег. И от тега зависит, что браузер разрешит с ним сделать: открыть в новой вкладке, нажать пробелом, пройти по нему поисковым роботом.

Правило помещается в один вопрос: поменяется ли адрес в строке браузера? Да — это ссылка, <a href>. Нет, что-то происходит на месте — это кнопка, <button>.

Что есть что

Ссылка ведёт куда-то: на другую страницу, другой сайт, файл или место на этой же странице. У неё всегда есть адрес — атрибут href.

Кнопка что-то делает: отправляет форму, открывает окно, ставит лайк, добавляет товар в корзину. Адреса у неё нет — только действие.

MDN формулирует жёстко: гиперссылку стоит использовать только для перехода на настоящий адрес. Для всего остального есть кнопка.

Сравнение по критериям

• Клавиатура. Ссылка срабатывает по Enter. Кнопка — по Enter и по пробелу. Человек жмёт пробел на «кнопке», а это ссылка — и вместо действия страница просто прокручивается вниз.
• Новая вкладка. Ссылку можно открыть в новой вкладке: Ctrl+клик, колёсико, правый клик. Можно скопировать её адрес и отправить другу. С кнопкой ничего из этого не работает — адреса нет.
• Поиск Google. Робот Google переходит по адресам из href у тегов <a>. Кнопки он не нажимает. Если меню или номера страниц сделаны кнопками, часть сайта может остаться невидимой для поиска. Подробнее — в статье что такое SEO.
• Скринридер. Он объявляет «ссылка» или «кнопка». Человек ждёт разного: от ссылки — перехода, от кнопки — действия на месте.
• Подвох ссылки. Без href тег <a> — вообще не ссылка. Клавишей Tab на него не встать.
• Подвох кнопки. Внутри <form> кнопка по умолчанию отправляет форму. Даже если это кнопка «Показать пароль». Пиши type="button" всему, что не отправка. Как собрать форму, где это не выстрелит, — в гайде про форму обратной связи.

Почему <div onclick> проигрывает обоим

ИИ-генераторы кода часто выбирают третий путь: <div> или <span> с обработчиком клика. Или ссылку-заглушку <a href="#">, которая на самом деле работает как кнопка. MDN так и пишет: ссылками часто злоупотребляют как фейковыми кнопками.

<div onclick> не получает фокус с клавиатуры. Его не нажать ни Enter, ни пробелом. Скринридер не знает, что на него вообще можно нажать. А мышью всё работает — поэтому баг не видно, пока не попробуешь без мыши.

Можно навесить role="button" и tabindex="0". Но MDN предупреждает: тогда нажатия Enter и пробела придётся обрабатывать самому. Настоящий <button> делает всё это бесплатно.

Кому что подойдёт — прямой ответ

Ссылка, даже если нарисована как кнопка:

• «Подробнее», «Смотреть все», «Перейти в каталог»;
• пункты меню, хлебные крошки, номера страниц;
• «Войти», если она ведёт на отдельную страницу входа;
• «Скачать прайс» — это ссылка на файл.

Кнопка, даже если выглядит как обычный текст:

• «Отправить», «Сохранить», «Добавить в корзину»;
• открыть модальное окно, раскрыть меню, переключить тему;
• лайк, «Показать пароль», «Скопировать».

Как проверить свой сайт за минуту

1. Убери руку с мыши и пройди страницу клавишей Tab. Каждая ссылка и кнопка должна получать видимую рамку фокуса. Что-то кликабельное пропускается — перед тобой div с обработчиком.
2. Нажми колёсиком на всё, что ведёт на другие страницы. Меню, «Подробнее», карточки товаров. Не открылась новая вкладка — это не ссылка.
3. Нажми пробел на кнопках. Кнопка должна сработать. Если вместо этого страница уехала вниз — под «кнопкой» ссылка.

Три проверки находят почти все перепутанные элементы. Чинить их просто: поменять тег, стили оставить.

Если пишешь код с ИИ, добавь в запрос одну строку: «переходы — только <a href> с настоящим адресом, действия — только <button type="button">, никаких div с onclick». Так целый класс багов не появится вовсе.

Можно ли сделать ссылку, которая выглядит как кнопка?

Да, и это нормально. Внешний вид задаёт CSS. Главное, чтобы под ним был правильный тег для того, что элемент делает.

Что делать с <a href="#"> в готовом коде?

Посмотри, что происходит по клику. Меняется адрес — впиши настоящий адрес в href. Выполняется действие — замени на <button type="button">.

В React переход по клику делают через navigate(). Это кнопка?

Для обычного перехода бери компонент <Link> из роутера — он рисует настоящий <a href>. Тогда работают и новая вкладка, и копирование адреса. navigate() оставь для переходов после действия, например после сохранения формы. Что такое React и зачем он нужен — в отдельной статье.