Poznaj Programowanie

Tagi HTML: link

Piotr Grochal 6 min. czytania

<link> to jeden z fundamentalnych elementów HTML, który łączy dokument z zewnętrznymi zasobami, takimi jak arkusze stylów CSS, ikony strony czy alternatywne wersje treści.

Umieszczamy go zwykle w sekcji <head> i jest to element pusty (void), co oznacza, że nie posiada pary zamykającej i działa wyłącznie poprzez atrybuty.

W przeciwieństwie do tagu <a>, który tworzy klikalne hiperłącza w treści, <link> działa „w tle”, informując przeglądarkę o relacjach między dokumentem a innymi plikami lub zasobami. Jest kluczowy dla semantyki HTML5, wpływa na SEO, wydajność ładowania i responsywność.

Podstawowa struktura wygląda tak: <link rel="stylesheet" href="sciezka-do-pliku.css">. Najważniejsze atrybuty to:

  • rel – określa relację między dokumentem a zasobem (np. „stylesheet” dla CSS, „icon” dla favicon, „alternate” dla alternatywnej wersji);
  • href – adres URL zasobu (absolutny lub relatywny);
  • media – warunek medialny, np. dla urządzeń mobilnych;
  • type – typ MIME zasobu (np. „text/css”);
  • sizes – rozmiary ikony (dla favicon).

Te atrybuty pozwalają precyzyjnie sterować tym, jak i kiedy przeglądarka załaduje dany zasób.

1. Łączenie z arkuszami stylów CSS

Najpopularniejsze zastosowanie to podłączenie zewnętrznego pliku CSS do stylizacji strony. Oto prosty przykład:

<!DOCTYPE html>

<html lang="pl">

<head>

<meta charset="UTF-8">

<title>Moja strona</title>

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

</head>

<body>

<h1>Witaj na mojej stronie!</h1>

</body>

</html>

Tutaj plik style.css zawiera reguły stylów, np. h1 { color: blue; }. Załączenie CSS w <head> zapewnia spójny wygląd od pierwszego renderu.

Jeżeli chcesz stosować różne style dla różnych nośników, użyj atrybutu media:

<link rel="stylesheet" href="style.css" media="screen">

<link rel="stylesheet" href="print.css" media="print">

Pierwszy arkusz dotyczy ekranów, drugi — wydruku.

2. Ikony strony (favicon)

Tag <link> definiuje ikonę przeglądarki (favicon), która pojawia się m.in. w zakładkach. Przykładowa konfiguracja dla różnych formatów i rozmiarów:

<link rel="icon" href="favicon.ico" sizes="16x16 32x32" type="image/x-icon">

<link rel="apple-touch-icon" href="apple-icon.png" sizes="180x180">

<link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml">

Atrybut sizes pozwala wybrać optymalną ikonę w zależności od urządzenia.

3. Responsywne linki do wersji mobilnych

Możesz wskazać alternatywną wersję strony dla wąskich ekranów, używając rel="alternate" i media:

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/">

To przede wszystkim sygnał dla wyszukiwarek; przeglądarki zazwyczaj nie przełączają wersji automatycznie. W większości przypadków rekomendowane jest RWD (Responsive Web Design) w ramach jednej wersji serwisu.

4. Wstępne ładowanie zasobów dla lepszej wydajności

Wstępnie ładuj krytyczne zasoby (np. czcionki, kluczowe CSS), aby skrócić czas do wyświetlenia treści:

<link rel="preload" href="critical.css" as="style">

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

Pamiętaj: samo rel="preload" nie zastosuje stylów — nadal dodaj właściwy arkusz stylów, np. <link rel="stylesheet" href="critical.css">.

Zaawansowane przykłady i praktyczne scenariusze

Poniżej pokazano, jak połączyć reset CSS, główne style, ikony, wersję mobilną i preload:

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Blog o programowaniu</title>

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

<link rel="stylesheet" href="css/main.css" media="screen">

<link rel="icon" href="img/favicon.ico" sizes="32x32">

<link rel="alternate" media="only screen and (max-width: 768px)" href="mobile.html">

<link rel="preload" href="css/fonts.css" as="style">

</head>

Mapy obrazów z <map> i <area> — powiązane z linkami

Choć nie dotyczy bezpośrednio <link>, mapy obrazów pozwalają tworzyć klikalne obszary na grafice:

<img src="mapa.png" alt="Mapa" usemap="#mapa" width="200" height="100">

<map name="mapa" id="mapa">

<area shape="rect" coords="0,0,50,50" href="strona1.html" alt="Obszar 1">

<area shape="circle" coords="100,50,20" href="strona2.html" alt="Obszar 2">

</map>

Integracja z JavaScript i CSS

W aplikacjach SPA możesz dynamicznie dodać arkusz stylów przez JavaScript:

const link = document.createElement('link');

link.rel = 'stylesheet';

link.href = 'dynamic.css';

document.head.appendChild(link);

To proste podejście do leniwego ładowania CSS (lazy loading), które pomaga skrócić czas początkowego renderu.

Dla szybkiego porównania zobacz zestawienie najważniejszych różnic:

Aspekt <link> <a> (hiperłącze)
Lokalizacja zwykle w <head> (element pusty) w <body>, klikalny tekst/obraz
Główne użycie łączenie zasobów (CSS, favicon) nawigacja użytkownika
Atrybuty rel, href, media, type href, target, title
Widoczność niewidoczny dla użytkownika widoczny i interaktywny
Przykład <link rel="stylesheet" href="style.css"> <a href="strona.html">Kliknij</a>

<a> obsługuje m.in. target="_blank" (nowa karta) i protokół mailto:: <a href="mailto:[email protected]?subject=Temat">Wyślij email</a>.

Najlepsze praktyki i błędy do uniknięcia

Stosuj poniższe zasady, aby wykorzystać <link> efektywnie i bezpiecznie:

  • zawsze podawaj rel i href – bez tych atrybutów tag nie ma sensu;
  • grupuj odwołania w <head> – nie mieszaj ich z elementami w <body> bez uzasadnienia;
  • unikaj nadmiaru – zbyt wiele plików CSS/ikon spowalnia stronę; łącz i minifikuj zasoby (np. Webpack, Vite);
  • testuj media queries – skorzystaj z narzędzi deweloperskich przeglądarek, by symulować różne urządzenia;
  • SEO – użyj rel="canonical", aby zapobiec duplikacji treści: <link rel="canonical" href="https://example.com/">;
  • atrybut type – type="text/css" jest dziś domyślne i zwykle zbędne; dodawaj tylko, jeśli wymaga tego środowisko.