Кнопки и ссылки Время идёт, а дискуссии о кнопках и ссылках продолжаются. Недавно в чате веб-стандартов как раз обсуждали эту тему. Вроде бы всё очевидно: есть кнопка <button>, есть ссылка <a>, это разные элементы. Но неоднозначность сохраняется. Ссылка <a> достаточно навороченный и сложный элемент. Никита Дубко когда-то целый доклад об этом сделал, рекомендую посмотреть. Суть элемента <a> крутится вокруг URL-адресов, навигации и контекстных действий над этими URL-адресами. Кнопка <button> — не менее простой элемент. Исходя из встроенных возможностей, кнопка про управление формами, переключение поповеров, декларативный вызов команд и запуск произвольного JS-обработчика при нажатии. Различия улавливаются: <a> про работу с URL-адресами, а <button> про работу с формами, UI-элементами страницы и произвольным JS. На сайтах, где в основном текстовый контент, понятно, что нужно использовать. Ситуация усложнилась с развитием веб-приложений. Дизайнеры стали рисовать ссылки на другие страницы в виде кнопок и кнопки вызова действий в виде ссылок. Грань между подчёркнутым текстом и прямоугольником с текстом по центру размылась. Разработчики не особо задумываясь используют <button> с location.href, если в макете нарисована кнопка и <a> с заглушкой в href и обработчиком нажатия, если в макете нарисован текст с подчёркиванием. <!-- Код иллюстративный, не надо так делать! --> <!-- «Кнопка-ссылка» --> <button class="button" onclick="goTo('/catalog')" > Каталог </button> <!-- «Ссылка-кнопка» --> <a class="link" href="#" onclick="closeModal()" > Закрыть </a> Битва с дизайном проиграна: кнопки и ссылки рисуются по настроению, чутью и общепринятым шаблонам, а не по реальному назначению. CTA на баннере главной страницы магазина в 99% случаев будет ссылкой, которая выглядит как кнопка. Современные веб-приложения «ломают» стандартные механики. Перерисовка вместо перезагрузки, «экраны» вместо «страниц», клиентская маршрутизация вместо сетевых запросов. Стартовый URL может не меняться при работе с приложением. Вариативность дизайна и назначения порождает компоненты <ButtonLink> и <LinkButton>. Иногда появляются «универсальные бойцы», вроде <Action>, которые работают условно, в зависимости от переданных параметров (пропсов). Так, к примеру, работает веб-компонент <sl-button>, который принимает атрибуты, свойственные как для <a>, так и для <button> и под капотом решает, какой HTML-элемент использовать. А его атрибут variant определяет внешний вид. Высказываются идеи реализовать нечто подобное на уровне стандарта. Добавить новый тип кнопок (новое значение атрибута type), которые будут работать как ссылки с соответствующей семантикой. Но маловероятно, что такое появится в браузерах. <!-- Иллюстрация идеи --> <!-- Стандартная кнопка --> <button type="button" commandfor="cart-drawer" command="show-modal" > Корзина </button> <!-- Ссылка на базе кнпоки --> <button type="link" href="/catalog" > Каталог </button> Важно чувствовать грань между кнопками и ссылками, применять каждый элемент по назначению. Внешний вид не должен сбивать с толку, он отделён от семантики и определяется стилями. За внешним видом нужно разглядеть суть. #html #ui