​Когда нужно использовать кнопки, а когда ссылки?

В веб-разработке часто возникает вопрос: использовать кнопку (<button>) или ссылку (<a>) для взаимодействий? Хотя они внешне могут выглядеть одинаково, у них разные назначения и поведение.

Когда использовать `<button>`?
- Когда действие выполняется на странице без перехода на другую
- Когда нужна интерактивность (отправка формы, открытие модального окна, запуск скрипта)
- Отправка формы
- Открытие/закрытие модального окна
- Включение/выключение чего-то на странице
- Взаимодействие с JavaScript (AJAX-запросы, события)

<button onclick="alert('Нажато!')">Кликни</button>

Пример кнопки в форме:

<form>
  <input type="text" placeholder="Введите имя">
  <button type="submit">Отправить</button>
</form>

Когда использовать `<a>`?
- Когда нужно перейти на другую страницу (или секцию сайта)
- Когда ссылка ведет на внешний или внутренний ресурс
- Навигация по сайту
- Переход на другую страницу
- Ссылки на соцсети, статьи, файлы

<a href="https://example.com">Перейти на сайт</a>

Ссылка внутри страницы (якорь)

<a href="#section">Перейти вниз</a>
<section id="section">Контент</section>

Открытие в новом окне

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Открыть в новой вкладке
</a>

Ошибка: использовать <button> вместо ссылки

<button onclick="window.location.href='https://example.com'">Перейти</button>

👉 @frontendInterview