W języku HTML, aby zdefiniować hiperłącze otwierające się w osobnej karcie przeglądarki, należy zastosować atrybut
A. target = "_new"
B. rel = "prev"
C. target = "_blank"
D. rel = "external"
Pytanie z egzaminu CKE, czerwiec 2022 (arkusz E.14-SG-22.06).
Atrybut target z wartością "_blank" jest właściwym sposobem na ustawienie, żeby hiperłącze otworzyło się w nowej karcie albo w nowym oknie przeglądarki, zależnie od ustawień użytkownika i samej przeglądarki. W praktyce zapis wygląda np. tak: <a href="https://example.com" target="_blank" rel="noopener noreferrer">Otwórz stronę</a>. Najważniejsze jest tu target="_blank", bo to właśnie wartość specjalna _blank oznacza utworzenie nowego kontekstu przeglądania. Moim zdaniem warto od razu zapamiętać też dodatek rel="noopener noreferrer", bo jest to dobra praktyka bezpieczeństwa przy linkach otwieranych w nowej karcie, szczególnie gdy prowadzą do zewnętrznych serwisów. Chroni to przed sytuacją, w której nowo otwarta strona mogłaby manipulować stroną źródłową przez obiekt window.opener. W HTML atrybut target stosuje się zwykle w elemencie a, ale spotyka się go też przy formularzach. Trzeba tylko używać go rozsądnie, bo wymuszanie nowych kart bywa irytujące dla użytkownika, jeśli link nie prowadzi poza aktualny serwis.
W tym pytaniu łatwo pomylić atrybuty odpowiedzialne za zachowanie linku z atrybutami opisującymi relację między dokumentami. W HTML to target decyduje o tym, gdzie zostanie otwarty zasób wskazany przez link, a wartość specjalna _blank oznacza nową kartę lub nowe okno przeglądarki. Zapis target="_new" wygląda podobnie i przez to bywa kuszący, ale nie jest standardową wartością przeznaczoną do otwierania linku w nowej karcie. Przeglądarka może potraktować taką wartość jak nazwę konkretnego kontekstu przeglądania, co daje inne i mniej przewidywalne zachowanie. To taki klasyczny błąd: ktoś kojarzy słowo „new”, więc uznaje, że musi działać jak „nowe okno”.
Atrybut rel działa zupełnie inaczej. On opisuje relację między bieżącą stroną a dokumentem docelowym, ale nie steruje miejscem otwarcia linku. Wartość rel="prev" oznacza poprzedni dokument w jakiejś sekwencji, na przykład poprzednią stronę artykułu albo paginacji. Nie ma to związku z kartami przeglądarki. Z kolei rel="external" może informować, że link prowadzi do zasobu zewnętrznego, poza aktualny serwis, ale samo w sobie też nie wymusza otwarcia w nowej karcie. Z mojego doświadczenia najlepiej rozdzielić to w głowie tak: target mówi „gdzie otworzyć”, a rel mówi „jaki jest charakter powiązania”. Dlatego przy linku zewnętrznym często spotkasz jednocześnie target="_blank" oraz rel="noopener noreferrer", ale każdy z tych atrybutów ma inną rolę.
Atrybut rel działa zupełnie inaczej. On opisuje relację między bieżącą stroną a dokumentem docelowym, ale nie steruje miejscem otwarcia linku. Wartość rel="prev" oznacza poprzedni dokument w jakiejś sekwencji, na przykład poprzednią stronę artykułu albo paginacji. Nie ma to związku z kartami przeglądarki. Z kolei rel="external" może informować, że link prowadzi do zasobu zewnętrznego, poza aktualny serwis, ale samo w sobie też nie wymusza otwarcia w nowej karcie. Z mojego doświadczenia najlepiej rozdzielić to w głowie tak: target mówi „gdzie otworzyć”, a rel mówi „jaki jest charakter powiązania”. Dlatego przy linku zewnętrznym często spotkasz jednocześnie target="_blank" oraz rel="noopener noreferrer", ale każdy z tych atrybutów ma inną rolę.