--- title: ': Element Łącza Zasobów Zewnętrznych' slug: Web/HTML/Element/link tags: - Element - HTML - HTML metadane dokumentu - Link - Reference - Web - Web Performance - metadane translation_of: Web/HTML/Element/link ---

Element Łącza Zasobów Zewnętrznych (<link>) określa relacje między aktualnym dokumentem a zewnętrznym zasobem. Ten element jest najczęściej używany do linkowania do {{Glossary("CSS", "arkuszy stylów")}}, ale jest również używany między innymi do tworzenia ikon strony (zarówno ikony typu "favicon", jak i ikon dla ekranu głównego i aplikacji na urządzeniach mobilnych).

Aby połączyć zewnętrzny arkusz stylów, umieść element <link> wewnątrz swojego {{HTMLElement("head")}} w ten sposób:

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

Ten prosty przykład podaje ścieżkę do arkusza stylów wewnątrz atrybutu href oraz atrybut rel z wartością stylesheet. rel oznacza "relację" i jest prawdopodobnie jedną z kluczowych cech elementu <link> - wartość oznacza sposób, w jaki element, z którym jest powiązany, jest powiązany z dokumentem źródłowym. Jak zobaczysz z naszego odwołania do typów odnośników, istnieje wiele różnych rodzajów relacji.

Jest wiele innych popularnych typów, na które można się natknąć. Na przykład link do favicon na stronie:

<link rel="icon" href="favicon.ico">

Istnieje szereg innych wartości rel ikon, używanych głównie do wskazywania specjalnych typów ikon do wykorzystania na różnych platformach mobilnych, np.:

<link rel="apple-touch-icon-precomposed" sizes="114x114"
      href="apple-icon-114.png" type="image/png">

Atrybut sizes oznacza rozmiar ikony, a type zawiera typ MIME łączonego zasobu. Dostarczają one użytecznych wskazówek, które pozwalają przeglądarce na wybór najbardziej odpowiedniej dostępnej ikony.

Możesz również podać typ nośnika lub zapytanie wewnątrz atrybutu media; zasób ten zostanie załadowany tylko wtedy, gdy stan nośnika jest prawdziwy. Na przykład:

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

Do elementu <link> dodano również kilka interesujących nowych funkcji wydajności i zabezpieczeń. Weźmy ten przykład:

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

Wartość rel dla preload wskazuje, że przeglądarka powinna wstępnie załadować ten zasób (więcej szczegółów w sekcji Wstępne załadowanie zawartości z rel="preload"), z atrybutem as wskazującym konkretną klasę pobieranej zawartości. Atrybut crossorigin wskazuje, czy zasób powinien być pobierany z żądaniem {{Glossary("CORS")}}.

Pozostałe uwagi dotyczące zastosowania:

Element <link> może występować w elemencie {{HTMLElement("head")}} lub {{HTMLElement("body")}}, w zależności od tego, czy ma on typ połączenia, który jest body-ok. Na przykład, typ linku stylesheet jest body-ok, a zatem <link rel="stylesheet"> jest dozwolony w body. Jednakże nie jest to dobra praktyka do naśladowania; bardziej sensowne jest oddzielenie elementów <link> od zawartości, umieszczając je w <head>.
Kiedy używasz <link> do utworzenia favicon dla witryny, a Twoja strona używa Content Security Policy (CSP) w celu zwiększenia jej bezpieczeństwa, polityka ta ma zastosowanie do favicon. Jeśli napotkasz problemy z załadowaniem favicon, sprawdź, czy dyrektywa dyrektywa img-src nagłówka {{HTTPHeader("Content-Security-Policy")}} nie uniemożliwia dostępu do niego.
Specyfikacje HTML i XHTML definiują obsługę zdarzeń dla elementu <link>, ale nie jest jasne, jak miałyby być one wykorzystywane.
W XHTML 1.0 puste elementy, takie jak <link> wymagają ukośnika: <link />.
WebTV wspiera użycie wartości next dla atrybutu rel, w celu wstępnego załadowania następnej strony w serii dokumentów.

Atrybuty

Ten element uwzględnia atrybuty globalne.

{{HTMLAttrDef("as")}}

Ten atrybut jest używany tylko wtedy, gdy na elemencie <link> ustawiono rel="preload" lub rel="prefetch". Określa on typ zawartości załadowanej przez <link>, który jest niezbędny do dopasowania żądania, zastosowania poprawnej polityki bezpieczeństwa zawartości, oraz ustawienie poprawnego żądania nagłówka {{HTTPHeader("Accept")}}. Co więcej, rel="preload" wykorzystuje to jako sygnał do nadania priorytetu żądaniu. Poniższa tabela zawiera ważne wartości dla tego atrybutu oraz elementy lub zasoby, do których się odnoszą.

Wartość	Dotyczy
audio	elementów `<audio>`
document	elementów `<iframe>` oraz `<frame>`
embed	elementów `<embed>`
fetch	fetch, XHR Ta wartość wymaga również, aby `<link>` zawierał atrybut crossorigin.
font	CSS @font-face
image	elementy `<img>` oraz `<picture>` z atrybutami srcset lub imageset, elementy SVG `<image>`, reguły CSS `*-image`
object	elementy `<object>`
script	elementy `<script>`, Worker `importScripts`
style	elementy `<link rel=stylesheet>`, CSS `@import`
track	elementy `<track>`
video	elementy `<video>`
worker	Worker, SharedWorker

{{HTMLAttrDef("crossorigin")}}

Ten wymieniony atrybut wskazuje, czy przy pobieraniu zasobów należy zastosować {{Glossary("CORS")}}. Obrazy wyposażone w CORS mogą być ponownie użyte w elemencie {{HTMLElement("canvas")}} bez ich skażenia. Dozwolone są następujące wartości:

anonymous: Wykonywane jest żądanie krzyżowe (tj. z nagłówkiem HTTP {{HTTPHeader("Origin")}}) ale nie jest wysyłane żadne poświadczenie (tj. nie jest wysyłany żaden plik cookie, certyfikat X.509 ani uwierzytelnienie HTTP Basic). Jeśli serwer nie przekaże danych uwierzytelniających do strony pochodzenia (nie ustawiając nagłówka HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}) zasób zostanie skażony, a jego wykorzystanie ograniczone.
use-credentials: Wykonywane jest żądanie krzyżowe (tj. z nagłówkiem HTTP Origin) wraz z przesłanym poświadczeniem (tj. cookie, certyfikat, i/lub uwierzytelnienie HTTP Basic). Jeśli serwer nie przekaże danych uwierzytelniających do strony pochodzenia (poprzez nagłówek HTTP {{HTTPHeader("Access-Control-Allow-Credentials")}}), zasób zostanie skażony, a jego wykorzystanie ograniczone.

Jeśli atrybut nie jest obecny, zasób jest pobierany bez żądania {{Glossary("CORS")}} (tj. bez wysyłania nagłówka HTTP Origin), co uniemożliwia jego bezpieczne użytkowanie. Jeśli jest nieprawidłowy, jest traktowany tak, jakby użyte zostało słowo kluczowe anonymous. Dodatkowe informacje znajdują się w części atrybuty ustawień CORS.

{{HTMLAttrDef("disabled")}}

Tylko w przypadku rel="stylesheet", atrybut logiczny disabled wskazuje, czy opisany arkusz stylów powinien zostać załadowany i zastosowany w dokumencie. Jeśli atrybut disabled jest określony w HTML podczas ładowania, arkusz stylów nie zostanie wczytany podczas ładowania strony. Zamiast tego arkusz stylów zostanie załadowany na żądanie, jeśli i kiedy atrybut disabled zostanie zmieniony na false lub usunięty.

Jednak po załadowaniu arkusza stylów zmiany wartości właściwości disabled nie mają już żadnego związku z wartością właściwości {{domxref("StyleSheet.disabled")}}. Zamiast tego zmiana wartości tej właściwości po prostu włącza i wyłącza formularz arkusza stylów zastosowany w dokumencie.

Różni się ona od wartości disabled właściwości StyleSheet; zmiana jej na true powoduje usunięcie arkusza stylów z listy {{domxref("document.styleSheets")}} i nie powoduje automatycznego przeładowania aruksza stylów po ponownym przełączeniu go na false.

{{HTMLAttrDef("href")}}

Ten atrybut określa adres {{glossary("URL")}} powiązanego zasobu. Adres URL może być bezwzględny lub względny.

{{HTMLAttrDef("hreflang")}}

Ten atrybut określa język powiązanego zasobu. Ma on charakter wyłącznie doradczy. Dozwolone wartości są określone przez BCP47. Tego atrybutu używa się tylko wtedy, gdy występuje atrybut {{HTMLAttrxRef("href", "a")}}.

{{HTMLAttrDef("importance")}} {{Experimental_Inline}}

Wskazuje na względne znaczenie zasobu. Piorytetowe podpowiedzi są delegowane za pomocą wartości:

auto: Oznacza brak preferencji. Przeglądarka może korzystać z własnej heurystyki, aby zdecydować o priorytecie zasobu.

high: Wskazuje przeglądarce, że zasób ma wysoki priorytet.

low: Wskazuje przeglądarce, że zasób ma niski priorytet.

Uwaga: Atrybut importance może być użyty dla elementu <link> tylko wtedy, gdy występuje rel="preload" lub rel="prefetch".

{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}

Zawiera liniowe metadane - kryptograficzny hash zasobów (plików), które każesz pobrać przeglądarce, zakodowany w base64. Przeglądarka może wykorzystać to do sprawdzenia, czy pobrany zasób został dostarczony bez nieoczekiwanych manipulacji. Zobacz rozdział Integralność Podzasobów.

{{HTMLAttrDef("media")}}

Ten atrybut określa media, do których odnoszą się powiązane zasoby. Jego wartość musi mieć typ media / żądania media. Atrybut ten jest przydatny głównie przy łączeniu z zewnętrznymi arkuszami stylów — pozwala on agentowi użytkownika wybrać ten najlepiej dostosowany do urządzenia, na którym działa.

Uwagi:

W HTML 4, może to być tylko prosta lista oddzielonych od siebie spacjami dosłownych opisów mediów, tj. typów i grup mediów, gdzie zdefiniowane i dozwolone są wartości tego atrybutu, takie jak print, screen, aural, braille. HTML5 rozszerzył to na wszelkiego rodzaju zapytania media, które są uzupełnieniem dozwolonych wartości HTML 4.
Przeglądarki nie obsługujące Żądań Media w CSS3 niekoniecznie rozpoznają odpowiedni link; nie należy zapominać o ustawieniu linków awaryjnych, ograniczonego zestawu zapytań media zdefiniowanych w HTML 4.

{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}

A string indicating which referrer to use when fetching the resource:

no-referrer means that the {{HTTPHeader("Referer")}} header will not be sent.
no-referrer-when-downgrade means that no {{HTTPHeader("Referer")}} header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.
origin means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.
origin-when-cross-origin means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.
unsafe-url means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.

{{HTMLAttrDef("rel")}}

This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of link type values.

{{HTMLAttrDef("sizes")}}

This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{HTMLAttrxRef("rel", "link")}} contains a value of icon or a non-standard type such as Apple's apple-touch-icon. It may have the following values:

any, meaning that the icon can be scaled to any size as it is in a vector format, like image/svg+xml.
a white-space separated list of sizes, each in the format <width in pixels>x<height in pixels> or <width in pixels>X<height in pixels>. Each of these sizes must be contained in the resource.

Note: Most icon formats are only able to store one single icon; therefore most of the time the {{HTMLAttrxRef("sizes")}} attribute contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions).

{{HTMLAttrDef("title")}}

The title attribute has special semantics on the <link> element. When used on a <link rel="stylesheet"> it defines a preferred or an alternate stylesheet. Incorrectly using it may cause the stylesheet to be ignored.

{{HTMLAttrDef("type")}}

This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as text/html, text/css, and so on. The common use of this attribute is to define the type of stylesheet being referenced (such as text/css), but given that CSS is the only stylesheet language used on the web, not only is it possible to omit the type attribute, but is actually now recommended practice. It is also used on rel="preload" link types, to make sure the browser only downloads file types that it supports.

Non-standard attributes

{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}: The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the title attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.
{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}: This attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. This allows the user agent to respond faster when the resource is requested in the future.
{{HTMLAttrDef("target")}} {{Non-standard_Inline}}: Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.

Obsolete attributes

{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}: This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in {{rfc(2045)}}. The default value is iso-8859-1.
Usage note: To produce the same effect as this obsolete attribute, use the {{HTTPHeader("Content-Type")}} HTTP header on the linked resource.
{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}: The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{HTMLAttrxRef("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the rel attribute. Link type values for the attribute are similar to the possible values for {{HTMLAttrxRef("rel", "link")}}.; Note: This attribute is considered obsolete by the WHATWG HTML living standard (which is the specification MDN treats as canonical). However, it's worth noting that rev is not considered obsolete in the W3C specification. That said, given the uncertainty, relying on rev is unwise.

Instead, you should use the {{HTMLAttrxRef("rel", "link")}} attribute with the opposite link type value. For example, to establish the reverse link for made, specify author. Also this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way.

charset: Ten atrybut określa zestaw znaków używanych przez linkowany dokument. Dozwolonymi wartościami dla tego atrybutu są nazwy zestawu znaków, takie jak EUC-JP, zdefiniowane w RFC 2045.

media: Ten atrybut określa docelowe medium dla jakiś linkowanych informacji o stylach, które określono, kiedy atrybut rel jest ustawiony na stylesheet. Wartością tego atrybutu może być być pojedyncze określenie medium, jak screen, lub lista rozdzielona przecinkami. Możliwymi wartościami tego atrybutu all, aural, braille, print, projection oraz screen. Mogą być również zdefiniowane inne wartości, zależnie od przeglądarki. Internet Explorer wspiera all, print oraz screen jako wartości tego atrybutu.

rel: Ten atrybut nazywa relacje między linkowanym dokumentem a dokumentem aktualnym. Możliwe wartości dla tego atrybutu zawierają alternate, bookmark, chapter, contents, copyright, glossary, help, index, next, prev, section, start, stylesheet oraz subsection. Najbardziej powszechnym użyciem tego atrybutu jest określanie linku do zewnętrznego arkusza stylów. Atrybut rel jest ustawiany na stylesheet, zaś atrybut href jest ustawiany na URL zewnętrznego arkusza stylów w celu formatowania strony. WebTV wspiera również użycie wartości next dla rel dla wstępnego załadowania następnej strony w serii dokumentów.

rev: Wartość atrybutu rev pokazuje relację aktualnego dokumentu do dokumentu linkowanego, zdefiniowanego przez atrybut href. Atrybut w ten sposób definiuje odwróconą relację w porównaniu do wartości atrybutu rel. Wartości dla atrybutu rev są podobne do możliwych wartości atrybutu rel. Mogą zawierać alternate, bookmark, chapter, contents, copyright, glossary, help, index, next, prev, section, start, stylesheet oraz subsection.

target: Wartość atrybutu target jest używana do definiowania nazwy ramki lub okna, które ma zdefiniowaną relację linkowania lub które pokaże wyświetlenie jakiegoś zlinkowanego zasobu.

type: Ten atrybut jest używany do definiowania typu zawartości, do której prowadzi link. Wartość tego atrybutu powinna być typem MIME takim jak text/html, text/css i tak dalej. Powszechnym użyciem tego atrybutu jest definiowanie zlinkowanego arkusza stylów i najbardziej powszechną obecnie wartością jest text/css, która wskazuje format Kaskadowych Arkuszy Stylów.

Przykłady

Łączenie z arkuszem stylów

Aby dołączyć arkusz stylów do strony, użyj następującej składni:

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

Dostarczanie alternatywnych arkuszy stylów

Można również określić alternatywne arkusze stylów.

Użytkownik może wybrać, który arkusz stylów ma być użyty, wybierając go z menu Widok > Styl strony. Dzięki temu użytkownik może zobaczyć wiele wersji strony.

<link href="default.css" rel="stylesheet" title="Domyślny Styl">
<link href="fancy.css" rel="alternate stylesheet" title="Efektowny">
<link href="basic.css" rel="alternate stylesheet" title="Podstawowy">

Dostarczanie ikon dla różnych zastosowań

Możesz umieścić linki do kilku różnych ikon na tej samej stronie, a przeglądarka wybierze, która z nich najlepiej pasuje do danego kontekstu, używając jako podpowiedzi wartości rel oraz sizes.

<!-- iPad trzeciej generacji z wyświetlaczem Retina wysokiej rozdzielczości: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png">
<!-- iPhone z wyświetlaczem Retina wysokiej rozdzielczości: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<!-- iPad pierwszej i drugiej generacji: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">
<!-- urządzenia iPhone bez wyświetlacza Retina, iPod Touch i Android 2.1+: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png">
<!-- podstawowy favicon -->
<link rel="icon" href="favicon32.png">

Warunkowe ładowanie zasobów z zapytaniami media

Możesz podać typ nośnika lub zapytanie wewnątrz atrybutu media; zasób ten zostanie załadowany tylko wtedy, gdy stan nośnika jest prawdziwy. Na przykład:

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="all">
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">

Zdarzenia z udziałem arkusza stylów

Można określić kiedy arkusz stylów został załadowany, obserwując, czy wystąpiło na nim zdarzenie load; podobnie, można wykryć, czy podczas przetwarzania arkusza stylów wystąpił błąd, obserwując, czy wystąpiło zdarzenie error:

<script>
var myStylesheet = document.querySelector('#my-stylesheet');

myStylesheet.onload = function() {
  // Zrób coś ciekawego; arkusz został załadowany
}

myStylesheet.onerror = function() {
  console.log("Wystąpił błąd podczas ładowania arkusza stylów!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet">

Uwaga: Zdarzenie load zostaje wywołane, gdy arkusz stylów i cała jego zaimportowana zawartość zostanie załadowana i przetworzona, a także bezpośrednio przed zastosowaniem stylów do zawartości.

Przykłady wstępnego ładowania

Możesz znaleźć szereg przykładów z <link rel="preload"> w sekcji Wstępne załadowanie zawartości z rel="preload".

Podsumowanie techniczne

Kategorie treści	Zawartość metadanych. Jeśli `itemprop` jest obecny: Zawartość przepływu i Zawartość frazowania.
Dozwolona zawartość	Brak, to jest {{Glossary("empty element", "pusty element")}}.
Pominięcie znacznika	Ponieważ jest to pusty element, znacznik otwierający musi być obecny, a znacznik zamykający nie może być obecny.
Dozwoleni rodzice	Każdy element, który akceptuje elementy metadanych. Jeśli itemprop jest obecny: każdy element, który akceptuje zawartość frazowania.
Dozwolone role ARIA	Brak
Interfejs DOM	{{DOMxRef("HTMLLinkElement")}}

Specyfikacje

Specyfikacja	Status	Komentarz
{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}}	{{Spec2("HTML WHATWG")}}	Brak zmian w stosunku do ostatniego wydania
{{SpecName("HTML5 W3C", "document-metadata.html#the-link-element", "<link>")}}	{{Spec2("HTML5 W3C")}}	Dodano atrybuty `corssorigin` oraz `sizes`; rozszerzono wartość `media` do dowolnych zapytań media; dodano wiele nowych wartości dla `rel`.
{{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}}	{{Spec2('HTML4.01')}}

Kompatybilność z przeglądarką

Zobacz także

Nagłówek HTTP {{HTTPHeader("Link")}}