Как правильно работать со ссылками и кнопками в HTML, с примерами

Ссылки и кнопки в HTML могут иногда выглядеть одинаково. Однако очень важно знать, когда использовать каждый из них.

Ярлык

Используйте ссылки, чтобы направить пользователя на другую страницу или в другую точку текущей страницы.

Используйте кнопки, чтобы применить поведение на странице или отправить данные из формы.

Я полагаю, что путаница между ссылкой и кнопкой в HTML возникает потому, что они часто выглядят одинаково.

Посмотрите пример на Github. Варианты форка или фаворита проекта практически идентичны, но один был сделан с помощью <button>, а другой с помощью <a>:

Но здесь вы увидите некоторые особенности, которые их отличают, а также более рекомендуемые варианты использования.

Ссылки в HTML

Ссылка используется для перемещения пользователя из одного места в другое.

Это происходит в привычных сценариях: вы знаете, на какую страницу направить пользователя, еще до того, как он зайдет на ваш сайт.

Для этого ссылки выполняют изменение URL. Например:

# De
https://meusite.com/

# Para
https://meusite.com/posts/post-id-42
Войдите в полноэкранный режим Выход из полноэкранного режима

HTML-ссылки также фокусируются, т.е. вы можете перейти к ним, просто нажав tab. В этой ситуации можно добавить пользовательский стиль:

a {
  color: blue;
}

a:focus {
  color: orange;
  border: 4px dashed orange
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Но чтобы ссылка была фокусируемой, она должна иметь атрибут href:

<a href="https://meusite.com/">É focalizável</a>

<a href="#">É focalizável</a>

<a href="">É focalizável</a>

<a href>É focalizável</a>

<a>Não é focalizável</a>
Войдите в полноэкранный режим Выход из полноэкранного режима

Еще одна особенность ссылок в HTML заключается в том, что, как только они оказываются в фокусе, на них можно нажать клавишу enter.

Их также можно открыть в новой вкладке. Это происходит, когда:

  • Пользователь щелкает правой кнопкой мыши по ссылке и нажимает «Открыть в новой вкладке».
  • Пользователь прокручивает мышь над ссылкой
  • Ссылка имеет атрибут target="_blank".

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

Тем не менее, другие характеристики ссылки остаются, включая изменение URL. Просто посмотрите, что происходит с ним, когда вы нажимаете на заголовок здесь, в этом посте.

Посмотрите сейчас несколько примеров ситуаций, в которых можно использовать ссылки.

Примеры использования ссылок в HTML

Примеры — лучший способ обучения.

Если вы вернетесь к началу этого поста, то увидите, что справа от заголовка есть ссылки. Эти ссылки находятся в боковом меню, если вы заходите с мобильного устройства.

Они обладают всеми теми свойствами, о которых я только что говорил в отношении ссылок:

  • Вы можете указать, на какую страницу направить пользователя
  • Изменить URL-адрес
  • Они могут быть сфокусированы (и по-разному стилизованы)
  • И они кликабельны с помощью клавиши enter.

Еще один прекрасный пример — ссылки на странице результатов Google.

Каждый из них направляет пользователя на уже определенную страницу, на которую приходят результаты из базы данных.

Чтобы закрыть примеры ссылок в HTML, взгляните на главную страницу сайта Alura.

Каждый из блоков курса знает, куда направить пользователя при нажатии на него.

Но лучший способ прояснить, каковы характеристики ссылок, — это поговорить о другой стороне.

Теперь рассмотрим характеристики кнопок HTML.

Кнопки в HTML

У кнопок немного другая идея.

Их можно отключить, если вы не хотите, чтобы пользователь нажимал на них. Просто добавьте атрибут disabled:

<button disabled>
  Botão desabilitado
</button>
Войдите в полноэкранный режим Выход из полноэкранного режима

И так же, как в случае ссылки без атрибута href, кнопка больше не фокусируется:

Напоминаете ли вы, что на ссылки можно нажимать с помощью клавиши enter? То же самое относится и к кнопкам, они также могут вызываться пробелом.

Как и ссылки, HTML-кнопки также могут *изменять URL. Просто подумайте, что страница входа в систему может переадресовать пользователя:

  • На страницу моего счета
  • На этой же странице, если он/она допустит ошибку в учетных данных
  • Или на страницу «Забыли пароль», если они ошибаются много раз.

Единственная функция, которую кнопка не позволяет (только в HTML), — это открыть в новой вкладке.

Несмотря на сходство со ссылками, использование кнопок рекомендуется в сценариях, где вы зависите от полученной информации или вам необходимо применить то или иное поведение на странице.

Вот несколько примеров.

Примеры использования кнопок в HTML

Форма!

Это самый классический сценарий, когда веб-сайт зависит от введенной информации.

Если вы введете правильные данные для входа на домашней странице Twitter, вы увидите свою ленту, в противном случае вы останетесь на том же экране. Целевая страница зависит от заполненных данных или от того, что было сделано до нажатия кнопки.

Это означает, что вместо ссылки «Войти» должна быть кнопка «Войти».

Еще одну форму с кнопкой в HTML вы найдете в нижней части страницы о блоге. Элемент вокруг текста отправки, очевидно, является &lt;button&gt;. Это потому, что сообщение, которое я получу, зависит от того, что вы напишете в поле «Сообщение» (и что? Какое сообщение вы собираетесь мне отправить?).

Еще одна идеальная ситуация для использования кнопок в HTML — это применение некоторого поведения на странице:

  • Флаг для изменения страны, присутствующий в этой электронной коммерции, устанавливается с помощью кнопки, поскольку она открывает модальное окно
  • Если вы просматриваете это сообщение с мобильного устройства, вы можете нажать на кнопку в правом верхнем углу, чтобы открыть боковое меню

Воспроизведение мультимедиа, например видео или аудио, также осуществляется с помощью кнопок. Вы знаете это из YouTube, но есть также пример на W3Schools, где пользовательские кнопки находятся вне области видео.

Стрелки смены слайдов в карусели также являются кнопкой. Если вы просмотрите страницу, на которую дана ссылка, то увидите, что это было сделано с помощью <div>, но я объясню, почему это не неправильно, в следующей главе.

Доступность кнопок и ссылок в HTML

Атрибут роли

Очень часто можно встретить «кнопки», созданные с помощью других элементов HTML. Пример:

<span class="button">Adicionar produto ao carrinho</span>
Войдите в полноэкранный режим Выход из полноэкранного режима
.button {
  display: inline-block;
  padding: 1rem;
  border-radius: 4px;
  word-spacing: 8px;
  font-weight: 700;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: white;
  background-color: coral;
  transition: .3s;
  cursor: pointer;
}

.button:hover {
  box-shadow: 0 0 10px 0px black;
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Это может выглядеть хорошо, но это ужасно для доступности. Старайтесь использовать соответствующие теги.

Но почему я сказал, что карусель не ошибается, если сделать кнопку с div?

Потому что они использовали для него атрибут role="button". Этот атрибут сообщает программам чтения экрана, что данный элемент является кнопкой, независимо от используемого HTML-тега.

Это не дает никакой автоматической функциональности кнопке, это просто атрибут доступности. Хотя я называю его «просто атрибутом доступности», он очень важен.

Чтобы лучше понять это, ознакомьтесь со статьей об атрибуте кнопки роли на MDN. То же самое касается атрибута role=»link», добавьте его к ссылкам, которые не сделаны с помощью тега <a>.

Атрибут aria-label

Еще один важный совет по обеспечению доступности — позаботьтесь о пустых или не имеющих значков ссылках и кнопках:

<a href="/">
  <img src="user.png" alt="User image" />
</a>

<button>
  <svg>
    <!-- ... -->
  </svg>
</button>

<button>
  <!-- ... -->
</button>
Войдите в полноэкранный режим Выход из полноэкранного режима

Таким образом, пользователи, использующие программы чтения с экрана, не смогут узнать, куда их направит эта ссылка или какова функция кнопки. Это связано с тем, что программы для чтения экрана не читают неориентированные SVG.

Чтобы исправить это, создайте метку для этих элементов с помощью атрибута aria-label:

<a href="/" aria-label="Veja a página inicial">
  <img src="user.png" alt="User image" />
</a>

<button aria-label="Abrir o menu lateral mobile">
  <svg>
    <!-- ... -->
  </svg>
</button>

<button aria-label="Ver o carrinho de produtos">
  <!-- ... -->
</button>
Войдите в полноэкранный режим Выход из полноэкранного режима

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

Никогда не вкладывайте одно в другое

Размещение тега <a> внутри тега <button> считается плохой практикой.

Приведенные выше результаты я получил с сайта Can Include, который сообщает, можно ли поместить определенный тег внутрь другого.

Вот взгляд на некоторые положительные результаты:

Обратный звонок

Ссылка в HTML служит главным образом для изменения URL-адреса и направления пользователя на другую страницу. Они доступны для фокусировки только при наличии атрибута href.

Кнопки HTML, с другой стороны, больше подходят для отправки данных из формы или применения поведения к модалам, видео, аудио, меню, каруселям и т.д.

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

Перейдите в раздел Can Include, чтобы проверить правильность иерархии HTML-тегов, как для ссылок, так и для кнопок и остального.

Помог ли вам этот материал? Оставляйте свои комментарии 😉

Оцените статью
devanswers.ru
Добавить комментарий