Co to jest atrybut target?

Target to atrybut, którego twórcy stron internetowych dodają do linków. Pozwala on na określenie okna docelowego, które ma zostać wyświetlone w momencie, gdy użytkownik zaakceptuje formularz bądź też kliknie link. Sprawdź najważniejsze informacje na temat atrybutu target. To ważny temat dla osób zainteresowanych tworzeniem stron internetowych, a także tym jak działają.

Jakie są wartości atrybutu target?

Wymienić można najczęściej występujące wartości atrybutu target:

• _blank,
•  _self,
• _parent,
•  _top.

Atrybut _blank otwiera zawartość strony internetowej w nowym oknie lub nowej karcie. Atrybut _self otwiera zawartość witryny w tym samym oknie (domyślnie). Atrybut „_parent” powoduje, że zawartość witryny internetowej zostaje otwarta w nadrzędnym kontekście przeglądania. Stosowanie atrybutu „_parent” nie jest popularnym rozwiązaniem. Wspomnianą wartość można jednak nadal wykorzystywać wewnątrz tagów. Z kolei atrybut „_top” otwiera zawartość strony internetowej w oknie głównym. Możliwe jest również zastosowanie atrybutu nazwy ramki. Otwiera on zawartość strony w ramce o danej nazwie.

Fakt, że atrybuty target są zapisywane z podkreśleniem na początku (na przykład „target=”_blank” wynika z tego, że jest to określenie w walidatorze Wc3, który zawiera luki w hipertekstowym języku znaczników.

Atrybut target – różnica między atrybutem „blank” i „_blank”

W sytuacji, gdy do atrybutu target przypisana jest wartość „blank”, po kliknięciu otwiera się jedna nowa karta i na niej otwierają się wszystkie kliknięte linki. W rezultacie wszystkie poprzednio otwarte strony są nadpisywane. Nie jest to jednak jedyna możliwość, którą można wykorzystać. Można wykorzystać także atrybut „_blank”.

Atrybut „_blank” powoduje, że użytkownik strony internetowej zostaje przekierowany do dokumentu w nowej karcie lub oknie, a gdy będzie dalej poruszał się po stronie internetowej, każdy kolejny link uruchomi się także w nowej karcie lub oknie.

Lepszym rozwiązaniem jest zwykle korzystanie z atrybutu target „_blank”. Dzięki temu użytkownicy mają na widoku wszystkie włączone strony internetowe w różnych kartach. Dobrze również do wspomnianego atrybutu „_blank” dodać atrybut rel=”noopener”. Dzięki temu możliwe jest zablokowanie ataków ze strony hakerów na użytkowników Twojej strony internetowej.

Przeczytaj także: Pozycjonowanie sklepu internetowego oraz audyt SEO

Atrybut target – otwieranie linku w nowym oknie

Twórcy stron internetowych nierzadko muszą odpowiedzieć sobie na pytanie, w którym oknie przeglądarki powinien uruchomić się dokument, do którego prowadzi link. Domyślnie otwiera się on bowiem w aktualnie istniejącym oknie i nachodzi na stronę, z której hiperłącze zostało umieszczone. W sytuacji, gdy tak się dzieje, użytkownik strony internetowej ma możliwość powrotu do tej, z której został przekierowany za pomocą przycisku przeglądarki „wstecz”.

Wielu użytkowników preferuje jednak, aby każda strona internetowa uruchamiała się w innej karcie. W takiej sytuacji jest im bowiem łatwiej przełączać się pomiędzy jedną i drugą witryną. Dla przykładu studenci mogą mieć odpalonych kilka kart i tworzyć swoje notatki, przełączając się pomiędzy nimi.

Otwieranie odnośnika w nowym oknie ma wpływ na UX. Wówczas użytkownicy klikający w link mogą jednocześnie pozostać na stronie pierwotnej, ponieważ odtwarzana zawartość pojawi się w nowej karcie przeglądarki. Z tego względu atrybut target jest implementowany między innymi w momencie realizacji strategii SXO. To Search Experience Optimization, czyli koncepcja łącząca dwa niezwykle ważne elementy z punktu widzenia marketingu internetowego: SEO oraz UX.

Atrybut noopener – jak poprawia bezpieczeństwo?

Atrybut linku noopener jest stosowany wraz z atrybutem „target=”blank”. Ten drugi ma na celu otworzenie strony internetowej w nowej karcie przeglądarki. Zastosowanie atrybutu linku noopener zapobiega atakom phishingowym na użytkowników strony internetowej. Polegają one w sporym uproszczeniu na podłożeniu w miejscu strony docelowej szkodliwych treści.

Poruszając się po stronach internetowych, warto pamiętać także o tak zwanych przejściach kolorów. W języku HTML zostały one stworzone tak, aby użytkownik mógł łatwo zorientować się, które linki już otworzył. Widzi również te odnośniki, które pozostały nietknięte.

• Niebieski jest kolorem linków, na które użytkownik jeszcze nie kliknął,
• Czerwony to kolor, który pojawia się od razu po kliknięciu, aż do momentu pobrania do przeglądarki zawartości odnośnika,
• Magenta to kolor linków, które użytkownik strony internetowej już odwiedził.

Pamiętaj o ustawieniach target, gdy tworzysz lub przeglądasz strony internetowe!

Semcore