Ссылки в HTML и CSS: рабочие приёмы и типичные ошибки

Ссылка выглядит просто: тег <a> и атрибут href. Но именно на ссылках чаще всего ломаются вещи, которые видит не глаз, а робот, скринридер или служба безопасности. Открытие в новой вкладке без защиты — дыра. Кнопка, сделанная из <div> с обработчиком клика вместо ссылки, — недоступна с клавиатуры. Убранное подчёркивание без замены — потерянный фокус для тех, кто плохо различает цвета.

Разберём четыре типовые задачи: внешняя ссылка в новой вкладке, ссылка-кнопка, состояния ссылки в CSS и якорь внутри страницы. У каждой — цена, которую вы платите за неправильное решение.

Внешняя ссылка в новой вкладке

Очевидное решение — добавить target="_blank". Проблема в том, что новая вкладка получает частичный доступ к открывшей её странице через свойство window.opener. Вредоносная страница может переписать адрес исходной вкладки — это атака reverse tabnabbing.

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

Что делают атрибуты в rel:

• noopener — обнуляет window.opener в новой вкладке, закрывая tabnabbing;
• noreferrer — вдобавок не передаёт заголовок Referer, то есть целевой сайт не узнает, откуда пришёл посетитель. Заодно этот атрибут тоже отключает opener.

В современных браузерах (Chrome 88+, Firefox 79+, Safari 12.1+) target="_blank" уже подразумевает noopener по умолчанию. Но писать rel="noopener" явно стоит: вы не знаете, на каком браузере откроют страницу, и явное намерение читается лучше умолчания.

Правило простое: любой target="_blank" на внешний домен пишется вместе с rel="noopener". Если не хотите отдавать реферер — добавляйте noreferrer.

Ссылка или кнопка: не путайте

Частая ошибка — делать кликабельный элемент из <div> или <span> с обработчиком onclick. Такой элемент не попадает в фокус по Tab, не реагирует на Enter и не читается скринридером как интерактивный.

Критерий выбора между <a> и <button> один: куда ведёт действие.

• Переход на другой адрес (страница, якорь, файл, mailto:) — это <a href>.
• Действие на текущей странице (открыть модалку, отправить форму, переключить состояние) — это <button>.

Если ссылка визуально оформлена как кнопка — это по-прежнему ссылка, просто со стилями:

<a href="/download/file.pdf" class="btn">Скачать PDF</a>

<style>
.btn {
  display: inline-block;
  padding: 10px 20px;
  background: #2563eb;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}
.btn:hover { background: #1d4ed8; }
</style>

Ссылка ведёт на файл, значит используем <a> и красим её. Обратный вариант — кнопку не превращают в ссылку через onclick="location.href=...", потому что тогда пропадает открытие в новой вкладке средней кнопкой мыши и копирование адреса из контекстного меню.

Состояния ссылки в CSS

У ссылки пять псевдоклассов, и порядок их объявления в CSS имеет значение из-за специфичности и каскада. Классический мнемоник — LoVe HAte: :link, :visited, :hover, :active. Пятый — :focus (или :focus-visible) — критичен для доступности.

Главный грех — убрать подчёркивание и обводку фокуса, не дав ничего взамен:

/* Так делать нельзя: фокус исчезает для клавиатуры */
a { text-decoration: none; }
a:focus { outline: none; }

/* Так правильно */
a {
  color: #2563eb;
  text-decoration: underline;
}
a:hover { color: #1d4ed8; }
/* :focus-visible срабатывает только при навигации с клавиатуры,
   а не при клике мышью — обводка не мешает мышиным пользователям */
a:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

Псевдокласс :focus-visible поддерживается в актуальных версиях Chrome, Firefox и Safari. Если нужна поддержка совсем старых браузеров — оставьте видимую обводку через обычный :focus.

Почему :visited ограничен

К :visited браузер применяет только узкий набор свойств — в основном цвет текста, фона и рамки. Это защита от утечки истории посещений: иначе сайт мог бы через getComputedStyle прочитать, какие ссылки вы уже открывали. Не рассчитывайте задать :visited отступы или сменить содержимое — не сработает.

Якоря и прокрутка внутри страницы

Ссылка вида <a href="#section-2"> прокручивает к элементу с id="section-2". Две частые проблемы: резкий скачок вместо плавной прокрутки и то, что фиксированная шапка перекрывает заголовок, к которому прыгнули.

html {
  scroll-behavior: smooth;
}
/* Отступ сверху, чтобы фиксированная шапка не закрывала цель */
:target {
  scroll-margin-top: 80px;
}

Свойство scroll-margin-top задаёт зазор именно при прокрутке к якорю, не влияя на обычный поток. scroll-behavior: smooth включает плавную анимацию. Обе вещи поддерживаются современными браузерами; проверять актуальный статус лучше на MDN.

Когда что выбирать

• Ссылка на другой домен в новой вкладке — <a target="_blank" rel="noopener">, всегда.
• Действие без перехода — <button>, даже если визуально это «ссылка».
• Навигация по странице — <a href="#id"> плюс scroll-margin-top, если есть фиксированная шапка.
• Стилизованная ссылка-кнопка — <a> с классом, не наоборот.

Что проверить дальше

Пройдите по странице только клавишей Tab: каждая ссылка должна получать видимую обводку, а порядок обхода — совпадать с визуальным. Прогоните страницу через Lighthouse или axe DevTools — оба ловят ссылки без различимого текста (<a><img></a> без alt) и target="_blank" без rel. Отдельная тема — доступное имя ссылки для скринридеров (текст «читать далее» без контекста), её стоит разобрать отдельно.