Как открыть ссылку в новой вкладке: target="_blank", noopener и UX

Чтобы попросить браузер открыть ссылку в новом контексте просмотра, в HTML используют target="_blank". На практике браузер чаще создаёт новую вкладку, хотя пользовательские настройки могут изменить это поведение.

Технически добавить атрибут просто. Гораздо важнее решить, когда новая вкладка действительно помогает читателю, что происходит с window.opener и почему не следует заставлять все внутренние ссылки открываться отдельно.

Минимальный пример target="_blank"

Обычная ссылка без target открывается в текущем контексте:

Наглядный пример. Следующая ссылка действительно открывается в новой вкладке благодаря target="_blank". Для проверки можно нажать её прямо в статье.

В реальном интерфейсе важно применять новую вкладку только там, где это оправдано. Код такой ссылки и пояснение к rel="noopener" приведены ниже.

<a href="https://example.com">Перейти на сайт</a>

Чтобы открыть ресурс в новом контексте просмотра, добавьте target="_blank":

<a href="https://example.com" target="_blank">
  Открыть сайт
</a>

Название «в новом окне» историческое и не всегда точное: современные браузеры обычно используют вкладку, но окончательное решение остаётся за браузером и пользователем.

Нужен ли rel="noopener"

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

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

noopener не означает noreferrer. Последний дополнительно влияет на передачу referrer-информации, поэтому добавлять его автоматически ко всем внешним ссылкам без причины не нужно.

Когда открытие в новой вкладке оправдано

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

При выборе поведения стоит учитывать несколько сценариев:

• пользователь заполняет форму и переход может привести к потере введённых данных;
• открывается внешний справочный ресурс, к которому читатель вернётся позже;
• ссылка ведёт к отдельному инструменту или панели;
• пользователю важно сравнивать текущую страницу с другой;
• контент открывается в процессе выполнения пошаговой инструкции.

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

Когда target="_blank" лучше не использовать

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

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

Как предупредить пользователя о новой вкладке.

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

<a href="https://example.com"
   target="_blank"
   rel="noopener">
  Документация (откроется в новой вкладке)
</a>

Иконка сама по себе может быть недостаточно понятной. Если используется визуальный значок, его смысл должен быть доступен и пользователям вспомогательных технологий.

Другие значения target.

Кроме _blank, существуют другие стандартные значения. В обычной статье чаще всего нужен только _self по умолчанию, но полезно знать общую картину:

• _self — текущий контекст, поведение по умолчанию;
• _blank — новый контекст просмотра;
• _parent — родительский контекст;
• _top — верхний контекст окна.

_parent и _top имеют смысл прежде всего во вложенных контекстах вроде iframe. Использовать их в обычных ссылках статьи без необходимости не стоит.

Как сделать это в Joomla.

В редакторе Joomla или JCE атрибут target обычно задаётся через параметры ссылки. Если редактор позволяет выбрать «Open in new window/tab», он добавляет соответствующую разметку автоматически.

После сохранения материала можно открыть исходный HTML и проверить результат. Важно, чтобы редактор не создавал нестандартный JavaScript-обработчик там, где достаточно обычного target="_blank".

Типичные ошибки

Сама конструкция короткая, но вокруг неё накопилось много устаревших советов. Чаще всего стоит исправить следующие ситуации:

• все внешние и внутренние ссылки открываются в новой вкладке без разбора;
• используется JavaScript window.open() там, где достаточно HTML;
• пользователь не предупреждён о неожиданном новом контексте;
• noreferrer добавляется автоматически без понимания последствий;
• старые шаблоны полагаются на небезопасное взаимодействие через window.opener.

Для нового кода обычная ссылка должна оставаться максимально простой, а дополнительные атрибуты добавляются только при понятной задаче.

Итог

target="_blank" просит браузер открыть ссылку в новом контексте, чаще всего во вкладке. Современные браузеры применяют защитное поведение, аналогичное noopener, однако решение об открытии новой вкладки нужно принимать прежде всего с точки зрения UX, а не по принципу «все внешние ссылки отдельно».

Оформление разных состояний ссылок разобрано в статье «Как изменить цвет ссылки в CSS».