Исполняемые доки HTML: Ссылка в новой вкладке

Q: Как сделать, чтобы ссылка открывалась в новой вкладке?

Добавьте тегу атрибут target="blank": Example . Браузер откроет страницу в новой вкладке и оставит текущую открытой.

Q: Чем noopener отличается от noreferrer?

noopener разрывает связь между двумя вкладками (в новой window.opener равен null). noreferrer делает то же самое и вдобавок не дает браузеру отправить URL вашей страницы как referrer, поэтому аналитика другого сайта видит визит как прямой.

Q: Можно ли в HTML заставить ссылку открыться в новом окне, а не во вкладке?

Нет. target="_blank" запрашивает новый контекст просмотра, а будет это вкладка или окно, решают браузер и настройки пользователя. Современные браузеры открывают вкладку.

Q: Как открыть все ссылки на странице в новой вкладке?

Поставьте в . Тогда каждая ссылка без собственного target будет открываться в новой вкладке. Это влияет и на формы, поэтому используйте такой прием только там, где это действительно нужно.

Открыть ссылку в новой вкладке через target="_blank"

Добавьте ссылке target="_blank". Браузер откроет адрес в новой вкладке, а ваша страница останется там же, где была.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab</title>
</head>
<body>
  <p>
    <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
      MDN web docs
    </a>
    opens in a new tab.
  </p>
</body>
</html>

Вот и весь прием: target="_blank" у <a> плюс rel="noopener", о котором ниже. Читатели и сами могут открыть любую ссылку в новой вкладке через Ctrl+клик (Cmd+клик на Mac) или клик колесиком, поэтому используйте target="_blank", только когда уход со страницы чего-то им стоит, например наполовину заполненной формы или играющего видео.

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

rel="noopener" и rel="noreferrer"

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

Значение `rel`	`window.opener` в новой вкладке	Referrer отправляется новому сайту
нет (старые браузеры)	Ваша страница	Да
нет (современные браузеры)	`null`	Да
`noopener`	`null`	Да
`noreferrer`	`null`	Нет
`opener`	Ваша страница	Да

Современные версии Chrome, Firefox и Safari считают каждую ссылку с target="_blank" ссылкой с noopener, если вы не написали rel="opener". Написать rel="noopener" все равно стоит: это защищает посетителей со старыми браузерами и делает намерение видимым в коде.

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

<!-- Safe, the other site still sees the referral -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- Safe, and the other site does not see where the visit came from -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

rel принимает несколько значений через пробел, поэтому noopener сочетается со значениями для SEO: rel="noopener sponsored" для платной ссылки, rel="noopener nofollow" для ссылки, за которую вы не ручаетесь.

Предупредите, что ссылка открывает новую вкладку

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab hint</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    a[target="_blank"]::after {
      content: " \2197";
      font-size: 0.85em;
    }
  </style>
</head>
<body>
  <p>
    Read the
    <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">
      accessibility guidelines<span class="visually-hidden"> (opens in a new tab)</span></a>
    before you start.
  </p>
</body>
</html>

Селектор a[target="_blank"] автоматически добавляет стрелку каждой ссылке, открывающей новую вкладку, поэтому вы ни одну не забудете. Скрытый span зачитывается как часть названия ссылки, «accessibility guidelines (opens in a new tab)», но места на экране не занимает.

Автоматическая отметка всех внешних ссылок

Селекторы атрибутов могут оформлять ссылки по их href. Здесь стрелку получает каждая ссылка, которая начинается с http, а ссылки внутри сайта нет:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    a[href^="http"]::after {
      content: " \2197";
      color: #2563eb;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="/pricing">Pricing</a> (same site)</li>
    <li><a href="/docs">Docs</a> (same site)</li>
    <li><a href="https://github.com/" target="_blank" rel="noopener">GitHub</a></li>
    <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
  </ul>
</body>
</html>

^= означает «начинается с». Селектор только оформляет ссылки: атрибуты target и rel все равно должны быть в HTML.

Значения target

target указывает, где открывается ссылка. Есть четыре ключевых слова, а любое другое значение считается именем:

`target`	Где открывается ссылка
`_self`	В той же вкладке или фрейме. Это значение по умолчанию.
`_blank`	В новой безымянной вкладке
`_parent`	В родителе текущего фрейма (вне фреймов то же, что `_self`)
`_top`	Во всей вкладке, поверх всех фреймов
любое имя, например `help`	Во вкладке или фрейме с этим именем; если такой нет, она создается

Именованная цель используется повторно. Каждая ссылка с target="help" открывается в одной и той же вкладке, поэтому читатель, кликнувший по пяти ссылкам справки, получит одну вкладку, а не пять. _top нужен внутри <iframe>, когда ссылка должна заменить всю страницу, а не только фрейм.

Все ссылки в новой вкладке через элемент base

<base target="_blank"> в <head> задает цель по умолчанию для каждой ссылки и формы на странице:

<head>
  <base target="_blank">
</head>
<body>
  <a href="https://example.com">Opens in a new tab</a>
  <a href="/about" target="_self">Opens in this tab</a>
</body>

Собственный target ссылки важнее <base>. Используйте этот прием редко: страницей, где каждая ссылка открывает новую вкладку, неудобно пользоваться.

Новая вкладка из JavaScript

window.open(url, '_blank') открывает вкладку из скрипта. Передайте 'noopener' третьим аргументом, чтобы получить ту же защиту, что и от атрибута rel. С ним window.open возвращает null, а не ссылку на новую вкладку:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>window.open</title>
</head>
<body>
  <button type="button" id="open">Open example.com</button>
  <p id="out"></p>

  <script>
    document.querySelector('#open').addEventListener('click', () => {
      const win = window.open('https://example.com/', '_blank', 'noopener');
      document.querySelector('#out').textContent = 'window.open returned: ' + win;
    });
  </script>
</body>
</html>

Браузеры блокируют window.open, если вызов не является ответом на клик или нажатие клавиши, поэтому вызывайте его из обработчика события, а не при загрузке страницы или по таймеру. Если адрес назначения известен заранее, ссылка с target="_blank" проще и работает без JavaScript. Сама ссылка описана на странице ссылки в HTML.

Частые ошибки

target="blank" без подчеркивания. Это имя, а не ключевое слово. Первый раз оно откроет новую вкладку, а потом будет использовать ее для всех остальных ссылок с тем же именем.
target="_new". Тоже просто имя, с тем же эффектом: одна повторно используемая вкладка.
target у каждой ссылки. Внутренние ссылки должны открываться в той же вкладке. Читатели, которым нужна новая вкладка, знают, как ее получить.
Нет указания, что ссылка открывает новую вкладку. Добавьте значок и скрытый текст.
noreferrer у партнерских ссылок, после чего партнер удивляется, что не видит переходов.

Часто задаваемые вопросы

Как сделать, чтобы ссылка открывалась в новой вкладке?

Добавьте тегу <a> атрибут target="_blank": <a href="https://example.com" target="_blank" rel="noopener">Example</a>. Браузер откроет страницу в новой вкладке и оставит текущую открытой.

Нужен ли еще rel="noopener" вместе с target="_blank"?

Современные Chrome, Firefox и Safari автоматически применяют noopener к ссылкам с target="_blank", поэтому новая страница не может добраться до вашей через window.opener. Написать rel="noopener" ничего не стоит, а посетителей со старыми браузерами это защищает, поэтому большинство руководств по стилю по-прежнему его требует.

Чем noopener отличается от noreferrer?

noopener разрывает связь между двумя вкладками (в новой window.opener равен null). noreferrer делает то же самое и вдобавок не дает браузеру отправить URL вашей страницы как referrer, поэтому аналитика другого сайта видит визит как прямой.

Можно ли в HTML заставить ссылку открыться в новом окне, а не во вкладке?

Нет. target="_blank" запрашивает новый контекст просмотра, а будет это вкладка или окно, решают браузер и настройки пользователя. Современные браузеры открывают вкладку.

Как открыть все ссылки на странице в новой вкладке?

Поставьте <base target="_blank"> в <head>. Тогда каждая ссылка без собственного target будет открываться в новой вкладке. Это влияет и на формы, поэтому используйте такой прием только там, где это действительно нужно.

Связанные концепции

Как открыть ссылку в новой вкладке в HTML (target _blank)