Ссылки

Тег ссылки

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

<a href="/catalog">Каталог</a>

Здесь впервые атрибут делает главную работу. href — куда вести. Текст между тегами — то, что видит и нажимает человек. Одно другому не равно, и это важно: адрес может быть длинным и нечитаемым, а текст ссылки должен быть понятным.

Браузер по умолчанию покажет ссылку синей и подчёркнутой, а курсор над ней превратит в руку. Всё это потом меняется стилями, но само поведение — переход по нажатию — стилями не задаётся: оно следует из тега.

<p>Смотрите <a href="/catalog">каталог растений</a>.</p>

Ссылка — строчный элемент: она встаёт в строку текста, а не отдельным блоком. Поэтому её и кладут внутрь абзаца, а не рядом с ним.

Какие бывают адреса

Адрес в href бывает трёх видов, и выбор не случайный.

Полный — со схемой и доменом: https://example.com/catalog. Так ведут на чужой сайт.

От корня — начинается с косой черты: /catalog/fikus. Так ведут по своему сайту. Косая черта означает «от главной», и такая ссылка работает одинаково, откуда бы на неё ни нажали.

Относительный — без косой черты: fikus.html. Отсчитывается от папки текущей страницы. Две точки поднимают на уровень выше: ../index.html.

Внутри своего сайта почти всегда берут второй вид. Относительные адреса ломаются при переносе страницы в другую папку, а полные — при смене домена, и оба ломаются тихо.

Якоря и новая вкладка

Ссылка может вести не на другую страницу, а на место внутри текущей. Так делают оглавления длинных статей.

Сначала помечают место — атрибутом id:

<h2 id="polivom">Полив</h2>

Потом ссылаются на него, поставив перед именем решётку:

<a href="#polivom">Про полив</a>

id — имя элемента на странице, и оно должно быть уникальным: два одинаковых id — ошибка, и браузер прокрутит к первому попавшемуся.

Второе, что умеет ссылка, — открываться в новой вкладке:

<a href="https://example.com" target="_blank" rel="noopener">Внешний сайт</a>

target="_blank" — новая вкладка. rel="noopener" — довесок ради безопасности; современные браузеры добавляют его сами, но в вёрстке он ещё встречается.

Ссылка вокруг блока

Раньше ссылка могла обернуть только текст. Теперь она может обернуть целый кусок страницы — и это меняет то, как делают карточки.

<a href="/catalog/fikus">
  <h3>Фикус Бенджамина</h3>
  <p>Не любит перестановок. Свет рассеянный.</p>
</a>

Вся карточка стала одной большой ссылкой: нажать можно куда угодно внутри. Раньше для этого писали скрипт, теперь хватает тега.

Одно ограничение осталось: ссылку нельзя вложить в ссылку. Если внутри карточки должна быть отдельная кнопка «В корзину» со своим адресом — обернуть карточку целиком уже нельзя, придётся делать ссылкой только заголовок.

<a href="/fikus"><h3>Фикус</h3><p>Описание</p></a>

То же ограничение касается кнопок: кнопка внутри ссылки — невалидная разметка, и браузер разберёт её не так, как вы ждёте.