Что лучше использовать: <button> или <a>?
По макету не всегда понятно какой элемент используется — ссылка или кнопка. Те, кто только начинают изучать веб-разработку часто путают для каких ситуации применять ссылку, а в какой кнопку. Неправильный выбор может привести к ошибкам на странице. Давайте разбираться!
Что из себя представляет каждый тег?
Кнопка — это элемент, который выполняет какую-то функциональность. С кнопкой можно выполнить определенное действие на странице: добавить в корзину, купить, отправить форму на обработку, проголосовать и многое другое.
Ссылка — это элемент навигации. Это просто текст, при нажатии на который юзер переходит на другую страницу или перемещается по блокам на текущей странице.
Что будет, если поменяем их местами?
Если мы сделаем из ссылки кнопку, то получится нечто, что работает вообще не так как нужно. Почему?
Если мы обернем URL-адрес не в тег <a>, а в тег <button>, то браузер предложит выполнить действия, которые положены для кнопки, а не для ссылки. Такой элемент нельзя будет открыть в отдельной вкладке, поделиться ссылкой и т.д.
При наведении курсора на ссылку её адрес должен появляться внизу окна браузера. URL-адрес, обёрнутый в <button>, не отобразится.
Теперь посмотрим, что будет если вместо кнопки мы сделаем ссылку.
Если функциональный элемент обернуть в тег <a>, то при клике правой кнопкой мыши всплывающее окно будет как у ссылки, но оно не будет иметь смысла. Такая «ссылка» не имеет корректного адреса, а значит конкретное взаимодействие (скопировать, открыть, поделиться и т.д) невозможно.
Что же всё-таки использовать?
Обычно всё, что необходимо описывают в техническом задании или же дизайнер отрисовывает состояния, но если этого нет, приходится думать самому и ориентироваться на логику.
Заключение
Ориентируйтесь на то, какую задачу должен выполнять элемент, какую функциональность добавить и как пользователь будет взаимодействовать с этим.
Кнопка подразумевает выполнение действия. Ссылка - это только ссылка.