Sobes.tech
Junior

Do czego służy atrybut rel w tagu link?

sobes.tech AI

Odpowiedź od AI

Atrybut rel w tagu <link> określa relację (relationship) między bieżącym dokumentem a dokumentem, na który odwołuje się tag. Informuje przeglądarkę, jak korzystać z powiązanych zasobów.

Najczęściej używane wartości rel to:

  • stylesheet: Wskazuje na zewnętrzny plik CSS, który ma zostać zastosowany do dokumentu.
  • icon/shortcut icon: Wskazuje ikonę (favicon) dla strony, wyświetlaną na karcie przeglądarki.
  • preload: Wstępnie ładuje zasób, który będzie potrzebny później, nie blokując renderowania.
  • preconnect: Ustanawia połączenie z określonym źródłem z wyprzedzeniem, przyspieszając kolejne żądania.
  • prefetch: Wstępnie ładuje zasób, który może być potrzebny w przyszłości podczas nawigacji użytkownika.
  • canonical: Wskazuje kanoniczny URL dla strony, pomagając wyszukiwarkom określić główną wersję treści.
  • alternate: Wskazuje alternatywną wersję bieżącego dokumentu (np. w innym języku lub formacie).
  • author: Wskazuje autora dokumentu.
  • help: Wskazuje dokument pomocy.

Przykład użycia rel="stylesheet":

<link rel="stylesheet" href="/css/style.css">

Przykład użycia rel="icon":

<link rel="icon" href="/favicon.ico" type="image/x-icon">

Przykład użycia rel="preload":

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>

Użycie rel jest konieczne dla poprawnego przetwarzania zewnętrznych zasobów przez przeglądarkę i wyszukiwarki, a także dla optymalizacji wydajności.