Если нажатие на баннер должно открыть каталог, тарифы или другую страницу, используйте ссылку. Если оно должно раскрыть форму или выполнить действие на текущей странице, нужна кнопка. Одинаковый прямоугольник с надписью «Подробнее» может выглядеть как кнопка в макете, но в HTML оставаться ссылкой.
Это различие важно при подготовке интерактивного баннера и его размещении на сайте. В готовом JPEG или PNG нарисованная кнопка сама по себе ничего не делает: переход задаёт ссылка, в которую помещена картинка. В HTML-баннере поведение элементов нужно определить отдельно.
Сначала опишите результат нажатия
В задании разработчику вместо «сделать кнопку» укажите конкретный результат. Например: «Открыть страницу летних курсов» или «Показать форму выбора удобного времени». В первом случае есть адрес назначения, во втором — действие внутри текущего интерфейса.
Проверьте и само обещание. «Узнать цену» может вести на страницу с тарифами, открывать калькулятор или отправлять запрос менеджеру. Это три разных сценария. Название элемента должно помогать выбрать нужное действие, а не скрывать его за одинаковой надписью.
Когда нужна ссылка
Для перехода на другую страницу используйте <a href="…">. Так посетитель получает обычную ссылку: может скопировать её адрес и воспользоваться привычными командами браузера. Оформить её можно как заметную кнопку с фоном, рамкой и отступами.
Не заменяйте обычный переход кнопкой, которая меняет адрес через JavaScript, только потому, что дизайнер назвал элемент кнопкой. Такое решение требует дополнительной проверки привычных способов работы со ссылкой. Внешний вид не должен определять её HTML-роль.
Например, для условного каталога достаточно такой основы:
<a class="banner-action" href="/letnie-kursy/">
Посмотреть летние курсы
</a>Это пример ссылки, а не готовое оформление баннера. CSS-класс позволяет задать внешний вид. Если нужно выбрать место открытия страницы, отдельно решите, должна ли ссылка открываться в новой вкладке или в той же.
Когда нужна кнопка
Кнопка подходит, когда человек управляет текущей страницей: раскрывает дополнительные условия, запускает ролик или открывает диалог с формой. Сам тег <button> не создаст нужное действие за разработчика. Открытие диалога или запуск калькулятора необходимо реализовать и проверить.
Указывайте тип кнопки явно. type="button" подходит для обычного действия, которое не должно само по себе отправлять форму. type="submit" используют для отправки связанной формы. Без указанного типа кнопка, связанная с формой, по умолчанию отправляет её. Поэтому нажатие может отправить данные вместо ожидаемого раскрытия блока.
Если пользователь только открывает форму заявки, отправка ещё не произошла. Разделяйте эти шаги в тексте и в поведении: «Открыть форму» и «Отправить заявку» означают разные действия. После отправки покажите подтверждение или понятное сообщение об ошибке. Одного исчезновения кнопки недостаточно.
Не собирайте один переход из вложенных элементов
Не помещайте кнопку внутрь ссылки ради нужного оформления. Используйте один подходящий интерактивный элемент. Иначе вместо одного понятного действия получается сочетание элементов с разными ролями, которое сложнее проверить с клавиатуры и программой экранного доступа.
Если весь баннер уже является ссылкой, нарисованная внутри него «кнопка» может быть просто частью изображения. Для обычной ссылки-картинки проверьте альтернативный текст баннера. Не добавляйте вторую независимую кнопку поверх картинки без отдельного сценария и согласования с площадкой.
Проверка перед размещением
- Нажмите на элемент и сравните результат с заданием: открылся нужный адрес, раскрылся блок или отправилась форма.
- Проверьте действие с клавиатуры. До элемента можно добраться клавишей Tab, положение фокуса заметно, название объясняет назначение.
- Для ссылки проверьте копирование адреса и открытие средствами браузера. Для кнопки — выполнение её действия без случайной отправки соседней формы.
- Откройте размещение на телефоне. Нажатие не должно попадать на соседний элемент, а форма или диалог должны помещаться на экране.
- Повторите проверку в готовом рекламном блоке площадки. Работа локального макета ещё не подтверждает работу кода после встраивания.
Зафиксируйте в задании адрес ссылки или действие кнопки, текст элемента и ожидаемый результат. Тогда дизайнер, разработчик и специалист по размещению будут проверять один и тот же сценарий.
Видео: чем ссылка отличается от кнопки
В уроке показаны ссылки и кнопки в редакторе кода и браузере. Разбор типов button начинается с 03:21, а выбор между ссылкой и кнопкой — с 04:45.
