Atrybut target – co to jest?
Atrybut target to cecha elementów HTML, która określa docelowe okno lub kartę dla otwieranej zawartości strony internetowej. Innymi słowy, decyduje on, gdzie przeglądarka wyświetli stronę lub zasób wskazany przez hiperłącze albo gdzie pokaże wynik wysłania formularza. Atrybut target jest najczęściej stosowany w tagach linków (znacznik <a>) i pozwala kontrolować, czy dany odnośnik otworzy się w tym samym oknie, w nowej karcie przeglądarki, czy na przykład w określonej ramce osadzonej na stronie. Jest to istotny aspekt tworzenia stron WWW i działań marketingu online, ponieważ wpływa na sposób, w jaki użytkownik porusza się po witrynie i wchodzi w interakcje z jej treściami.
Zastosowanie atrybutu target w HTML
Z tego atrybutu korzystają różne elementy HTML. Najczęściej pojawia się on w linkach, czyli znacznikach <a> służących do tworzenia hiperłączy. Właśnie w odnośnikach atrybut target decyduje, czy kliknięcie przeniesie użytkownika na nową kartę, pozostanie w tej samej karcie, czy otworzy treść w określonej ramce. Oprócz tego target można wykorzystać także w innych tagach, takich jak <form>, <area> czy <base>. W przypadku <form> atrybut ten wskazuje, gdzie wyświetli się odpowiedź po wysłaniu formularza (np. na nowej karcie, jeśli tak zadecydujemy). Znacznik mapy obrazka <area> również obsługuje atrybut target, co pozwala określić, gdzie otworzy się link powiązany z wybranym regionem grafiki. Z kolei <base> to tag w sekcji <head>, za pomocą którego można ustawić domyślne zachowanie wszystkich odnośników na stronie (w tym domyślny target dla linków). Mimo istnienia wymienionych możliwości, w praktyce atrybut target spotykany jest najczęściej przy standardowych linkach na stronach internetowych. To w tych odnośnikach jego wpływ na nawigację użytkownika jest największy.
Wartości atrybutu target
Atrybut target może przyjmować różne wartości, które determinują sposób otwarcia linku lub wyniku działania formularza. Większość z nich stanowią zarezerwowane nazwy poprzedzone znakiem podkreślenia (_) – odpowiadają one konkretnym zachowaniom przeglądarki. W sytuacji, gdy nie określimy żadnego atrybutu target, przeglądarka przyjmie domyślnie wartość równoważną _self, czyli otworzy odnośnik w bieżącym oknie. Poniżej opisane są dostępne wartości atrybutu target wraz z ich znaczeniem:
_blank– otwiera link w nowym oknie lub nowej karcie przeglądarki._self– otwiera link w tym samym oknie lub karcie (to domyślne zachowanie, gdy target nie jest określony)._parent– otwiera link w ramce nadrzędnej, czyli w oknie o jeden poziom wyżej w hierarchii (dotyczy sytuacji, gdy strona jest osadzona wewnątrz innej ramki)._top– otwiera link w głównym oknie przeglądarki, usuwając wszelkie ramki (przydatne, gdy strona działa w zagnieżdżonych ramkach i chcemy powrócić do głównego kontekstu).- Dowolna nazwa (np.
target="MojeOkno") – otwiera link w oknie lub karcie o podanej nazwie. Jeśli takie okno już istnieje (zostało wcześniej otwarte i nazwane), treść załaduje się właśnie w nim; w przeciwnym razie przeglądarka utworzy nowe okno o wskazanej nazwie.
Obecnie, w nowoczesnych witrynach bez ramkowej struktury, w praktyce wykorzystuje się głównie wartości _blank oraz _self. Dwie ostatnie z powyższych opcji (_parent i _top) stosowano przede wszystkim w czasach, gdy powszechne było używanie ramek (<frameset> i zagnieżdżonych <iframe>) – współcześnie spotyka się je rzadko. Z kolei definiowanie własnej nazwy okna (ostatnia z wymienionych możliwości) to dość niszowa technika, spotykana głównie przy specjalistycznych aplikacjach webowych lub przy otwieraniu treści w dedykowanych wyskakujących oknach (tzw. pop-upach).
Przykład użycia atrybutu target
Aby lepiej zobrazować działanie atrybutu target, warto prześledzić prosty przykład jego użycia w kodzie HTML. Rozważmy odnośnik (link) prowadzący do zewnętrznej strony internetowej. Standardowo, bez dodatkowych atrybutów, taki link otworzy się w bieżącej karcie przeglądarki. Możemy jednak wymusić otwarcie go w nowej karcie za pomocą ustawienia target="_blank". Poniżej znajduje się fragment kodu ilustrujący to zastosowanie:
<a href="https://example.com" target="_blank">Zobacz stronę</a>W powyższym kodzie kotwica (znacznik <a>) zawiera atrybut target z wartością _blank. Oznacza to, że gdy użytkownik kliknie w ten link („Zobacz stronę”), witryna example.com otworzy się w nowej karcie, a obecna strona pozostanie otwarta. Dzięki temu odwiedzający może łatwo wrócić do naszej strony po zapoznaniu się z zewnętrzną treścią. Gdybyśmy pominęli atrybut target lub ustawili go jako _self, kliknięcie spowodowałoby, że przeglądarka załaduje stronę docelową w tym samym oknie, zastępując bieżącą witrynę.
Atrybut target a SEO (pozycjonowanie)
Z punktu widzenia SEO, czyli optymalizacji pod kątem wyszukiwarek, atrybut target nie ma bezpośredniego wpływu na pozycję strony w wynikach wyszukiwania. Wyszukiwarki (takie jak Google) analizują odnośniki pod kątem ich treści, jakości czy atrybutów typu rel (np. nofollow), natomiast sposób otwierania linku (nowa czy ta sama karta) jest dla nich nieistotny. Robot indeksujący traktuje każdy link jednakowo, niezależnie od tego, czy posiada on target _blank, czy nie. Przedstawiciele Google wielokrotnie podkreślali, że algorytmy wyszukiwarki ignorują ten atrybut – dodanie target do linku nie wzmacnia ani nie osłabia jego wartości pod kątem SEO.
To oznacza, że dodanie np. target _blank do linków wychodzących nie poprawi widoczności strony w Google ani jej nie zaszkodzi. Niemniej jednak należy pamiętać, że wszelkie aspekty wpływające na zachowanie użytkowników mogą pośrednio przekładać się na efektywność witryny. Przykładowo, jeśli linki otwierane w nowej karcie zatrzymują użytkowników na dłużej na naszej stronie (ponieważ nie opuszczają jej całkowicie, przechodząc do innej witryny), może to potencjalnie poprawić pewne wskaźniki zaangażowania odbiorców. Takie efekty wynikają jednak z doświadczenia użytkownika, a nie z bezpośredniego działania algorytmów wyszukiwarek.
Atrybut target a doświadczenie użytkownika (UX) i bezpieczeństwo
Decyzja o wykorzystaniu atrybutu target powinna uwzględniać także doświadczenie użytkownika (UX) oraz kwestie bezpieczeństwa. Z perspektywy UX ważne jest przewidywalne zachowanie strony – niespodziewane otwieranie nowych okien lub kart bywa dla internautów dezorientujące. Niektórzy użytkownicy mogą nie zauważyć, że przeglądarka otworzyła nową kartę, i próbować wrócić do poprzedniej strony przyciskiem „Wstecz” (co w takiej sytuacji nie zadziała zgodnie z oczekiwaniami). Dlatego ogólna zasada użyteczności sugeruje, aby linki wewnętrzne (prowadzące w obrębie tej samej witryny) otwierać w tym samym oknie – pozwala to zachować naturalny ciąg nawigacji. Otwarcie nowej karty warto zarezerwować dla odsyłaczy zewnętrznych lub treści dodatkowych, które użytkownik może chcieć przejrzeć równolegle. W takich przypadkach dobrym pomysłem jest również dodanie wskazówki dla odbiorcy, np. ikony lub krótkiej notatki informującej, że dany link otworzy się w nowym oknie. Dbałość o czytelność nawigacji i przewidywalność działania zwiększa komfort korzystania ze strony i pozytywnie wpływa na odbiór serwisu.
Równie istotne są aspekty bezpieczeństwa. Otwieranie linków w nowej karcie (przy użyciu target="_blank") wiąże się z potencjalnym zagrożeniem znanym jako „tabnabbing”. Polega ono na tym, że złośliwa strona otwarta w nowej karcie może, korzystając z dostępu do obiektu window.opener, przekierować oryginalną witrynę (tę, z której nastąpiło kliknięcie) na inną, niepożądaną stronę (np. fałszywą witrynę udającą nasz serwis). Aby zapobiec takim atakom, należy zawsze stosować dodatkowy atrybut rel="noopener noreferrer" w połączeniu z target="_blank". Parametr noopener sprawia, że nowo otwarta karta nie uzyskuje dostępu do obiektu opener (dzięki czemu nie może zmienić źródłowej strony), zaś noreferrer dodatkowo ukrywa informację o adresie strony odsyłającej. Wiele systemów CMS i edytorów do zarządzania treścią dodaje te zabezpieczenia automatycznie, jednak warto mieć świadomość ich działania, ponieważ troska o bezpieczeństwo użytkowników jest ważnym elementem profesjonalnego podejścia do projektowania stron.
Najlepsze praktyki korzystania z atrybutu target
Stosowanie atrybutu target w praktyce wymaga wyważonego podejścia. Poniżej kilka najlepszych praktyk, o których warto pamiętać podczas linkowania na stronie:
- Linki zewnętrzne: Stosuj
target="_blank"głównie dla odnośników prowadzących do zewnętrznych serwisów lub dokumentów. Dzięki temu osoba odwiedzająca Twoją witrynę nie zamknie jej przypadkowo, przechodząc na inną stronę. - Nawigacja wewnętrzna: Unikaj otwierania wewnętrznych podstron Twojego serwisu w nowych oknach. Dla użytkownika bardziej intuicyjne jest, gdy porusza się po stronie w tej samej karcie, a nadmiar otwartych kart może wprowadzać chaos.
- Informowanie użytkownika: Jeśli decydujesz się na otwieranie linku w nowej karcie, oznacz to wyraźnie. Możesz dodać małą ikonę obok linku lub krótką notkę (np. „(otwiera się w nowym oknie)”), aby użytkownik był świadomy, czego się spodziewać po kliknięciu.
- Bezpieczeństwo: Pamiętaj o dodaniu atrybutu
rel="noopener noreferrer"za każdym razem, gdy korzystasz ztarget="_blank". To prosta zmiana w kodzie, która znacząco zwiększa bezpieczeństwo, chroniąc przed opisanymi wyżej atakami typu tabnabbing. - Konsekwencja: Ustal jednolitą politykę dla swojej strony. Jeżeli podejmiesz decyzję, że wszystkie linki wychodzące otwierają się w nowej karcie, trzymaj się tego konsekwentnie. Spójność sprawia, że użytkownik nie jest zaskakiwany różnym działaniem odnośników.
- Użytkownicy mobilni: Weź pod uwagę doświadczenie osób przeglądających stronę na smartfonach. Przełączanie się między wieloma kartami na urządzeniu mobilnym bywa mniej wygodne, dlatego tym bardziej warto ograniczyć niepotrzebne otwieranie nowych okien na telefonach i tabletach.