Dokumentacja HTML z przykładami: Link w nowej karcie

Q: Jak sprawić, żeby link otwierał się w nowej karcie w HTML?

Dodaj target="blank" do znacznika : Example . Przeglądarka otwiera stronę w nowej karcie i zostawia bieżącą stronę otwartą.

Q: Czym różni się noopener od noreferrer?

noopener zrywa połączenie między dwiema kartami (window.opener w nowej ma wartość null). noreferrer robi to samo i dodatkowo blokuje wysyłanie adresu twojej strony jako referrera, więc analityka drugiej strony widzi wizytę jako bezpośrednią.

Q: Czy HTML może wymusić otwarcie linku w nowym oknie zamiast karty?

Nie. target="_blank" prosi o nowy kontekst przeglądania, a o tym, czy będzie to karta, czy okno, decydują przeglądarka i ustawienia użytkownika. Obecne przeglądarki otwierają kartę.

Q: Jak otworzyć wszystkie linki na stronie w nowej karcie?

Umieść w . Każdy link bez własnego target otworzy się wtedy w nowej karcie. Dotyczy to też formularzy, więc używaj tego tylko na stronach, na których naprawdę tego chcesz.

Otwieranie linku w nowej karcie przez target="_blank"

Dodaj target="_blank" do linku. Przeglądarka otworzy cel w nowej karcie i zostawi twoją stronę tam, gdzie była.

<!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>

To cała technika: target="_blank" na <a> plus rel="noopener", omówiony dalej. Czytelnicy mogą też sami otworzyć dowolny link w nowej karcie przez Ctrl+kliknięcie (Cmd+kliknięcie na Macu) albo kliknięcie środkowym przyciskiem, więc używaj target="_blank" tylko wtedy, gdy opuszczenie strony coś by ich kosztowało, na przykład w połowie wypełniony formularz albo odtwarzany film.

Podglądy na tej stronie otwierają każdy link zewnętrzny w nowej karcie, z target czy bez, bo ramka z przykładem nigdy nie może przejść na inną stronę. Żeby zobaczyć, co zmienia target, zapisz przykład jako plik i otwórz go w przeglądarce.

rel="noopener" i rel="noreferrer"

Strona otwarta przez target="_blank" dostawała kiedyś odwołanie do twojej strony w window.opener i mogła go użyć, żeby przekierować twoją kartę pod inny URL (na przykład na fałszywą stronę logowania). rel="noopener" usuwa to odwołanie.

Wartość `rel`	`window.opener` w nowej karcie	Referrer wysyłany do nowej strony
brak (stare przeglądarki)	Twoja strona	Tak
brak (obecne przeglądarki)	`null`	Tak
`noopener`	`null`	Tak
`noreferrer`	`null`	Nie
`opener`	Twoja strona	Tak

Obecne wersje Chrome, Firefoksa i Safari traktują każdy link z target="_blank" jak noopener, chyba że napiszesz rel="opener". Dopisanie rel="noopener" i tak chroni odwiedzających w starszych przeglądarkach i pokazuje intencję w kodzie.

noreferrer dodatkowo blokuje wysyłanie referrera, więc strona, do której linkujesz, nie widzi, skąd przyszedł odwiedzający. To wybór związany z prywatnością, a nie z bezpieczeństwem: używaj go, gdy twój URL ma pozostać prywatny, i pomijaj przy partnerach, którzy muszą widzieć twój ruch.

<!-- 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 przyjmuje kilka wartości oddzielonych spacjami, więc noopener łączy się z wartościami SEO: rel="noopener sponsored" dla płatnego linku, rel="noopener nofollow" dla linku, za który nie ręczysz.

Informuj, że link otwiera nową kartę

Nowa karta otwierająca się bez ostrzeżenia dezorientuje, zwłaszcza użytkowników czytników ekranu, którzy mogą nie zauważyć zmiany strony. Napisz o tym w linku. Mała ikona pokazuje to widzącym użytkownikom; ukryty tekst mówi to użytkownikom czytników ekranu:

<!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>

Selektor a[target="_blank"] automatycznie dodaje strzałkę do każdego linku otwierającego nową kartę, więc żadnego nie pominiesz. Ukryty span jest czytany jako część nazwy linku, "accessibility guidelines (opens in a new tab)", ale nie zajmuje miejsca na ekranie.

Automatyczne oznaczanie wszystkich linków zewnętrznych

Selektory atrybutów mogą stylizować linki według ich href. Tutaj każdy link zaczynający się od http dostaje strzałkę, a linki wewnątrz witryny nie:

<!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>

^= oznacza "zaczyna się od". Selektor tylko stylizuje linki: atrybuty target i rel nadal muszą być w HTML.

Wartości target

target określa, gdzie otwiera się link. Są cztery słowa kluczowe, a każda inna wartość to nazwa:

`target`	Otwiera link w
`_self`	Tej samej karcie lub ramce. To wartość domyślna.
`_blank`	Nowej, nienazwanej karcie
`_parent`	Ramce nadrzędnej bieżącej ramki (poza ramkami działa jak `_self`)
`_top`	Całej karcie, wychodząc ze wszystkich ramek
dowolna nazwa, np. `help`	Karcie lub ramce o tej nazwie, tworzonej, jeśli nie istnieje

Nazwany cel jest używany ponownie. Każdy link z target="help" otwiera się w tej samej karcie, więc czytelnik, który kliknie pięć linków pomocy, dostaje jedną kartę, a nie pięć. _top przydaje się wewnątrz <iframe>, gdy link ma zastąpić całą stronę, a nie tylko ramkę.

Wszystkie linki w nowej karcie przez element base

<base target="_blank"> w <head> ustawia domyślny cel dla każdego linku i formularza na stronie:

<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>

Własny target linku ma pierwszeństwo przed <base>. Używaj tego rzadko: strona, na której każdy link otwiera nową kartę, jest irytująca w użyciu.

Nowa karta z JavaScript

window.open(url, '_blank') otwiera kartę ze skryptu. Przekaż 'noopener' jako trzeci argument, żeby uzyskać tę samą ochronę co z atrybutem rel. Wtedy window.open zwraca null zamiast odwołania do nowej karty:

<!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>

Przeglądarki blokują window.open, chyba że jest wywołane w odpowiedzi na kliknięcie lub naciśnięcie klawisza, więc wywołuj je w obsłudze zdarzenia, a nie przy wczytaniu strony czy po timerze. Jeśli cel to URL, który czytelnik mógłby zobaczyć wcześniej, link z target="_blank" jest prostszy i działa bez JavaScript. Sam link omawia strona znacznik a w HTML.

Częste błędy

target="blank" bez podkreślnika. To nazwa, a nie słowo kluczowe. Za pierwszym razem nadal otwiera nową kartę, ale potem używa tej samej karty dla każdego innego linku o tej nazwie.
target="_new". To również tylko nazwa, z tym samym efektem: jedna, ponownie używana karta.
target na każdym linku. Linki wewnętrzne powinny otwierać się w tej samej karcie. Czytelnicy, którzy chcą nowej karty, wiedzą, jak ją otworzyć.
Brak informacji, że link otwiera nową kartę. Dodaj ikonę i ukryty tekst.
Dodawanie noreferrer do linków partnerskich lub afiliacyjnych, a potem zdziwienie, że partner nie widzi żadnych poleceń.

Najczęściej zadawane pytania

Jak sprawić, żeby link otwierał się w nowej karcie w HTML?

Dodaj target="_blank" do znacznika <a>: <a href="https://example.com" target="_blank" rel="noopener">Example</a>. Przeglądarka otwiera stronę w nowej karcie i zostawia bieżącą stronę otwartą.

Czy przy target="_blank" nadal potrzebuję rel="noopener"?

Obecne wersje Chrome, Firefoksa i Safari automatycznie stosują noopener do linków z target="_blank", więc nowa strona nie może sięgnąć do twojej przez window.opener. Dopisanie rel="noopener" nic nie kosztuje i chroni odwiedzających w starszych przeglądarkach, dlatego większość przewodników stylu nadal tego wymaga.

Czym różni się noopener od noreferrer?

noopener zrywa połączenie między dwiema kartami (window.opener w nowej ma wartość null). noreferrer robi to samo i dodatkowo blokuje wysyłanie adresu twojej strony jako referrera, więc analityka drugiej strony widzi wizytę jako bezpośrednią.

Czy HTML może wymusić otwarcie linku w nowym oknie zamiast karty?

Nie. target="_blank" prosi o nowy kontekst przeglądania, a o tym, czy będzie to karta, czy okno, decydują przeglądarka i ustawienia użytkownika. Obecne przeglądarki otwierają kartę.

Jak otworzyć wszystkie linki na stronie w nowej karcie?

Umieść <base target="_blank"> w <head>. Każdy link bez własnego target otworzy się wtedy w nowej karcie. Dotyczy to też formularzy, więc używaj tego tylko na stronach, na których naprawdę tego chcesz.

Powiązane zagadnienia