Nodea — logo

Atrybut target

Atrybut target to atrybut znacznika odnośnika a w kodzie HTML, który określa kontekst przeglądania, w jakim ma zostać otwarta strona docelowa po kliknięciu w link. Najprościej mówiąc, decyduje o tym, czy nowa strona pojawi się w tej samej karcie, w nowej karcie, czy w konkretnej ramce. To pozornie drobny szczegół, który realnie wpływa na doświadczenie użytkownika i bezpieczeństwo.

Na czym polega działanie atrybutu target?

Atrybut przyjmuje kilka wartości specjalnych:

  • _self — otwiera link w tym samym oknie lub karcie (wartość domyślna);
  • _blank — otwiera link w nowej karcie lub oknie;
  • _parent — otwiera w ramce nadrzędnej wobec bieżącej;
  • _top — otwiera w pełnym oknie, wychodząc ze wszystkich ramek.

Można też podać własną nazwę, aby otwierać kolejne linki w tej samej, wskazanej karcie. W praktyce najczęściej używa się dwóch pierwszych wartości, a pozostałe wiążą się z coraz rzadziej stosowanymi ramkami.

Zastosowanie w praktyce

Wartość _blank stosuje się, gdy nie chcemy, aby użytkownik opuścił bieżącą stronę — na przykład przy linkach do zewnętrznych źródeł, regulaminów czy dokumentów PDF podczas wypełniania formularza. Trzeba to jednak robić z umiarem, bo z punktu widzenia UX mnożenie kart bywa dezorientujące i psuje działanie przycisku „wstecz”. Kluczowa jest też kwestia bezpieczeństwa: linki otwierane przez target="_blank" powinny mieć atrybut rel="noopener" (a często również noreferrer), aby zapobiec atakowi tabnabbing, w którym otwarta strona przejmuje częściową kontrolę nad kartą źródłową. To jedno z zaleceń wpisujących się w szersze dobre praktyki bezpieczeństwa front-endu.

W kontekście dostępności warto pamiętać, że nagłe otwarcie nowej karty może zaskoczyć osoby korzystające z czytników ekranu, ponieważ zmiana kontekstu następuje bez wyraźnej zapowiedzi. Dobrą praktyką jest sygnalizowanie takiego zachowania — na przykład ikoną lub informacją tekstową przy linku otwieranym w nowym oknie. Dzięki temu użytkownik wie, czego się spodziewać, a strona pozostaje przewidywalna i zgodna z zasadami projektowania włączającego, niezależnie od tego, jaką wartość atrybutu target przyjęto.

Powiązane pojęcia

Najczęstsze pytania

Kiedy otwierać link w nowej karcie za pomocą target="_blank"?

Zasadą jest robić to oszczędnie. Nowa karta ma sens przy linkach zewnętrznych, formularzach czy dokumentach, których użytkownik nie chce tracić z pola widzenia. Otwieranie w nowej karcie linków wewnętrznych bywa uciążliwe, bo odbiera kontrolę nad nawigacją i psuje działanie przycisku wstecz.

Dlaczego przy target="_blank" dodaje się rel="noopener"?

Bez tego atrybutu strona otwarta w nowej karcie uzyskuje przez obiekt window.opener częściowy dostęp do strony źródłowej, co umożliwia atak typu tabnabbing. Dodanie rel="noopener" (często z noreferrer) rozłącza to powiązanie i zabezpiecza użytkownika. Nowe przeglądarki robią to domyślnie, ale jawny zapis jest bezpieczniejszy.