Чем отличается ссылка от кнопки?

Ссылка и кнопка — это два разных семантических элемента HTML, которые решают разные задачи. Ссылка (<a>) по определению ведёт куда-то: на другую страницу, на якорь внутри документа, на файл или внешний ресурс. Кнопка (<button>) не имеет адреса назначения — она запускает действие в текущем контексте: отправляет форму, открывает диалог, переключает состояние.

Ключевые различия

• Назначение: ссылка — навигация, кнопка — действие.
• Атрибуты: у ссылки есть href, у кнопки — type (button, submit, reset).
• Поведение: ссылку можно открыть в новой вкладке (Ctrl+Click, средняя кнопка мыши), кнопку — нет.
• Доступность: скринридер объявляет ссылку как "link", кнопку как "button"; пользователь ожидает разное поведение.
• Клавиатура: обе фокусируются по Tab, но Enter активирует ссылку, а Space — кнопку.

Пример правильного использования

<!-- Ссылка: переход на страницу профиля -->
<a href="/profile/42">Профиль</a>

<!-- Кнопка: действие на текущей странице -->
<button type="button" onclick="deleteItem(42)">Удалить</button>

<!-- Форма: кнопка submit отправляет данные -->
<form action="/save" method="post">
  <input name="title" />
  <button type="submit">Сохранить</button>
</form>

Частая ошибка

Разработчики часто делают кнопку со ссылочным поведением: <a href="#" onclick="doSomething()">. Это ломает доступность — пользователь ожидает навигацию, а получает действие. Правильно: если действие — используйте <button>, если переход — <a> со стилизацией.

Итог: выбирайте элемент по смыслу, а не по внешнему виду. Ссылка — для навигации, кнопка — для действий. Это обеспечивает корректную работу клавиатуры, скринридеров, контекстного меню и SEO.