Atrybut target

Atrybut target to specyficzna właściwość, którą twórcy stron internetowych dodają do linków, formularzy oraz innych elementów. Pozwala on na określenie okna docelowego, które ma zostać wyświetlone, gdy użytkownik kliknie link lub zaakceptuje formularz. Jego zastosowanie ma na celu kontrolowanie, gdzie i jak otworzy się docelowy dokument, co wpływa na doświadczenie użytkownika oraz funkcjonalność strony.

Wartości atrybutu target są zapisywane z podkreśleniem na początku, co wynika z określeń w walidatorze W3C. Najczęściej używane wartości to:

  • _blank – otwiera zawartość strony w nowym oknie lub nowej karcie.
  • _self – otwiera zawartość strony w tym samym oknie (domyślnie).
  • _parent – otwiera zawartość strony w nadrzędnym kontekście przeglądania.
  • _top – otwiera zawartość strony w oknie głównym.

Każda z tych wartości ma swoje specyficzne zastosowanie, które może być kluczowe w zależności od potrzeb i celów projektanta strony.

Wartości i zastosowanie atrybutu target

Atrybut target jest niezwykle użyteczny w kontrolowaniu, jak i gdzie otwierają się dokumenty docelowe. Poniżej znajduje się szczegółowy opis poszczególnych wartości:

  1. _blank: Umożliwia otwarcie linku w nowym oknie lub karcie. Jest to przydatne, gdy chcemy, aby użytkownik pozostał na naszej stronie, jednocześnie przeglądając dodatkowe informacje w nowym oknie. Przykład użycia: <a href="https://example.com" target="_blank">Otwórz w nowej karcie</a>. Użytkownicy mają na widoku wszystkie otwarte strony, co ułatwia nawigację i wielozadaniowość.
  2. _self: Jest to domyślna wartość atrybutu target. Otwiera link w tym samym oknie, nadpisując aktualnie wyświetlaną stronę. Przykład użycia: <a href="https://example.com" target="_self">Otwórz w tym samym oknie</a>. Jest to użyteczne, gdy nie chcemy, aby użytkownik pozostawał na bieżącej stronie.
  3. _parent: Ta wartość otwiera link w nadrzędnym kontekście przeglądania, co jest przydatne w przypadku ramek. Przykład użycia: <a href="https://example.com" target="_parent">Otwórz w ramce nadrzędnej</a>. Jest to mniej popularne rozwiązanie, ale może być używane w specyficznych przypadkach.
  4. _top: Umożliwia otwarcie linku w głównym oknie przeglądarki, co może być użyteczne w przypadku zagnieżdżonych ramek. Przykład użycia: <a href="https://example.com" target="_top">Otwórz w głównym oknie</a>. Gwarantuje, że dokument otworzy się w pełnym oknie, eliminując wszelkie zagnieżdżenia.

Dodatkowo warto wspomnieć o atrybucie noopener, który jest często używany razem z target="_blank". Zastosowanie rel="noopener" zapobiega atakom phishingowym, które mogą wystąpić, gdy nowa karta ma dostęp do obiektu window.opener. Przykład: <a href="https://example.com" target="_blank" rel="noopener">Bezpieczne otwarcie w nowej karcie</a>.

Atrybut target można również używać w różnych elementach HTML, takich jak a, form, link, area i base. Każdy z tych elementów może korzystać z atrybutu target, aby kontrolować, gdzie i jak otwierają się związane z nimi dokumenty.

Wartość „_blank” vs. „blank”

Różnica między wartościami "_blank" i "blank" w atrybucie target jest istotna. W przypadku wartości "_blank", każdorazowe kliknięcie linku otwiera nową kartę lub okno. Natomiast wartość "blank" (bez podkreślenia) otwiera wszystkie linki w tej samej nowej karcie, nadpisując poprzednie zawartości. Dlatego zaleca się używanie wartości "_blank", aby użytkownicy mogli zachować otwarte strony w osobnych kartach, co poprawia ich doświadczenie i nawigację.

Zastosowanie atrybutu noopener

Atrybut noopener jest stosowany razem z target="_blank", aby zwiększyć bezpieczeństwo. Zapobiega on atakom phishingowym, blokując nowej karcie dostęp do obiektu window.opener. Użycie tego atrybutu jest kluczowe dla ochrony użytkowników przed potencjalnymi zagrożeniami. Przykład zastosowania: <a href="https://example.com" target="_blank" rel="noopener">Bezpieczne otwarcie</a>.

Podsumowując, atrybut target jest kluczowym elementem w projektowaniu stron internetowych, pozwalając na kontrolowanie, gdzie i jak otwierają się linki i dokumenty. Jego odpowiednie użycie może znacząco poprawić doświadczenie użytkownika i bezpieczeństwo na stronie.