Atrybut target w HTML - co to jest i jakie ma znaczenie?

Atrybut Target w HTML – co to jest, jak działa i dlaczego ma znaczenie?

Na początek, co to jest atrybut target? 

Atrybut target – to element, dzięki któremu można dokładnie określić, gdzie ma się otworzyć docelowy dokument po kliknięciu link, czy też zaakceptowaniu określonego formularza – w nowej karcie, przeglądarce, nowym oknie. Standardowy odnośnik tego atrybutu to: <a>, ale są także tagi: <form> lub <base>

Wartości wyrażane przez atrybut target

Atrybut target spełnia swoją rolę, dzięki nazwom (wartościom), które wyraża. Każda z nich rozpoczyna się od „_”. Dlaczego? Ponieważ jest specjalne określenie w validator WC3, która zawiera przerwy w języku znaczników. Po nich jest specjalna nazwa np.:

  • _self – dokument otworzy się w tej samej karcie (oknie),
  • _blank – dokument otworzy się w nowej karcie (oknie),
  • _parent – aby otworzyć dokument w kolejnej ramce nadrzędnej,
  • _top – otwiera się linki typu „iframe” w głównym oknie przeglądarki.

Istnieje również możliwość wpisania własnej wartości, co spowoduje otwarcie dokumentu wybranym miejscu. Aby to zrobić, można wykorzystać tagi <a> lub <base>.

W HTML5 wykorzystywane są jedynie opcje _self i _blank. Domyślną wartością jest _self.

Jak używać atrybutu target? 

Aby skorzystać z atrybutu target, stosujemy zapis w języku html:

<a href =”https//jakasstrona.pl/”target”=_blank>link<a/a>

Ten zapis pokazuje, że jakaś strona zostanie wyświetlona w nowej karcie.

Po co stosujemy target – czyli jak go wykorzystać?

Zastanówmy się, dlaczego właściwie stosujemy atrybut target? Do czego to może nam służyć i jakie ma to znaczenie dla użytkownika? 

Otóż jest to bardzo przydatne narzędzie. Załóżmy, że na naszej stronie mamy mnóstwo artykułów do zaprezentowania dla klientów. Z pewnością, zależałoby nam, aby mogli wygodnie poruszać się po sklepie, oglądać kolejne produkty i móc wciąż poruszać się w obrębie naszej witryny.

Z kolei, w sytuacjach, gdy w grę wchodzi wiele linków, najłatwiej jest móc powrócić na poprzednią stronę, z pomocą przycisku wstecz. Są również sytuacje, kiedy istnieje konieczność otwierania kilku kart jednocześnie, korzystając z wielu różnych stron, np. podczas pracy, uczenia się, porównywania sklepów. 

Opcji jest wiele i po to właśnie istnieje atrybut target, który pomaga dostosować swoją stronę, dla wygody swojej i doświadczeń użytkownika.

Czy atrybut target wpływa na UX i SEO?

Zastosowanie atrybutu target bezpośrednio nie wpływa na SEO. Roboty wyszukiwarek nie zwracają uwagi na ten atrybut. Nie oznacza to jednak, że zupełnie nie ma on wartości, co do optymalizacji.

Duże znaczenie ma  względem UX. Atrybut target daje możliwość zaprojektowania witryny, tak, aby dostosować ją do oczekiwań odwiedzających. Target bardzo dobrze wpływa na odbiór użytkowników i komfort poruszania się po stronie. To z kolei ma znaczenie, jeśli chodzi o liczbę odwiedzin  i popularność witryny. Z jednej strony  otwieranie strony w nowym oknie, a co za tym idzie, poruszanie się po wielu stronach jednocześnie, lub odwrotnie – przemieszczanie się w obrębie witryny. Wygodne wyświetlanie zawartości to pozytywny odbiór użytkowników, a tym samym większy ruch na stronie.

Atrybut „blank” i „_blank” – jeden znak, a taka różnica

Oba znaki wyglądają na to samo, ale jednak jest między nimi minimalna różnica. W języku HTML jedna kreska zmienia charakter zapisu.

Odnośnik „blank” powoduje, że wszystkie linki otworzą się w jednej karcie/oknie. Takie nadpisanie linków spowoduje kłopot użytkownikom i utrudni przeglądanie poprzednich stron.

Jeśli przykładowo zastosujemy „_blank” przekierujemy użytkownika, kolejno na nową kartę bądź okno przeglądarki, a potem na kolejną i kolejną. Co sprawi, że będzie on mógł mieć otwartych kilka kart jednocześnie. Zapewnia to większą wygodę i przejrzystość w przeglądaniu stron internetowych. 

Atrybut noopener – strażnik bezpieczeństwa 

Często stosując target „_blank” dodatkowo wykorzystuje się atrybut noopener. Służy on do zapewnienia bezpieczeństwa, podczas przekierowania na nowo otwartą kartę. 

W chwili, gdy link otwiera się w nowej karcie lub oknie przeglądarki, to nowo otwarta strona, mogłaby posłużyć hakerom do ataku phishingowego. Atrybut noopener blokuję cyberprzestępcom dostęp do otwieranej witryny, uniemożliwiając podszycie się pod tą stronę, czy innego rodzaju próbę wyłudzenia danych.

Znaczenie atrybutu target dla użytkowników i twórców stron

Jak widać atrybut target, jest nawet więcej niż ważny. Pomaga użytkownikom poruszać się po stronach. Twórcy stron internetowych, znając przykłady użycia tego atrybutu, mogą dostosować witrynę, do oczekiwań, co na pewno przyczyni się, do częstszych odwiedzin.

Język HTML wydaje się być skomplikowany, ale znając atrybuty i sposoby na ich wdrożenie, można dopracować stronę internetową, pod każdym kątem. Atrybut target definiuje, gdzie znajduje się wyświetlona zawartość, a to bardzo ważne. Korzystając z internetu, przyzwyczailiśmy się, że strona pojawi się w nowym oknie lub karcie. Ale o tym, że jest to związane z atrybutem target, musi pamiętać właściciel witryny. Warto zawczasu zadbać o takie drobiazgi.