Как правильно использовать тег <a> для ссылок и навигации?

Вопрос

Чем отличаются относительные и абсолютные URL в href, зачем нужен атрибут target, что делают значения rel="noopener noreferrer nofollow" и как работают якорные ссылки внутри страницы?

Короткий ответ

Абсолютный URL содержит полный адрес (https://site.com/page), относительный — путь от текущего документа (/page, ./page, ../page). target="_blank" открывает ссылку в новой вкладке и требует rel="noopener" из соображений безопасности и производительности. rel="noreferrer" скрывает referrer, rel="nofollow" просит поисковики не передавать вес ссылки. Якорные ссылки (href="#id") скроллят к элементу с соответствующим id без перезагрузки страницы.

Подробный ответ

Относительные vs абсолютные URL:

• Абсолютный URL включает протокол и домен: https://example.com/products/1. Работает независимо от того, откуда на него ссылаются.
• Относительный URL резолвится относительно текущего адреса страницы: /products/1 (от корня домена), products/1 (от текущего пути), ../products/1 (на уровень выше), #section (якорь в текущем документе).
• Относительные ссылки удобны при переносе сайта между доменами/окружениями (dev/staging/prod), абсолютные — обязательны для внешних ссылок и часто предпочтительны в og:*/canonical для однозначности.

target:

• _self (по умолчанию) — открыть в том же контексте просмотра.
• _blank — открыть в новой вкладке/окне.
• _parent, _top — актуальны для страниц во фреймах.

rel для безопасности и SEO:

• noopener — при target="_blank" новая вкладка по умолчанию получает доступ к window.opener, через который может (в старых браузерах) перенаправить исходную вкладку на фишинговый сайт (tabnabbing). noopener обнуляет эту связь. Современные браузеры уже делают это по умолчанию для _blank, но явное указание остаётся хорошей практикой и обязательно там, где это не гарантировано.
• noreferrer — дополнительно не передаёт заголовок Referer целевому сайту (скрывает, откуда пришёл переход) и тоже подразумевает noopener.
• nofollow — сообщает поисковым роботам не учитывать эту ссылку при расчёте авторитетности страницы-получателя; используется для пользовательского контента, рекламных и неподтверждённых ссылок.
• sponsored / ugc — уточняющие варианты nofollow для рекламных ссылок и пользовательского контента соответственно.

Якорные ссылки:

href="#some-id" скроллит к элементу с id="some-id" на той же странице, без перезагрузки. href="#" (без id) обычно используется как заглушка, но лучше избегать этого и использовать <button> для элементов, не выполняющих навигацию.

Пример

<!-- относительная ссылка внутри сайта -->
<a href="/products/42">Товар №42</a>

<!-- внешняя ссылка, безопасно открытая в новой вкладке -->
<a href="https://external-partner.com" target="_blank" rel="noopener noreferrer">
  Партнёр
</a>

<!-- ссылка на пользовательский контент без передачи SEO-веса -->
<a href="https://random-blog.com" rel="nofollow ugc">Ссылка из комментария</a>

<!-- якорная навигация внутри страницы -->
<nav>
  <a href="#pricing">Цены</a>
  <a href="#faq">FAQ</a>
</nav>

<section id="pricing">...</section>
<section id="faq">...</section>

Дополнительные вопросы

• Почему современные браузеры частично решили проблему noopener сами и всё равно стоит указывать его явно?
• Чем nofollow отличается от sponsored и ugc с точки зрения Google?
• Как реализовать плавный скролл к якорю без JavaScript?