<link>

Łączy dokument z zewnętrznym zasobem: arkuszem stylów, ikoną strony, fontem albo inną wersją językową.

Wyświetlanie: none
Znacznik zamykający: Brak, element pusty
Dozwolona zawartość: Brak, element pusty

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Domyślny CSS
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<head>
  <meta charset="utf-8">
  <title>Kurs HTML i CSS od podstaw | CodeWorlds</title>
  <link rel="stylesheet" href="/css/style.css">
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="canonical" href="https://www.codeworlds.com/kurs-html-css">
</head>

Definicja i zastosowanie

Element <link> opisuje związek między bieżącą stroną a innym zasobem. Rodzaj tego związku podajesz w atrybucie rel, a adres w href. Najczęściej dołączasz w ten sposób plik CSS i ikonę strony (favicon), ale <link> potrafi też przyspieszyć wczytywanie zasobów albo wskazać wyszukiwarce właściwy adres strony.

To element pusty, bez znacznika zamykającego, i zwykle stoi w <head>. Nie jest widoczny ani klikalny. Na tym polega różnica względem <a>: odnośnik jest dla użytkownika, a <link> to informacja dla przeglądarki i robotów.

Arkusz stylów dołączony w nagłówku wstrzymuje wyświetlanie strony, dopóki się nie pobierze. Brzmi groźnie, ale to celowe: dzięki temu nie widać przez chwilę strony bez stylów. Warto więc dbać o to, żeby pliki CSS były lekkie.

Składnia

<link rel="relacja" href="adres">

Atrybuty

rel
lista słów kluczowych
Rodzaj związku z zasobem i zarazem informacja, co przeglądarka ma z nim zrobić. Bez rel element nic nie robi. Najważniejsze wartości opisują kolejne wiersze tej tabeli.
href
URL
Adres zasobu, względny (/css/style.css) albo pełny (https://…). Bez niego element niczego nie wskazuje.
rel="stylesheet"
arkusz stylów CSS
Dołącza zewnętrzny plik CSS. To najpopularniejszy sposób stylowania stron: jeden plik obsługuje wszystkie podstrony, a przeglądarka po pierwszym pobraniu trzyma go w pamięci podręcznej. Atrybutu type="text/css" nie trzeba dopisywać.
media
zapytanie o media
Stosuje arkusz tylko wtedy, gdy warunek jest spełniony, na przykład przy drukowaniu (print) albo w trybie ciemnym. Plik, którego warunek nie jest spełniony, przeglądarka i tak pobiera, ale z niższym priorytetem i bez wstrzymywania wyświetlania strony.
rel="icon"
ikona strony (favicon)
Ikona widoczna na karcie przeglądarki i w zakładkach. Atrybut sizes podaje wymiary (np. 32x32), a type format pliku. Popularny zestaw to plik .ico dla starszych programów, ikona SVG, która skaluje się bez utraty jakości, apple-touch-icon (180 × 180 px) dla ekranu głównego w iOS i manifest aplikacji z ikonami dla Androida.
rel="preload"
wczesne pobranie zasobu, razem z `as`
Każe pobrać zasób od razu, zanim przeglądarka sama by go odkryła, na przykład font ukryty głęboko w pliku CSS albo główny obraz strony. Atrybut as (font, image, style, script, fetch) jest obowiązkowy i mówi, czym jest zasób. Fonty wymagają też atrybutu crossorigin, nawet gdy pochodzą z własnego serwera.
rel="preconnect"
wczesne połączenie z innym serwerem
Nawiązuje połączenie z serwerem, z którego za chwilę pobierzesz zasoby, np. z serwisem fontów. Przeglądarka wcześniej załatwia wyszukanie adresu, połączenie i szyfrowanie, więc sam plik przychodzi szybciej. Lżejsza wersja, dns-prefetch, tylko ustala adres IP serwera.
rel="canonical"
główny adres strony
Wskazuje wyszukiwarkom podstawowy adres strony, gdy ta sama treść jest dostępna pod kilkoma adresami, na przykład z parametrami ?utm_source=… albo z ukośnikiem na końcu i bez niego. Podaj pełny adres. Wyszukiwarka potraktuje go jako mocną wskazówkę, a nie bezwzględne polecenie.
rel="alternate"
inna wersja strony, np. z `hreflang`
Wskazuje alternatywną wersję tej samej treści: w innym języku (z atrybutem hreflang) albo w innym formacie, np. kanał RSS (z atrybutem type). Wartość hreflang="x-default" oznacza wersję domyślną dla osób, których języka nie obsługujesz osobno.
crossorigin
anonymous | use-credentials
Pobiera zasób w trybie CORS. anonymous (albo sam atrybut bez wartości) nie wysyła ciasteczek do innych domen, use-credentials je wysyła. Jest potrzebny przy fontach, przy integrity dla plików z innych domen i przy preconnect do serwerów, z których pobierasz fonty.
integrity
skrót kryptograficzny, np. `sha384-…`
Zabezpieczenie plików z zewnętrznych serwerów, np. z CDN (Subresource Integrity). Podajesz skrót pliku, a przeglądarka po pobraniu sprawdza, czy się zgadza. Jeśli ktoś podmieni plik na serwerze, przeglądarka go odrzuci. Przy plikach z innej domeny dodaj też crossorigin="anonymous".

Atrybut	Wartości	Opis
rel	lista słów kluczowych	Rodzaj związku z zasobem i zarazem informacja, co przeglądarka ma z nim zrobić. Bez `rel` element nic nie robi. Najważniejsze wartości opisują kolejne wiersze tej tabeli.
href	URL	Adres zasobu, względny (`/css/style.css`) albo pełny (`https://…`). Bez niego element niczego nie wskazuje.
rel="stylesheet"	arkusz stylów CSS	Dołącza zewnętrzny plik CSS. To najpopularniejszy sposób stylowania stron: jeden plik obsługuje wszystkie podstrony, a przeglądarka po pierwszym pobraniu trzyma go w pamięci podręcznej. Atrybutu `type="text/css"` nie trzeba dopisywać.
media	zapytanie o media	Stosuje arkusz tylko wtedy, gdy warunek jest spełniony, na przykład przy drukowaniu (`print`) albo w trybie ciemnym. Plik, którego warunek nie jest spełniony, przeglądarka i tak pobiera, ale z niższym priorytetem i bez wstrzymywania wyświetlania strony.
rel="icon"	ikona strony (favicon)	Ikona widoczna na karcie przeglądarki i w zakładkach. Atrybut `sizes` podaje wymiary (np. `32x32`), a `type` format pliku. Popularny zestaw to plik `.ico` dla starszych programów, ikona SVG, która skaluje się bez utraty jakości, `apple-touch-icon` (180 × 180 px) dla ekranu głównego w iOS i manifest aplikacji z ikonami dla Androida.
rel="preload"	wczesne pobranie zasobu, razem z `as`	Każe pobrać zasób od razu, zanim przeglądarka sama by go odkryła, na przykład font ukryty głęboko w pliku CSS albo główny obraz strony. Atrybut `as` (`font`, `image`, `style`, `script`, `fetch`) jest obowiązkowy i mówi, czym jest zasób. Fonty wymagają też atrybutu `crossorigin`, nawet gdy pochodzą z własnego serwera.
rel="preconnect"	wczesne połączenie z innym serwerem	Nawiązuje połączenie z serwerem, z którego za chwilę pobierzesz zasoby, np. z serwisem fontów. Przeglądarka wcześniej załatwia wyszukanie adresu, połączenie i szyfrowanie, więc sam plik przychodzi szybciej. Lżejsza wersja, `dns-prefetch`, tylko ustala adres IP serwera.
rel="canonical"	główny adres strony	Wskazuje wyszukiwarkom podstawowy adres strony, gdy ta sama treść jest dostępna pod kilkoma adresami, na przykład z parametrami `?utm_source=…` albo z ukośnikiem na końcu i bez niego. Podaj pełny adres. Wyszukiwarka potraktuje go jako mocną wskazówkę, a nie bezwzględne polecenie.
rel="alternate"	inna wersja strony, np. z `hreflang`	Wskazuje alternatywną wersję tej samej treści: w innym języku (z atrybutem `hreflang`) albo w innym formacie, np. kanał RSS (z atrybutem `type`). Wartość `hreflang="x-default"` oznacza wersję domyślną dla osób, których języka nie obsługujesz osobno.
crossorigin	anonymous \| use-credentials	Pobiera zasób w trybie CORS. `anonymous` (albo sam atrybut bez wartości) nie wysyła ciasteczek do innych domen, `use-credentials` je wysyła. Jest potrzebny przy fontach, przy `integrity` dla plików z innych domen i przy `preconnect` do serwerów, z których pobierasz fonty.
integrity	skrót kryptograficzny, np. `sha384-…`	Zabezpieczenie plików z zewnętrznych serwerów, np. z CDN (Subresource Integrity). Podajesz skrót pliku, a przeglądarka po pobraniu sprawdza, czy się zgadza. Jeśli ktoś podmieni plik na serwerze, przeglądarka go odrzuci. Przy plikach z innej domeny dodaj też `crossorigin="anonymous"`.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

rel="stylesheet"

arkusz stylów CSS

Dołącza zewnętrzny plik CSS. To najpopularniejszy sposób stylowania stron: jeden plik obsługuje wszystkie podstrony, a przeglądarka po pierwszym pobraniu trzyma go w pamięci podręcznej. Atrybutu type="text/css" nie trzeba dopisywać.

HTML

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

media

zapytanie o media

Stosuje arkusz tylko wtedy, gdy warunek jest spełniony, na przykład przy drukowaniu (print) albo w trybie ciemnym. Plik, którego warunek nie jest spełniony, przeglądarka i tak pobiera, ale z niższym priorytetem i bez wstrzymywania wyświetlania strony.

HTML

<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/print.css" media="print">
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)">

rel="icon"

ikona strony (favicon)

Ikona widoczna na karcie przeglądarki i w zakładkach. Atrybut sizes podaje wymiary (np. 32x32), a type format pliku. Popularny zestaw to plik .ico dla starszych programów, ikona SVG, która skaluje się bez utraty jakości, apple-touch-icon (180 × 180 px) dla ekranu głównego w iOS i manifest aplikacji z ikonami dla Androida.

HTML

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

rel="preload"

wczesne pobranie zasobu, razem z `as`

Każe pobrać zasób od razu, zanim przeglądarka sama by go odkryła, na przykład font ukryty głęboko w pliku CSS albo główny obraz strony. Atrybut as (font, image, style, script, fetch) jest obowiązkowy i mówi, czym jest zasób. Fonty wymagają też atrybutu crossorigin, nawet gdy pochodzą z własnego serwera.

HTML

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/hero.webp" as="image">

rel="preconnect"

wczesne połączenie z innym serwerem

Nawiązuje połączenie z serwerem, z którego za chwilę pobierzesz zasoby, np. z serwisem fontów. Przeglądarka wcześniej załatwia wyszukanie adresu, połączenie i szyfrowanie, więc sam plik przychodzi szybciej. Lżejsza wersja, dns-prefetch, tylko ustala adres IP serwera.

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

rel="canonical"

główny adres strony

Wskazuje wyszukiwarkom podstawowy adres strony, gdy ta sama treść jest dostępna pod kilkoma adresami, na przykład z parametrami ?utm_source=… albo z ukośnikiem na końcu i bez niego. Podaj pełny adres. Wyszukiwarka potraktuje go jako mocną wskazówkę, a nie bezwzględne polecenie.

HTML

<link rel="canonical" href="https://www.codeworlds.com/kurs-html-css">

rel="alternate"

inna wersja strony, np. z `hreflang`

Wskazuje alternatywną wersję tej samej treści: w innym języku (z atrybutem hreflang) albo w innym formacie, np. kanał RSS (z atrybutem type). Wartość hreflang="x-default" oznacza wersję domyślną dla osób, których języka nie obsługujesz osobno.

HTML

<link rel="alternate" hreflang="pl" href="https://www.codeworlds.com/kurs-html">
<link rel="alternate" hreflang="en" href="https://www.codeworlds.com/en/html-course">
<link rel="alternate" hreflang="x-default" href="https://www.codeworlds.com/en/html-course">
<link rel="alternate" type="application/rss+xml" title="Blog CodeWorlds" href="/blog/rss.xml">

integrity

skrót kryptograficzny, np. `sha384-…`

Zabezpieczenie plików z zewnętrznych serwerów, np. z CDN (Subresource Integrity). Podajesz skrót pliku, a przeglądarka po pobraniu sprawdza, czy się zgadza. Jeśli ktoś podmieni plik na serwerze, przeglądarka go odrzuci. Przy plikach z innej domeny dodaj też crossorigin="anonymous".

HTML

<link
  rel="stylesheet"
  href="https://cdn.example.com/reset.min.css"
  integrity="sha384-WDMDqPkpoQaPl6uhHNxkwhv3yB5Ae46EbjyRWmKdfWPSXPigfz2MdYGomGZE9FBE"
  crossorigin="anonymous"
>

Domyślny CSS

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

CSS

link {
  display: none;
}

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Pliki CSS dołączaj przez <link> w nagłówku, a nie przez @import w innym pliku CSS. @import pobiera arkusze jeden po drugim i spowalnia start strony.
Nie przesadzaj z preload. Wczesne pobieranie wielu plików zabiera łącze temu, co naprawdę pilne, a za nieużyty zasób przeglądarka wyświetli ostrzeżenie w konsoli.
<link> nie tworzy klikalnego odnośnika. Do tego służy element <a>.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs