Jak zrobić, aby linki otwierały się w nowym oknie w HTML?

Jak otwierać linki w nowym oknie lub karcie w HTML

Aby linki w HTML otwierały się w nowym oknie lub karcie przeglądarki, należy wykorzystać atrybut target i przypisać mu wartość _blank. Ten mechanizm jest powszechnie stosowany na stronach internetowych, szczególnie gdy chcemy, aby użytkownik pozostał na naszej stronie, a wybrany odnośnik otworzył się w dodatkowej karcie.

Podstawowy kod HTML

Najprostszy sposób, aby link otwierał się w nowym oknie:

<a href="https://www.example.com" target="_blank">Otwórz w nowym oknie</a>

• href – adres strony, do której prowadzi link;
• target="_blank" – otwarcie linku w nowej karcie/oknie.

Opis możliwych wartości atrybutu target

• _blank – otwiera link w nowym oknie lub nowej karcie (najczęściej stosowane dla zewnętrznych stron);
• _self – otwiera link w tym samym oknie/zakładce (wartość domyślna, nie wymaga deklaracji);
• _parent – otwiera link w nadrzędnym rameczkowy układzie (frameset);
• _top – otwiera link w pełnym oknie przeglądarki, usuwając wszystkie ramki.

Przykłady zastosowań praktycznych

1. Link do strony w nowej karcie

   <a href="https://www.wikipedia.org" target="_blank">Wikipedia w nowej karcie</a>

2. Link do pliku PDF

   <a href="raport.pdf" target="_blank">Pobierz raport (PDF otwarty w nowej karcie)</a>

3. Link do strony w tym samym oknie (ustawienie domyślne) html <a href="kontakt.html">Kontakt</a>

Zalecane zabezpieczenia – rel="noopener noreferrer"

Przy otwieraniu linków w nowej karcie warto dodać atrybut rel="noopener noreferrer". Poprawia to bezpieczeństwo – zabezpiecza przed tzw. tabnabbingiem oraz ogranicza przekazywanie niektórych informacji do strony docelowej.

Przykład bezpiecznego linku –

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Bezpieczny link w nowej karcie</a>

• noopener – uniemożliwia stronie docelowej uzyskanie dostępu do obiektu window.opener (ochrona przed podmianą oryginalnej strony);
• noreferrer – zapobiega przesyłaniu nagłówka Referer, chroni prywatność użytkownika.

Dodatkowe możliwości – atrybut title

Atrybut title doda podpowiedź po najechaniu myszką:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer" title="Otwiera się w nowej karcie">Link z podpowiedzią</a>

Implementacja w XHTML i alternatywy JS

W przypadku dokumentów XHTML, nie zaleca się używania atrybutu target (z powodu zgodności ze standardem). Alternatywnie, można zastosować JavaScript:

<a href="nowa_strona.htm" onclick="this.target='_blank'">Otwórz w nowym oknie</a>

Podsumowanie najważniejszych wskazówek

• Używaj target="_blank", by otworzyć link w nowej karcie;
• Dodawaj rel="noopener noreferrer" dla lepszego bezpieczeństwa;
• Używaj title, by informować o działaniu linku;
• Zwracaj uwagę na standardy oraz na doświadczenie użytkownika – otwieranie w nowych kartach stosuj głównie do linków prowadzących poza własną witrynę lub do plików wymagających wyjścia poza główną nawigację.

Stosując powyższe praktyki, Twoje odnośniki będą zarówno funkcjonalne, jak i bezpieczne oraz przyjazne dla użytkowników.