Що краще використовувати у HTML верстці: посилання або кнопки?
Привіт:) При верстці макету не завжди зрозуміло, що перед нами: кнопка або посилання. Зовні ці елементи досить схожі, але їх функції відрізняються, і браузер реагує на них по-різному. Тому неправильний вибір може призвести до помилок у роботі веб-сторінки.
Чому виникає проблема
Посилання — це елемент навігації. Зазвичай воно виглядає як звичайний текст, натискаючи на який користувач переходить на іншу сторінку або переміщується до іншого місця на поточній сторінці. Тобто посилання відповідає за взаємозв'язок веб-ресурсів або розділів одного ресурсу. Посилання створюються за допомогою тегу <a>.
<a href="https://petrov.net.ua">Блог IT-шника</a>Кнопка — це функціональний елемент. Вона відповідає за виконання певної функції: додати до кошика, здійснити покупку, надіслати, проголосувати і т.д. Для кнопок використовують тег <button>.
<button class="button">1 234 грн.</button>Проблеми виникають, коли зовні кнопка досить схожа на посилання: текст без плашки або посилання нагадує кнопку (текст розташований на фоні прямокутної плашки).
Що трапиться, якщо замість посилання зробити кнопку
Якщо URL-адресу обернути не <а>, а тегом <button>, то при натисканні користувачем на праву кнопку миші браузер запропонує виконати дії, які належать при натисканні на кнопку. Адресу не можна відкрити у новій вкладці або надіслати через контекстне меню.
Така кнопка не дозволить відкрити сторінку в новій вкладці та через комбінацію клавіш - [Ctrl]+[ліва кнопка миші].
При наведенні курсору на правильне посилання, його адреса з'являється внизу вікна браузера. URL-адреса, обернута в <button>, не з'явиться.
Що буде, якщо замість кнопки зробити посилання
При натисканні користувачем на посилання правою кнопкою миші браузер пропонує дії, які можна зробити саме з посиланням:
Якщо функціональний елемент обернути тегом <a>, то при натисканні правою кнопкою миші спливаюче вікно буде як у посилання, але воно не матиме сенсу. Таке "посилання" не має коректної адреси, а значить відкрити, зберегти, копіювати її або поділитися нею неможливо.
<a href="javascript:;">Насправді це кнопка</a>При наведенні курсору на псевдопосилання у нижній частині вікна браузера з'явиться не адреса, а javascript:; або АдресаПоточноїСторінки/#.
Як визначити елемент за макетом
Конкретні вказівки часто прописують у технічному завданні до макету. У стайлгайді макету можна переглянути стани елемента.
У посилання повинні бути стилі для стану спокою, при наведенні курсору :hover, у момент натискання :focus, активного :active й іноді стану, коли користувач вже відвідував цю сторінку :visited.
Кнопка не має стану :visited, зате є стан блоку :disabled.
Проте розраховувати лише на макет не варто. У посилання може не бути :visited, а у блоку :disabled. Це може заплутати.
Все ж таки кнопка чи посилання?
Якщо дизайнер з якихось причин не відмалював стану взагалі, то доведеться керуватися однією логікою.
| Посилання | Кнопка | |
| За що відповідає | Навігація, тобто користувач переміщується на іншу частину сторінки або на нову сторінку. | Виконання будь-якої функції без переходу на іншу сторінку (додати до кошика, купити, надіслати, проголосувати, увійти і т.д.) |
| Що бачить користувач | — При наведенні курсору на посилання внизу вікна браузера з'являється його адреса. — Через меню по кліку правою кнопкою миші можна скопіювати, відправити, відкрити посилання у новій вкладці. | — При наведенні курсору на посилання внизу вікна браузера не відображається адреса. — Через меню по кліку правою кнопкою миші не можна скопіювати адресу або поділитися нею. |
Приклад
У верхній частині макета відображений напис "Увійти". Якщо клік по ньому повинен відкривати вікно для введення реєстраційних даних на цій же сторінці, це кнопка. Якщо при натисканні має бути відкрита окрема сторінка для входу, це посилання.
