path: root/files/pl/web/html/element/link/index.html

---
title: '<link>: 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
---
<div>{{HTMLRef}}</div>

<p><strong>Element Łącza Zasobów Zewnętrznych (<code>&lt;link&gt;</code>)</strong> 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).</p>

<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div>

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>

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

<pre class="brush: html no-line-numbers">&lt;link href="main.css" rel="stylesheet"&gt;</pre>

<p>Ten prosty przykład podaje ścieżkę do arkusza stylów wewnątrz atrybutu <code>href</code> oraz atrybut <code>rel</code> z wartością <code>stylesheet</code>. <code>rel</code> oznacza "relację" i jest prawdopodobnie jedną z kluczowych cech elementu <code>&lt;link&gt;</code> - 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 <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTML/Link_types">typów odnośników</a>, istnieje wiele różnych rodzajów relacji.</p>

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

<pre class="brush: html no-line-numbers">&lt;link rel="icon" href="favicon.ico"&gt;</pre>

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

<pre class="brush: html no-line-numbers">&lt;link rel="apple-touch-icon-precomposed" sizes="114x114"
      href="apple-icon-114.png" type="image/png"&gt;</pre>

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

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

<pre class="brush: html no-line-numbers">&lt;link href="print.css" rel="stylesheet" media="print"&gt;
&lt;link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"&gt;</pre>

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

<pre class="brush: html no-line-numbers">&lt;link rel="preload" href="myFont.woff2" as="font"
      type="font/woff2" crossorigin="anonymous"&gt;</pre>

<p>Wartość <code>rel</code> dla <code>preload</code> wskazuje, że przeglądarka powinna wstępnie załadować ten zasób (więcej szczegółów w sekcji <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTML/Preloading_content">Wstępne załadowanie zawartości z rel="preload"</a>), z atrybutem <code>as</code> wskazującym konkretną klasę pobieranej zawartości. Atrybut crossorigin wskazuje, czy zasób powinien być pobierany z żądaniem {{Glossary("CORS")}}.</p>

<p>Pozostałe uwagi dotyczące zastosowania:</p>

<ul>
 <li>Element <code>&lt;link&gt;</code> może występować w elemencie {{HTMLElement("head")}} lub {{HTMLElement("body")}}, w zależności od tego, czy ma on <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">typ połączenia</a>, który jest <strong>body-ok</strong>. Na przykład, typ linku <code>stylesheet</code> jest body-ok, a zatem <code>&lt;link rel="stylesheet"&gt;</code> jest dozwolony w body. Jednakże nie jest to dobra praktyka do naśladowania; bardziej sensowne jest oddzielenie elementów <code>&lt;link&gt;</code> od zawartości, umieszczając je w <code>&lt;head&gt;</code>.</li>
 <li>Kiedy używasz <code>&lt;link&gt;</code> 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 <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTTP/Headers/Content-Security-Policy/img-src">dyrektywa <code>img-src</code></a> nagłówka {{HTTPHeader("Content-Security-Policy")}} nie uniemożliwia dostępu do niego.</li>
 <li>Specyfikacje HTML i XHTML definiują obsługę zdarzeń dla elementu <code>&lt;link&gt;</code>, ale nie jest jasne, jak miałyby być one wykorzystywane.</li>
 <li>W XHTML 1.0 puste elementy, takie jak <code>&lt;link&gt;</code> wymagają ukośnika: <code>&lt;link /&gt;</code>.</li>
 <li>WebTV wspiera użycie wartości <code>next</code> dla atrybutu <code>rel</code>, w celu wstępnego załadowania następnej strony w serii dokumentów.</li>
</ul>

<h2 id="Atrybuty">Atrybuty</h2>

<p>Ten element uwzględnia <a href="/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p>

<dl>
 <dt>{{HTMLAttrDef("as")}}</dt>
 <dd>Ten atrybut jest używany tylko wtedy, gdy na elemencie <code>&lt;link&gt;</code> ustawiono <code>rel="preload"</code> lub <code>rel="prefetch"</code>. Określa on typ zawartości załadowanej przez <code>&lt;link&gt;</code>, który jest niezbędny do dopasowania żądania, zastosowania poprawnej <a href="/pl/docs/Web/HTTP/CSP">polityki bezpieczeństwa zawartości</a>, oraz ustawienie poprawnego żądania nagłówka {{HTTPHeader("Accept")}}. Co więcej, <code>rel="preload"</code> 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ą.</dd>
 <dd>
 <table class="standard-table">
  <thead>
   <tr>
    <th scope="col">Wartość</th>
    <th scope="col">Dotyczy</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>audio</td>
    <td>elementów <code>&lt;audio&gt;</code></td>
   </tr>
   <tr>
    <td>document</td>
    <td>elementów <code>&lt;iframe&gt;</code> oraz <code>&lt;frame&gt;</code></td>
   </tr>
   <tr>
    <td>embed</td>
    <td>elementów <code>&lt;embed&gt;</code></td>
   </tr>
   <tr>
    <td>fetch</td>
    <td>
     <p>fetch, XHR</p>

     <div class="blockIndicator note">
     <p>Ta wartość wymaga również, aby <code>&lt;link&gt;</code> zawierał atrybut crossorigin.</p>
     </div>
    </td>
   </tr>
   <tr>
    <td>font</td>
    <td>CSS @font-face</td>
   </tr>
   <tr>
    <td>image</td>
    <td>elementy <code>&lt;img&gt;</code> oraz <code>&lt;picture&gt;</code> z atrybutami srcset lub imageset, elementy SVG <code>&lt;image&gt;</code>, reguły CSS <code>*-image</code></td>
   </tr>
   <tr>
    <td>object</td>
    <td>elementy <code>&lt;object&gt;</code></td>
   </tr>
   <tr>
    <td>script</td>
    <td>elementy <code>&lt;script&gt;</code>, Worker <code>importScripts</code></td>
   </tr>
   <tr>
    <td>style</td>
    <td>elementy <code>&lt;link rel=stylesheet&gt;</code>, CSS <code>@import</code></td>
   </tr>
   <tr>
    <td>track</td>
    <td>elementy <code>&lt;track&gt;</code></td>
   </tr>
   <tr>
    <td>video</td>
    <td>elementy <code>&lt;video&gt;</code></td>
   </tr>
   <tr>
    <td>worker</td>
    <td>Worker, SharedWorker</td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt>{{HTMLAttrDef("crossorigin")}}</dt>
 <dd>Ten wymieniony atrybut wskazuje, czy przy pobieraniu zasobów należy zastosować {{Glossary("CORS")}}. <a href="/pl/docs/Web/HTML/CORS_Enabled_Image">Obrazy wyposażone w CORS</a> mogą być ponownie użyte w elemencie {{HTMLElement("canvas")}} bez ich <em>skażenia</em>. Dozwolone są następujące wartości:
 <dl>
  <dt><code>anonymous</code></dt>
  <dd>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.</dd>
  <dt><code>use-credentials</code></dt>
  <dd>Wykonywane jest żądanie krzyżowe (tj. z nagłówkiem HTTP <code>Origin</code>) 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.</dd>
 </dl>
 Jeśli atrybut nie jest obecny, zasób jest pobierany bez żądania {{Glossary("CORS")}} (tj. bez wysyłania nagłówka HTTP <code>Origin</code>), co uniemożliwia jego bezpieczne użytkowanie. Jeśli jest nieprawidłowy, jest traktowany tak, jakby użyte zostało słowo kluczowe <strong>anonymous</strong>. Dodatkowe informacje znajdują się w części <a href="/pl/docs/Web/HTML/Attributes/crossorigin">atrybuty ustawień CORS</a>.</dd>
 <dt>{{HTMLAttrDef("disabled")}}</dt>
 <dd>
 <p>Tylko w przypadku <code>rel="stylesheet"</code>, atrybut logiczny <code>disabled</code> wskazuje, czy opisany arkusz stylów powinien zostać załadowany i zastosowany w dokumencie. Jeśli atrybut <code>disabled</code> 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 <code>disabled</code> zostanie zmieniony na <code>false</code> lub usunięty.</p>

 <p>Jednak po załadowaniu arkusza stylów zmiany wartości właściwości <code>disabled</code> 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.</p>

 <p>Różni się ona od wartości <code>disabled</code> właściwości <code>StyleSheet</code>; zmiana jej na <code>true</code> 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  <code>false</code>.</p>
 </dd>
 <dt>{{HTMLAttrDef("href")}}</dt>
 <dd>Ten atrybut określa adres {{glossary("URL")}} powiązanego zasobu. Adres URL może być bezwzględny lub względny.</dd>
 <dt>{{HTMLAttrDef("hreflang")}}</dt>
 <dd>Ten atrybut określa język powiązanego zasobu. Ma on charakter wyłącznie doradczy. Dozwolone wartości są określone przez <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Tego atrybutu używa się tylko wtedy, gdy występuje atrybut {{HTMLAttrxRef("href", "a")}}.</dd>
 <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt>
 <dd>Wskazuje na względne znaczenie zasobu. Piorytetowe podpowiedzi są delegowane za pomocą wartości:</dd>
 <dd>
 <p><strong><code>auto</code></strong>: Oznacza <strong>brak preferencji</strong>. Przeglądarka może korzystać z własnej heurystyki, aby zdecydować o priorytecie zasobu.</p>

 <p><strong><code>high</code></strong>: Wskazuje przeglądarce, że zasób ma <strong>wysoki</strong> priorytet.</p>

 <p><strong><code>low</code></strong>: Wskazuje przeglądarce, że zasób ma <strong>niski</strong> priorytet.</p>

 <div class="blockIndicator note">
 <p><strong>Uwaga: </strong>Atrybut <code>importance</code> może być użyty dla elementu <code>&lt;link&gt;</code> tylko wtedy, gdy występuje <code>rel="preload"</code> lub <code>rel="prefetch"</code>.</p>
 </div>
 </dd>
 <dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt>
 <dd>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ł <a href="/pl/docs/Web/Bezpiecze%C5%84stwo/Subresource_Integrity">Integralność Podzasobów</a>.</dd>
 <dt>{{HTMLAttrDef("media")}}</dt>
 <dd>Ten atrybut określa media, do których odnoszą się powiązane zasoby. Jego wartość musi mieć typ media / <a href="/pl/docs/Web/CSS/Media_Queries">żądania media</a>. 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.
 <div class="blockIndicator note">
 <p><strong>Uwagi:</strong></p>

 <ul>
  <li>W HTML 4, może to być tylko prosta lista oddzielonych od siebie spacjami dosłownych opisów mediów, tj. <a href="/pl/docs/Web/CSS/@media">typów i grup mediów</a>, gdzie zdefiniowane i dozwolone są wartości tego atrybutu, takie jak <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 rozszerzył to na wszelkiego rodzaju <a href="/pl/docs/Web/CSS/Media_Queries">zapytania media</a>, które są uzupełnieniem dozwolonych wartości HTML 4.</li>
  <li>Przeglądarki nie obsługujące <a href="/pl/docs/Web/CSS/Media_Queries">Żądań Media w CSS3</a> niekoniecznie rozpoznają odpowiedni link; nie należy zapominać o ustawieniu linków awaryjnych, ograniczonego zestawu zapytań media zdefiniowanych w HTML 4.</li>
 </ul>
 </div>
 </dd>
 <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt>
 <dd>A string indicating which referrer to use when fetching the resource:
 <ul>
  <li><code>no-referrer</code> means that the {{HTTPHeader("Referer")}} header will not be sent.</li>
  <li><code>no-referrer-when-downgrade</code> 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.</li>
  <li><code>origin</code> means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.</li>
  <li><code>origin-when-cross-origin</code> 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.</li>
  <li><code>unsafe-url</code> 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.</li>
 </ul>
 </dd>
 <dt>{{HTMLAttrDef("rel")}}</dt>
 <dd>This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of <a href="/en-US/docs/Web/HTML/Link_types">link type values</a>.</dd>
 <dt>{{HTMLAttrDef("sizes")}}</dt>
 <dd>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 <code>icon</code> or a non-standard type such as Apple's <code>apple-touch-icon</code>. It may have the following values:
 <ul>
  <li><code>any</code>, meaning that the icon can be scaled to any size as it is in a vector format, like <code>image/svg+xml</code>.</li>
  <li>a white-space separated list of sizes, each in the format <code><em>&lt;width in pixels&gt;</em>x<em>&lt;height in pixels&gt;</em></code> or <code><em>&lt;width in pixels&gt;</em>X<em>&lt;height in pixels&gt;</em></code>. Each of these sizes must be contained in the resource.</li>
 </ul>

 <div class="blockIndicator note">
 <p><strong>Note: </strong>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).</p>
 </div>
 </dd>
 <dt>{{HTMLAttrDef("title")}}</dt>
 <dd>The <code>title</code> attribute has special semantics on the <code>&lt;link&gt;</code> element. When used on a <code>&lt;link rel="stylesheet"&gt;</code> it defines a <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">preferred or an alternate stylesheet</a>. Incorrectly using it may <a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets">cause the stylesheet to be ignored</a>.</dd>
 <dt>{{HTMLAttrDef("type")}}</dt>
 <dd>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 <strong>text/html</strong>, <strong>text/css</strong>, and so on. The common use of this attribute is to define the type of stylesheet being referenced (such as <strong>text/css</strong>), but given that CSS is the only stylesheet language used on the web, not only is it possible to omit the <code>type</code> attribute, but is actually now recommended practice. It is also used on <code>rel="preload"</code> link types, to make sure the browser only downloads file types that it supports.</dd>
</dl>

<h3 id="Non-standard_attributes">Non-standard attributes</h3>

<dl>
 <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt>
 <dd>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 <strong>title</strong> 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.</dd>
 <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt>
 <dd>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.</dd>
 <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt>
 <dd>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd>
</dl>

<h3 id="Obsolete_attributes">Obsolete attributes</h3>

<dl>
 <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt>
 <dd>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 <code>iso-8859-1</code>.
 <div class="note"><strong>Usage note:</strong> To produce the same effect as this obsolete attribute, use the {{HTTPHeader("Content-Type")}} HTTP header on the linked resource.</div>
 </dd>
 <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt>
 <dd>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 <code>rel</code> attribute. <a href="/en-US/docs/Web/HTML/Link_types">Link type values</a> for the attribute are similar to the possible values for {{HTMLAttrxRef("rel", "link")}}.</dd>
 <dd>
 <div class="blockIndicator note">
 <p><strong>Note:</strong> 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 <code>rev</code> is <em>not</em> considered obsolete in the W3C specification. That said, given the uncertainty, relying on <code>rev</code> is unwise.</p>

 <p>Instead, you should use the {{HTMLAttrxRef("rel", "link")}} attribute with the opposite <a href="/en-US/docs/Web/HTML/Link_types">link type value</a>. For example, to establish the reverse link for <code>made</code>, specify <code>author</code>. 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.</p>
 </div>
 </dd>
</dl>

<dl>
 <dt>charset</dt>
 <dd>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 <a class="external" href="http://tools.ietf.org/html/rfc2045" title="http://tools.ietf.org/html/rfc2045">RFC 2045</a>.</dd>
</dl>

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

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

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

<dl>
 <dt>target</dt>
 <dd>Wartość atrybutu <code>target</code> 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.</dd>
</dl>

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

<h2 id="Przykłady">Przykłady</h2>

<h3 id="Łączenie_z_arkuszem_stylów">Łączenie z arkuszem stylów</h3>

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

<pre class="brush: html no-line-numbers">&lt;link href="style.css" rel="stylesheet"&gt;
</pre>

<h3 id="Dostarczanie_alternatywnych_arkuszy_stylów">Dostarczanie alternatywnych arkuszy stylów</h3>

<p>Można również określić <a href="/pl/docs/Web/CSS/Alternative_style_sheets">alternatywne arkusze stylów</a>.</p>

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

<pre class="brush: html no-line-numbers">&lt;link href="default.css" rel="stylesheet" title="Domyślny Styl"&gt;
&lt;link href="fancy.css" rel="alternate stylesheet" title="Efektowny"&gt;
&lt;link href="basic.css" rel="alternate stylesheet" title="Podstawowy"&gt;
</pre>

<h3 id="Dostarczanie_ikon_dla_różnych_zastosowań">Dostarczanie ikon dla różnych zastosowań</h3>

<p>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 <code>rel</code> oraz <code>sizes</code>.</p>

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

<h3 id="Warunkowe_ładowanie_zasobów_z_zapytaniami_media">Warunkowe ładowanie zasobów z zapytaniami media</h3>

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

<pre class="brush: html no-line-numbers">&lt;link href="print.css" rel="stylesheet" media="print"&gt;
&lt;link href="mobile.css" rel="stylesheet" media="all"&gt;
&lt;link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"&gt;
&lt;link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"&gt;
</pre>

<h3 id="Zdarzenia_z_udziałem_arkusza_stylów">Zdarzenia z udziałem arkusza stylów</h3>

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

<pre class="brush: html">&lt;script&gt;
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!");
}
&lt;/script&gt;

&lt;link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"&gt;
</pre>

<div class="blockIndicator note">
<p><strong>Uwaga:</strong> Zdarzenie <code>load</code> 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.</p>
</div>

<h3 id="Przykłady_wstępnego_ładowania">Przykłady wstępnego ładowania</h3>

<p>Możesz znaleźć szereg przykładów z <code>&lt;link rel="preload"&gt;</code> w sekcji <a href="/pl/docs/Web/HTML/Preloading_content">Wstępne załadowanie zawartości z <code>rel="preload"</code></a>.</p>

<h2 id="Podsumowanie_techniczne">Podsumowanie techniczne</h2>

<table class="properties">
 <tbody>
  <tr>
   <th><a href="/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th>
   <td>Zawartość metadanych. Jeśli <code><a href="/pl/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> jest obecny: <a href="/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Zawartość przepływu</a> i <a href="/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Zawartość frazowania</a>.</td>
  </tr>
  <tr>
   <th>Dozwolona zawartość</th>
   <td>Brak, to jest {{Glossary("empty element", "pusty element")}}.</td>
  </tr>
  <tr>
   <th>Pominięcie znacznika</th>
   <td>Ponieważ jest to pusty element, znacznik otwierający musi być obecny, a znacznik zamykający nie może być obecny.</td>
  </tr>
  <tr>
   <th>Dozwoleni rodzice</th>
   <td>Każdy element, który akceptuje elementy metadanych. Jeśli <a href="/pl/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> jest obecny: każdy element, który akceptuje <a href="/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">zawartość frazowania</a>.</td>
  </tr>
  <tr>
   <th scope="row">Dozwolone role ARIA</th>
   <td>Brak</td>
  </tr>
  <tr>
   <th>Interfejs DOM</th>
   <td>{{DOMxRef("HTMLLinkElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Specyfikacje">Specyfikacje</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specyfikacja</th>
   <th scope="col">Status</th>
   <th scope="col">Komentarz</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "&lt;link&gt;")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Brak zmian w stosunku do ostatniego wydania</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-element", "&lt;link&gt;")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td>Dodano atrybuty <code>corssorigin</code> oraz <code>sizes</code>; rozszerzono wartość <code>media</code> do dowolnych zapytań media; dodano wiele nowych wartości dla <code>rel</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "&lt;link&gt;")}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2>



<p>{{Compat("html.elements.link", 3)}}</p>

<h2 id="Zobacz_także">Zobacz także</h2>

<ul>
 <li>Nagłówek HTTP {{HTTPHeader("Link")}}</li>
</ul>