Ссылка в HTML - это не просто синий подчёркнутый текст, а тег <a> с адресом внутри атрибута href. От того, как записан этот адрес и какие ещё атрибуты стоят у ссылки, зависит и куда она ведёт, и что происходит при переходе. Разберём разные типы ссылок и одну особенность, о которой часто забывают.
В этом уроке
Нажми на ссылку в предпросмотре справа - страница внутри рамки проскроллит саму себя, без перехода куда-либо ещё.
Абсолютные и относительные ссылки
Абсолютная ссылка - это полный адрес с протоколом и доменом, он сработает откуда угодно. Относительная ссылка короче и не содержит домен - но здесь важна одна деталь: если она начинается со слэша, браузер считает путь от корня сайта; если слэша нет - от папки, в которой лежит текущая страница.
<a href="/p/html.html">Все уроки по HTML</a> - слэш в начале означает «от корня сайта», сработает с любой страницы.
<a href="p/html.html">Все уроки по HTML</a> - без слэша браузер ищет адрес рядом с текущей страницей: на странице урока с датированным адресом ссылка сломается.
Ссылка на часть текущей страницы
Чтобы перейти не на другую страницу, а к конкретному месту этой же страницы, в href пишут # и значение атрибута id нужного элемента. Ты уже видел этот приём в оглавлении «В этом уроке» в начале статьи - каждый пункт там устроен именно так. Важная деталь: значение после # должно совпадать с id буква в букву, включая регистр.
<a href="#itogi">К разделу «Итоги»</a> ... <h2 id="itogi">Итоги</h2> - значения совпадают полностью.
<a href="#Itogi">К разделу «Итоги»</a> ... <h2 id="itogi">Итоги</h2> - «Itogi» и «itogi» для браузера разные значения, переход не сработает.
Ссылка, которая открывается в новой вкладке
Атрибут target="_blank" открывает ссылку в новой вкладке, не закрывая текущую. Дополнительный атрибут rel="noreferrer" всё ещё имеет смысл для ссылок на чужие сайты: он скрывает заголовок Referer, из которого принимающий сайт мог бы узнать, с какой страницы к нему пришёл посетитель.
<a href="https://example.com" target="_blank" rel="noreferrer">Внешний сайт</a> - скрывает Referer там, где это действительно имеет смысл.
<a href="/p/html.html" target="_blank" rel="noreferrer">Все уроки по HTML</a> - это ссылка на свою же страницу, скрывать Referer здесь не от кого, атрибут только загромождает разметку.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Писать внутреннюю ссылку без начального слэша на сайте с датированными адресами постов | На разных страницах ссылка ведёт в разные (часто несуществующие) места, потому что браузер достраивает путь от текущей папки | Начинать внутренние ссылки со слэша («/p/html.html»), чтобы путь всегда считался от корня сайта |
| Указывать в href="#id" значение не в том регистре, что реальный id элемента | Переход не срабатывает - id и значение после # регистрозависимы | Копировать id элемента точно как он написан, включая регистр |
| Дописывать rel="noopener noreferrer" к каждой ссылке target="_blank" «на всякий случай» | Современные браузеры уже защищают такие ссылки автоматически - лишний атрибут только загромождает разметку | Добавлять rel="noreferrer" только там, где действительно нужно скрыть Referer (например, ссылка на чужой сайт) |
| Считать относительную и абсолютную ссылку просто «короткой и длинной записью одного и того же» | На самом деле они по-разному вычисляют путь и могут повести себя по-разному при переносе страницы в другую папку сайта | Понимать разницу: абсолютная ссылка всегда полная, относительная - зависит от текущего расположения страницы или считается от корня сайта |
Шпаргалка
| Термин | Значение |
|---|---|
| Абсолютная ссылка | Полный адрес с протоколом и доменом (https://...) |
| Относительная ссылка | Путь без домена; со слэша в начале - от корня сайта, без слэша - от текущей папки |
Якорная ссылка (#id) | Переход к элементу с таким же id на этой же странице, без перезагрузки |
target="_blank" | Открывает ссылку в новой вкладке |
rel="noreferrer" | Скрывает заголовок Referer при переходе - актуально для ссылок на чужие сайты |
Коротко: отвечаем на вопросы
В чём разница между абсолютной и относительной ссылкой?
Абсолютная ссылка содержит полный адрес с протоколом и доменом (https://сайт.ru/страница) и работает откуда угодно. Относительная ссылка короче и не содержит домен: браузер достраивает её либо от корня сайта (если она начинается со слэша), либо от папки текущей страницы (если слэша нет).
Обязательно ли сегодня вручную дописывать rel="noopener" у ссылки с target="_blank"?
Нет. Раньше это было важно из-за уязвимости (страница, открытая через target="_blank", могла получить доступ к исходной вкладке через window.opener), но с 2021 года спецификация изменилась, и браузеры применяют эту защиту автоматически для любой ссылки с target="_blank" - дописывать rel="noopener" вручную больше не обязательно.
Как сделать ссылку, которая просто прокручивает страницу к нужному блоку, а не переходит на другую страницу?
Нужна якорная ссылка: в href пишут # и значение id того элемента, к которому нужно прокрутить страницу, например href="#itogi" при наличии элемента с id="itogi". Никакого перехода на другую страницу не происходит - браузер просто прокручивает текущую.
