Html ссылка кликабельная ссылка
Ссылки — это то, что делает интернет настоящей паутиной.
- Кратко
- Пример
- Как понять
- Как пишется
- Атрибуты
- Подсказки
- Ещё примеры
- На практике
- Вадим Макеев советует
- Алёна Батицкая советует
- Ольга Ветер советует
- Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?
Кратко
Скопировать ссылку «Кратко» Скопировано
Пример
Скопировать ссылку «Пример» Скопировано
Яндексa href="https://www.yandex.ru/">Яндексa>
Сделаем ссылку для отправки письма на почту:
Отправить сообщение в никудаa href="mailto:nowhere@yandex.ru">Отправить сообщение в никудаa>На практике
Скопировать ссылку «На практике» Скопировано
Вадим Макеев советует
Скопировать ссылку «Вадим Макеев советует» Скопировано
🛠 Когда нужно сделать навигацию в пределах одной страницы, например, оглавление, удобно использовать якоря — то есть ссылки на отдельные элементы. При нажатии на ссылку браузер мгновенно переместится к этому элементу.
Чтобы создать такую ссылку, нужно две вещи:
- Добавить уникальный id = «element» целевому элементу.
- Сослаться на него с помощью ссылки вида #element .
Фотографии пёсиков …Фотографии пёсиков
a href="#section-1"> Фотографии пёсиков a> … section id="section-1"> h3>Фотографии пёсиковh3> section>Чтобы перемещение по якорю было плавным, можно добавить свойство scroll — behavior контейнеру, который будет прокручиваться. Чаще всего, это :
body scroll-behavior: smooth;>body scroll-behavior: smooth; >Обратите внимание, что уникальность id важна, поскольку браузер рассчитывает, что на странице есть только один такой элемент и найдёт только первый по коду, а до второго не дойдёт. Расстановку таких id лучше поручить шаблонизатору, он точно не ошибётся.
Например, генераторы статики умеют делать уникальный id из содержимого заголовка:
Уникальный заголовокh3 id="unikalny-zagolovok"> Уникальный заголовок h3>Иногда перемещение по якорю прокручивает страницу впритык к целевому элементу, обрезая родительский контейнер. Это можно исправить, если поставить id на родительский контейнер, либо с помощью свойства scroll — margin — оно добавит нужный отступ.
h3 scroll-margin: 20px;>h3 scroll-margin: 20px; >Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 По умолчанию ссылка — строчный элемент. Поэтому, если нужно обернуть в неё целый блок, задайте для ссылки display : block .
🛠 Поскольку ссылка строчная, лучше вкладывать её в блочный элемент, а не наоборот. Для примера возьмём заголовок, который должен быть ссылкой.
Заголовок, он же ссылка
Заголовок, он же ссылкаa href="#"> h2>Заголовок, он же ссылкаh2> a> h2> a href="#">Заголовок, он же ссылкаa> h2>Ольга Ветер советует
Скопировать ссылку «Ольга Ветер советует» Скопировано
🛠 Иногда нам всё же может понадобиться «отключить» ссылку. На это должна быть веская причина: необходимость создать временную «заглушку», требование специалиста по продвижению сайта и так далее. Если речь идёт о ссылке на текущую страницу и у нас нет нужды её блокировать, то достаточно будет использовать aria — current = «page» .
Что нужно сделать, если ссылку нужно заблокировать?
Лучше всего убрать атрибут href , это разрешается спецификацией. Такая ссылка уже будет вести себя как «заглушка» и не будет интерактивной: то есть не появится контекстное меню по правому клику, не изменится вид курсора при наведении, не возникнет фокус при работе с клавиатуры.
Текст ссылкиa>Текст ссылкиa>Роль этого элемента уже не будет восприниматься устройствами как link . Это не совсем корректно с точки зрения семантики и хорошо будет показать, что это именно ссылка, и что мы её отключаем умышленно, а не по ошибке. Явно определить роль поможет атрибут role = «link» (ссылка без href эту роль теряет). Обозначить ссылку как отключённую нам поможет атрибут aria — disabled = «true» .
Текст ссылкиa role="link" aria-disabled="true">Текст ссылкиa>Если мы знаем, что такие заблокированные ссылки-«заглушки» на нашем сайте есть или могут возникнуть, то рекомендуется и состояния (например :hover ) прописывать с учётом наличия href , чтобы у заблокированных ссылок каких-либо спецэффектов интерактивного элемента не возникало. Например так:
a[href]:hover background-color: #FF8630;>a[href]:hover background-color: #FF8630; >Ссылка, лишённая атрибута href , этого изменения фона по наведению курсора не получит.
На собеседовании
Скопировать ссылку «На собеседовании» Скопировано
Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?
Скопировать ссылку «Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?» Скопировано
Скопировать ссылку «Александр Ламков отвечает» Скопировано
Ощутимая разница между ссылками и кнопками в том, что «активация» элемента при фокусе с клавиатуры происходит по-разному. Для ссылок — клавишей Enter , а для кнопок — пробелом или Enter . Пользователь, привыкший перемещаться по интерфейсу сайта и взаимодействовать с ним с клавиатуры, получит неожиданное поведение при попытке взаимодействия с ложной ссылкой или кнопкой.
Чтобы определить, какой тег использовать, ссылку или кнопку, нужно подумать про ожидаемое поведение при взаимодействии с элементом. Если при нажатии на элемент подразумевается переход на другую страницу, то в коде элемент нужно сделать тегом , то есть ссылкой. Если при нажатии произойдёт действие в рамках текущей страницы, например, откроется модальное окно с формой входа, то такой элемент нужно сделать тегом .
С точки зрения доступности у ссылок и кнопок разные роли. У ссылок — link , у кнопок — button . Скринридер перед озвучиванием содержимого элемента произносит его роль. Если используете неправильные теги, роли перемешаются и это запутает пользователей скринридеров.
