W artykule tym omówimy najważniejsze wartości atrybutu target w linkach HTML oraz jakie okna docelowe otwierają. Dowiesz się również, jak różne wartości tego atrybutu są stosowane na stronach internetowych. Wyjaśnimy również różnicę między atrybutem "blank" a "_blank" i jak wpływają one na otwieranie linków. Przedstawimy korzyści z używania atrybutu target "_blank" i jak wpływa to na doświadczenie użytkownika. Odkryjemy także, jak atrybut noopener poprawia bezpieczeństwo użytkowników strony internetowej i zapobiega atakom phishingowym. Na koniec wyjaśnimy, jak użytkownik może łatwo rozpoznać odwiedzone i nieodwiedzone linki poprzez przejścia kolorów. Zapraszamy do lektury!
Jak już wcześniej wspomniano, atrybut target pozwala na określenie okna docelowego, w którym ma zostać otwarta zawartość strony internetowej. Istnieje kilka różnych wartości tego atrybutu, z których najczęściej spotykane są: _blank, _self, _parent i _top.
Atrybut _blank jest jednym z najpopularniejszych i powoduje otwarcie strony internetowej w nowym oknie lub nowej karcie przeglądarki. Jest to przydatne rozwiązanie, ponieważ użytkownik może mieć na widoku jednocześnie wiele stron internetowych, co ułatwia poruszanie się pomiędzy nimi. Natomiast atrybut _self powoduje otwarcie zawartości witryny w tym samym oknie, co jest domyślnym zachowaniem. Atrybut _parent otwiera stronę w nadrzędnym kontekście przeglądania, jednak nie jest to popularne rozwiązanie. Ostatecznie atrybut _top otwiera zawartość strony internetowej w oknie głównym. Możliwe jest również zastosowanie nazwy ramki jako wartości atrybutu target, co spowoduje otwarcie strony w konkretnej ramce.
W praktyce, zastosowanie różnych wartości atrybutu target może mieć istotne znaczenie dla użytkowników stron internetowych. Na przykład, jeśli na stronie znajduje się lista przydatnych linków, zazwyczaj lepiej jest otwierać je w nowych kartach lub oknach za pomocą atrybutu _blank. Dzięki temu użytkownicy mogą łatwo powracać do listy i otwierać kolejne linki bez konieczności opuszczania strony pierwotnej.
W przypadku stron e-commerce, gdzie istnieje potrzeba porównywania produktów lub przeglądania ofert różnych sklepów, warto zastosować atrybut _top. Dzięki temu każdy kliknięty link będzie otwierał się w oknie głównym, umożliwiając poruszanie się po różnych sklepach bez konieczności otwierania nowych kart czy okien.
Kiedy używamy atrybutu target, możemy spotkać dwie różne wartości: "blank" i "_blank". Choć na pierwszy rzut oka mogą wydawać się takie same, istnieje między nimi subtelna różnica.
Gdy używamy wartości "blank", otwiera się jedna nowa karta lub okno, w którym otwierają się wszystkie kliknięte linki. W rezultacie wszystkie wcześniej otwarte strony zostaną nadpisane. To może być uciążliwe dla użytkowników, którzy chcą mieć dostęp do poprzednio przeglądanych stron.
Z kolei wartość "_blank" powoduje, że po kliknięciu linku użytkownik zostaje przekierowany do dokumentu w nowej karcie lub oknie. Jeśli będzie dalej poruszał się po stronie internetowej, każdy kolejny link również uruchomi się w nowej karcie lub oknie. Dzięki temu użytkownicy mają na widoku wszystkie otwarte strony internetowe w różnych kartach, co ułatwia nawigację i poruszanie się pomiędzy nimi.
W praktyce zwykle zaleca się korzystanie z wartości "_blank", ponieważ zapewnia lepsze doświadczenie użytkownika. Jednak niezależnie od wybranej wartości atrybutu target, ważne jest również dodanie atrybutu rel="noopener". Dzięki temu można zablokować ataki ze strony hakerów na użytkowników Twojej strony internetowej i zapewnić im większe bezpieczeństwo.
Korzystanie z atrybutu target "_blank" ma wiele korzyści dla użytkowników stron internetowych. Główną zaletą jest możliwość otwierania linków w nowych kartach lub oknach przeglądarki, co pozwala użytkownikom na jednoczesne przeglądanie wielu stron internetowych. Dzięki temu mają oni łatwy dostęp do poprzednio otwartych stron, bez konieczności opuszczania strony pierwotnej.
Używanie atrybutu target "_blank" wpływa również pozytywnie na doświadczenie użytkownika. Pozwala to na swobodne poruszanie się pomiędzy różnymi witrynami i łatwe przełączanie się pomiędzy nimi. Na przykład, gdy studenci tworzą notatki podczas przeglądania różnych źródeł informacji, mogą mieć otwarte kilka kart z różnymi stronami i swobodnie przechodzić między nimi. Dzięki temu mogą skupić się na swojej pracy i nie tracić czasu na powtarzające się operacje otwierania i zamykania kart.
Atrybut noopener jest dodatkowym atrybutem, który można zastosować w połączeniu z atrybutem target="_blank". Jego głównym celem jest poprawa bezpieczeństwa użytkowników strony internetowej oraz zapobieganie atakom phishingowym.
Główną funkcją atrybutu noopener jest zablokowanie możliwości manipulacji zawartością nowo otwartego okna lub karty przeglądarki przez stronę, z której pochodzi link. Dzięki temu hakerzy nie mogą wykorzystać otwartej strony do przeprowadzenia ataku phishingowego, czyli podszywania się pod inną witrynę w celu wyłudzenia poufnych danych od użytkownika.
Kiedy przeglądamy strony internetowe, często spotykamy się z różnymi kolorami linków. Te kolory mają swoje znaczenie i pomagają użytkownikom łatwo rozpoznać, które linki już odwiedzili, a które są jeszcze nieodwiedzone. W języku HTML istnieją specjalne przejścia kolorów, które są stosowane dla linków.
Standardowo, niebieski kolor jest używany dla linków, na które użytkownik jeszcze nie kliknął. Po kliknięciu w link, kolor zmienia się na czerwony i utrzymuje się tak do momentu załadowania zawartości odnośnika. Gdy użytkownik powróci na stronę internetową, link zostanie oznaczony kolorem magenta, co oznacza, że został już odwiedzony. Dzięki tym przejściom kolorów użytkownicy mogą łatwo śledzić swoje działania na stronie i mieć kontrolę nad tym, które linki już sprawdzili.
Zobacz przykłady dobrze i źle przeprowadzonych migracji.
Pobierz darmowy e-book