Правильная верстка кнопок HTML

Создание кнопок на первый взгляд может показаться тривиальной задачей, не заслуживающей никакого внимания с точки зрения веб-разработчика. Многие, включая нас, создают кнопки для сайта, используя следующую конструкцию:

В качестве кнопки применяется модифицированная ссылка с якорем, а обработка события при нажатии на ссылку осуществляется с помощью JavaScript. Однако, в стандарте HTML существует тег, <button> предназначенный специально для создания кнопок,

Может сложиться впечатление, что использование <a role=”button”> некорректно со стороны синтаксиса разметки HTML.

Разница между кнопкой и ссылкой с якорем

Визуально между ними нет никакой разницы, с помощью стилизации CSS они могут выглядеть одинаково. Однако вышесказанное не относится к возможному поведению данных объектов.

Использование ссылки в качестве кнопки

Объект <a> представляет собой ссылку на целевую страницу или раздел внутри страницы. Как и для любого объекта страницы с тегом <a> для него доступны классы: :link, :visited, :hover, :active, :focus.

При навигации с клавиатуры объект взаимодействует с клавишей Enter и пользователь по ссылке переходит на другую страницу.

Использование <button>для создания кнопки

Элемент button — <button type=”button”> не выполняет никаких действий, в отличие от <button type=”reset”> для сброса формы или <button type=”submit”> выполняющего отправку формы. Для тега button доступны классы: :focus, :active, :visited. При навигации с помощью клавиатуры ожидается, что при нажатии на Enter будет использоваться JavaScript для взаимодействия с целевой страницей. Кроме этого, приложения для чтения с экрана будут распознавать <button> как кнопку.

Проблема с применением <button> для кнопок

Давайте еще раз посмотрим на приведенную выше строку кода

В некоторых случаях использование <button> не является хорошей практикой. Сам по себе <button> ничего не выполняет, он подразумевает дальнейшее взаимодействие с функциями JavaScript. Однако, если у пользователя отключен или недоступен JavaScript, то он не сможет обратиться к нашей кнопке, будь это отправка формы или кнопка под объявлением «Создание сайтов в Санкт-Петербурге» в баннере. Да, мы синтаксически верно описали объект кнопки, но сайт должен функционировать и без включенного JavaScript.

Что делать?

Лучшим способом решения этой проблемы является применение того или иного подхода в зависимости от поставленной задачи. Нужно помнить, что необходима правильная синтактическая обработка объекта кнопки <a>. Идеальным вариантом является проверка доступности JavaScript на стороне клиента, если он обнаружен, то объект показывается как <button>, в противном случае к объекту применяется <a>.