Atrybut target w HTML służy do określania, w jaki sposób ma zostać otwarta docelowa strona lub zasób wskazany przez hiperłącze, najczęściej w tagu <a>. Pozwala to programistom i projektantom stron internetowych kontrolować, czy po kliknięciu linku strona otworzy się w tym samym oknie lub karcie, nowej karcie, ramce czy też określonym, nazwanym oknie.
Jak działa atrybut target?
Umieszczając atrybut target w znacznikach takich jak <a>, <form> czy <base>, można precyzyjnie wskazać kontekst, w jakim ma pojawić się docelowy zasób. Najczęściej wykorzystywany jest w linkach, umożliwiając m.in. otwieranie odnośników w nowych kartach lub przeładowywanie bieżącego widoku.
Najczęściej stosowane wartości atrybutu target
_self– otwiera link w tym samym oknie lub karcie, w której został kliknięty (to jest domyślne zachowanie, jeśli atrybut nie jest podany);_blank– otwiera link w nowym oknie lub nowej karcie przeglądarki;_parent– otwiera link w ramce nadrzędnej (jeśli strona korzysta z ramek);_top– otwiera link w najwyższym poziomie okna przeglądarki, eliminując wszystkie ramki;- Nazwa okna – można ustawić własną nazwę, aby link otwierał się w określonym, wcześniej zdefiniowanym oknie lub ramce.
Przykłady użycia
Otwieranie linku w nowej karcie
<a href="https://przyklad.pl" target="_blank">Otwórz w nowej karcie</a>Ten przykład spowoduje, że po kliknięciu linku strona docelowa otworzy się w nowej karcie przeglądarki.
Otwieranie linku w tym samym oknie
<a href="https://przyklad.pl" target="_self">Otwórz w tym samym oknie</a>Link zostanie otwarty w tej samej karcie lub oknie – jest to zachowanie domyślne.
Ramki i zaawansowane konteksty
Jeśli strona korzysta z ramek (np. <iframe>), można wskazać, w jakiej ramce ma otworzyć się zawartość:
<a href="https://przyklad.pl" target="nazwaRamki">Otwórz w ramce o nazwie</a>Aby otworzyć link w ramce nadrzędnej:
<a href="https://przyklad.pl" target="_parent">Otwórz w ramce nadrzędnej</a>Aby zastąpić wszystkie ramki i wyświetlić stronę docelową na pełnym ekranie:
<a href="https://przyklad.pl" target="_top">Otwórz na najwyższym poziomie okna</a>Bezpieczeństwo i dobre praktyki
Stosując target="_blank", warto dodatkowo użyć atrybutu rel="noopener noreferrer", co zwiększa bezpieczeństwo – uniemożliwia nowo otwartej stronie uzyskanie dostępu do obiektu window.opener powiązanego z pierwotną stroną:
<a href="https://przyklad.pl" target="_blank" rel="noopener noreferrer">Link bezpieczny</a>Podsumowanie
Atrybut target umożliwia precyzyjną kontrolę sposobu otwierania linków i zasobów w HTML, zwiększając elastyczność i wygodę użytkowania stron internetowych. Prawidłowe wykorzystanie tego atrybutu wpływa na doświadczenia użytkownika oraz bezpieczeństwo serwisu, zwłaszcza przy linkach zewnętrznych i dynamicznych interfejsach.
