Ссылки

Знакомимся с тегом, благодаря которому веб стал «паутиной» — гиперссылкой.

Ссылка создаётся тегом <a>, а адрес назначения задаёт атрибут href.

Простая ссылка

Тег <a> (от anchor, «якорь») превращает текст в кликабельную ссылку. Куда она ведёт — задаёт атрибут href:

<a href="https://codechick.io">Перейти на CodeChick</a>

Текст между тегами — это то, что увидит и нажмёт пользователь. Делайте его осмысленным: «Скачать прайс» лучше, чем «нажмите сюда».

Открыть в новой вкладке — target

По умолчанию ссылка открывается в той же вкладке. Чтобы открыть в новой, добавьте атрибут target="_blank". Для безопасности к нему добавляют rel="noopener":

<a href="https://codechick.io" target="_blank" rel="noopener">Открыть в новой вкладке</a>

Ссылка на якорь

Ссылка может вести не на другой сайт, а на нужное место этой же страницы — например, к определённому разделу. Для этого у целевого элемента ставят атрибут id, а в href пишут # и это имя:

<a href="#kontakty">Перейти к контактам</a>

<h2 id="kontakty">Контакты</h2>

Клик по такой ссылке прокрутит страницу к заголовку «Контакты». Так делают оглавления и кнопку «наверх».

Ссылки на почту и телефон

Ссылка может запускать почтовую программу или звонок. Для этого вместо адреса сайта используют схемы mailto: и tel::

<a href="mailto:[email protected]">Написать нам</a>
<a href="tel:+74950000000">Позвонить</a>

На телефоне клик по tel:-ссылке сразу предложит набрать номер — удобно для мобильных сайтов.

Виды ссылок

Картинка тоже может быть ссылкой

Содержимым ссылки не обязательно должен быть текст. Внутрь <a> можно положить картинку — тогда кликабельным станет изображение. Так часто делают логотип, который ведёт на главную страницу:

<a href="/">
  <img src="logo.png" alt="На главную">
</a>

Хороший текст ссылки

Маленькая, но важная деталь хорошего сайта — осмысленный текст ссылок. Программы чтения с экрана умеют зачитывать список всех ссылок страницы подряд. Представьте, что незрячий пользователь слышит: «сюда, сюда, читать далее, тут». Это бесполезно. А если ссылки названы «Скачать прайс-лист», «Перейти к контактам», «Условия доставки» — всё понятно даже вне контекста.

Поэтому избегайте ссылок вида «нажмите здесь» и «подробнее». Делайте текст ссылки таким, чтобы он сам объяснял, куда ведёт. Это заодно полезно и для SEO: поисковики учитывают текст ссылок, оценивая, о чём страница-назначение.

Итог

• Ссылку создаёт <a>, адрес задаёт href; текст ссылки делайте осмысленным.
• target="_blank" открывает ссылку в новой вкладке (добавляйте rel="noopener").
• href умеет вести на якоря (#id), почту (mailto:) и телефон (tel:).