В каких случаях верстать кнопку через тэг 'a', в каких через тэг 'button'?

Question

[Vladislav]

В каких случаях верстать кнопку через тэг a, в каких через тэг button?

Answer 1

[iBird Rose]

если именно рассматривать со стороны верстальщика - верстай так, чтобы стили нормально работали как для <a> так и для <button>. не прогадаешь. бэкэндеры разные бывают.

Answer 2

[Antonio Solo]

если тебе не важно нативное поведение button и a (а судя по вопросу тебе это не важно) и ты обрабатываешь события через js - то вообще пофиг что там будет. хоть div

кроме одного момента: SEO - робот обходит <a href=''>, а нажатия кнопок и js - нет

Comments

[Vladislav]

если ссылкой кнопку верстать, то я использую так <a href="" role="button">Войти</a> верна ли запись?

[Antonio Solo]

Vladislav, role не помешает, но для отображения на экране или навигации толку от него нет

[Antonio Solo]

Vladislav, если у тебя ссылка, которая выглядит как кнопка, но суть ее - ссылка - то не надо делать "role button". смысл ссылки - "переход" , смысл кнопки - "действие"

Answer 3

[GRMua]

Очень просто. Все что ведет на другую страницу или ресурс - это ссылка a, все остальное кнопка button.

Answer 4

[Vladislav]

button = это кнопка.
a - это текст ссылка.

Comments

[Vladislav]

Что это за тэги, я в курсе,вопрос в том, что на некоторых сайтах в роли кнопки стилизуют под кнопку тэг 'a'

[Vladislav]

Алексей Аминодов-Борисов, на собесе задали, в какаих случаях лучше,я сказал свое мнение, их не удовлетворило, вот именно технически, когда применять 'a' , а когда 'button' в роли кнопки?

[Vladislav]

Алексей Аминодов-Борисов, то есть допусти нажал ты на копку-ссылку 'войти' в аккаунт, тебе открывается страница твоего профиля, то есть переход на новую страницу, вот тут и нужна <a href="" role=button>Войти</a>?

Answer 5

[WStanley]

Вот это на стороне клиента должно выглядеть одинаково)))

<a src="" href="" class="btn">Кнопка</a>
<button class="btn">Кнопка</button>

А если надо просто ссылку то:
<a src="" href="" class="link">Кнопка</a>

Comments

[Vladislav]

насколько я знаю, в форме точно button type="submit" или input type="button" используют, а например есть кнопка 'войти' то есть в личный кабинет например, аккаунт, я использовал кнопку, но тимлид сказал, что в таких случает стилизовать надо ссылки?

[WStanley]

Vladislav, а ты ему в ответ - вот в доке написано, что с классом btn что ссылка(а), что кнопка(button) имеют одинаковый внешний вид и поменять нет проблем! :)

Answer 6

[Kaisar Kuanysh]

В плане внешнего вида - разницы вообще никакой.
Зависит от того, как вы будете реализовывать действие на нажатие элемента. Если уверены, что будет много джаваскрипта или же будет использован какой нибудь фреймворк - то можно активно использовать button. Если же джаваскрипта мало или вовсе нет, то лучше через 'a'.
Чтобы таких вопросов возникало меньше, важно понимать, что каждый браузер имеет право интерпретировать каждый ваш тэг или любой html, css, js код по своему. А функционал тэга 'a' - это соглашение в html

Answer 7

[Vaultboy84]

Кнопка подразумевает выполнение скрипта. Ссылка - это только ссылка. Кто делает иначе - криворукий говнокодер. Извращаться можно по разному, но это не значит, что тут стоит разбирать всяких говноделов.