Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Как открыть ссылку в новой вкладке

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

Добавьте ссылке атрибут target="_blank":

<a href="https://example.com" target="_blank">Open in a new tab</a>

Атрибут rel

Раньше обязательно добавляли rel="noopener": без него открытая страница получала доступ к вашей вкладке через window.opener. Современные браузеры включают это поведение для target="_blank" сами, но атрибут не помешает. rel="noreferrer" вдобавок скрывает от сайта, откуда пришёл посетитель:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">A partner site</a>

Предупредить пользователя

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

<a href="https://example.com" target="_blank">Documentation (opens in a new tab) ↗</a>

Когда это уместно

Открывайте в новой вкладке ссылки на другие сайты и документы, если пользователю важно не потерять текущую страницу — например, во время заполнения формы.

Частая ошибка

В новой вкладке открывают все ссылки подряд, включая страницы своего сайта. Пользователь копит десятки вкладок, а кнопка «Назад» перестаёт работать. Решать, открыть ли ссылку отдельно, лучше оставить ему самому: для этого есть щелчок колёсиком или с зажатым Ctrl.

Функции из этого ответа

  • <a> — Ссылка на другую страницу, файл или место на странице.
  • target — `target` выбирает, где открыть ссылку; `rel` описывает связь со страницей по ссылке.
  • href — Адрес, на который ведёт ссылка `<a>` или указывает `<link>`.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.