--- title: slug: Web/HTML/Element/link tags: - Element - HTML - HTML document metadata - Reference - Web - metadata translation_of: Web/HTML/Element/link ---

{{HTMLRef}}

L'element HTML <link> especifica les relacions entre el document actual i un recurs extern. Els possibles usos d'aquest element inclouen la definició d'un marc relacional per a la navegació. Aquest element és el més utilitzat per vincular els fulls d'estil.

El {{htmlattrxref ("rel", "link")}} es pot establir a una gran quantitat de diferents valors. S'enumeren en una pàgina separada.

Categories de contingut Contingut metadata. Si {{htmlattrxref("itemprop", "link")}} està present: Contingut dinàmic i phrasing content
Contingut permès Cap, és un {{Glossary("empty element")}}.
Omissió de l'etiqueta Ja que és un element buit, l'etiqueta d'inici ha d'estar present i l'etiqueta final no ha d'estar present
Elements pares permesos Qualsevol element que accepti elements metadata. Si {{htmlattrxref("itemprop", "link")}} està present: qualsevol element que accepti phrasing content.
Interfície DOM {{domxref("HTMLLinkElement")}}

Atributs

Aquest element inclou els atributs global.

{{htmlattrdef("charset")}}{{obsolete_inline}}
Aquest atribut defineix la codificació de caràcters del recurs vinculat. El valor és una llista d'espai i/o separada per comes dels jocs de caràcters tal com es defineix en el {{rfc(2045)}}. El valor per defecte és ISO-8859-1.
Nota d'ùs: Aquest atribut és obsolet i no ha de ser utilitzat pels autors. Per aconseguir el seu efecte, utilitzar la capçalera HTTP Content-Type en el recurs vinculat.
{{htmlattrdef("crossorigin")}}
Aquest atribut enumerat indica si CORS s'ha d'utilitzar en recuperar la imatge relacionada. Les imatges habilitades per CORS poden ser reutilitzades en l'element {{HTMLElement("canvas")}} sense ser contaminades. Els valors permesos són:
"anonymous"
Una sol·licitud d'origen creuat (és a dir, amb Origin: capçalera HTTP) es porta a terme. Però no s'envia credencials (és a dir, no hi ha cap galeta, no hi ha cap certificat X.509 i no s'envia l'autenticació HTTP bàsica). Si el servidor no dóna credencials al lloc d'origen (si no s'estableix Access-Control-Allow-Origin : capçalera HTTP) la imatge serà contaminada i el seu ús restringit.
"use-credentials"
Una sol·licitud d'origen creuat (és a dir, amb Origin: capçalera HTTP) es realitza amb la credencial enviada (és a dir, una galeta, un certificat i es porta a terme l'autenticacióHTTP bàsica). Si el servidor no dóna credencials al lloc d'origen (a través Access-Control-Allow-Credencials: capçalera HTTP), la imatge serà contaminada i el seu ús restringit.
Quan no està present, el recurs es recupera sense una sol·licitud CORS (és a dir, sense necessitat d'enviar l'Origin: capçalera HTTP), impedint la seva contaminació utilitzada en els elements {{HTMLElement('canvas')}} . Si no és vàlid, es maneja com si s'usés la paraula clau enumerada anonymous. Consulteu els atributs de configuració de CORS per obtenir informació addicional.
{{htmlattrdef("disabled")}} {{Non-standard_inline}}
Aquest atribut s'utilitza per deshabilitar una relació d'enllaços. En conjunció amb scripts, aquest atribut podria ser utilitzat per activar i desactivar diverses relacions de fulles d'estil.

Nota: Si bé no hi ha cap atribut disabled en l'estàndard HTML, hi ha un atribut disabled en l'objecte DOM HTMLLinkElement .

L'ús de disabled com un atribut HTML no és estàndard i només és utilitzat per alguns navegadors (W3 #27677). No ho feu servir. Per aconseguir un efecte similar, utilitzeu una de les següents tècniques:

  • Si l'atribut disabled s'ha afegit directament a l'element de la pàgina, no no inclogueu l'element {{HTMLElement ("link")}} en el seu lloc;
  • Establir la propietat disabled de l'objecte DOM stylesheet a través de scripts.
{{htmlattrdef("href")}}
Aquest atribut especifica el {{glossary("URL")}} del recurs vinculat. Un URL pot ser absoluta o relativa.
{{htmlattrdef("hreflang")}}
Aquest atribut indica l'idioma del recurs vinculat. És merament consultiu. Els valors permesos són determinats per BCP47. Utilitzeu aquest atribut només si el atribut {{htmlattrxref ("href", "a")}} és present.
{{htmlattrdef("integrity")}} {{experimental_inline}}
Conté metadades en línia, un hash criptogràfic codificat en base 64 d'un recurs (file) que li diu al navegador que ho ha d'obtenir, per a què un agent d'usuari el pugui utilitzar per verificar que el recurs obtingut ha estat entregat lliure de manipulacións inesperades. Veure Integritat de Sub-recursos.
{{htmlattrdef("media")}}
Aquest atribut especifica els mitjans als quals s'aplica el recurs vinculat. El seu valor ha de ser una consulta de mitjans. Aquest atribut és útil principalment quan s'enllaça a fulls d'estil externs en permetre que l'agent d'usuari triï el millor adaptat per al dispositiu en el qual s'executa.
Nota d'ù:
  • En HTML 4, això només pot ser una simple llista separada per espais en blanc de la descripció de mitjans literals, és a dir, els tipus de mitjans i grups, on es defineixen i permeten valors per a aquest atribut, com ara print, screen, aural, braille. HTML5 va estendre això a qualsevol tipus de consultes de mitjans (media queries), que són un superconjunto dels valors permesos d'HTML 4.
  • Els navegadors que no suporten el Consultes de mitjans (Media Queries) CSS3  no reconeixeran necessàriament l'enllaç adequat; No oblidi establir enllaços alternatius, el conjunt restringit de consultes de mitjans definides en HTML 4.
{{htmlattrdef("methods")}} {{Non-standard_inline}}
El valor d'aquest atribut proporciona informació sobre les funcions que poden ser realitzades en un objecte. Els valors es donen generalment pel protocol HTTP quan s'utilitza, però podria (per les mateixes raons que l'atribut title) ser útil incloure informació d'assessorament per avançat a l'enllaç. Per exemple, el navegador pot triar un altre tipus de processament d'un enllaç en funció dels mètodes especificats; alguna cosa que sigui consultable podria obtenir una icona diferent, o un enllaç extern podria representar-se amb una indicació d'abandonar el lloc actual. Aquest atribut no és ben comprès ni recolzat, fins i tot per la definició del navegador, Internet Explorer 4. Vegeu els mètodes de la propietat (MSDN).
{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
Una cadena que indica quina referència utilitzar en recuperar el recurs::
{{htmlattrdef("rel")}}
Aquest atribut nomena una relació del document vinculat al document actual. L'atribut ha de ser una llista separada per espais dels valors dels tipus d'enllaços. L'ús més comú d'aquest atribut és especificar un enllaç a un full d'estils extern: l'atribut rel s'estableix en fulls d'estil, i l'atribut href s'estableix en l'adreça URL d'un full d'estils extern per donar format a la pàgina. WebTV també és compatible amb l'ús del valor pròxim a rel per carregar prèviament la pàgina següent en una sèrie de documents.
{{htmlattrdef("rev")}}{{obsolete_inline}}
El valor d'aquest atribut mostra la relació del document actual en el document vinculat, definit per l'atribut {{htmlattrxref ("href", "link")}} . Així doncs, l'atribut defineix la relació inversa en comparació amb el valor de l'atribut rel. Els valors dels tipus d'enllaç per a l'atribut són similars als possibles valors per {{htmlattrxref ("rel", "link")}}.
Nota d'ùs: Aquest atribut és obsolet en HTML5. No ho feu servir. Per aconseguir el seu efecte, utilitzar l'atribut {{htmlattrxref ("rel", "link")}}  amb els valors dels tipus d'enllaç oposats, per exemple, made ha de ser reemplaçat per author. També aquest atribut no vol dir revisió i no ha de ser utilitzat amb un nombre de versió, que és per desgràcia el cas en nombrosos llocs.
{{htmlattrdef("sizes")}}
Aquest atribut defineix la mida de les icones per els mitjans visuals continguts en el recurs. Ha d'estar present només si el {{htmlattrxref ("rel", "link")}} conté el icon valor de tipus d'enllaç. Pot tenir els següents valors:
Nota d'ùs:
  • La majoria de format d'icones només són capaços d'emmagatzemar un sol icona; Per tant, la majoria de les vegades el {{htmlattrxref("sizes")}} conté una sola entrada. El format ICO de MS, així com ICNS d'Apple. Sent ICO el més estès, és el que teniu què utilitzar.
  • El Apple's iOS no admet aquest atribut, per tant, Apple's iPhone i iPad utilitzen valors de tipus d'enllaç especials i no estàndard per definir la icona que s'utilitzarà com a element de clip Web o d'inici:  apple-touch-icon and apple-touch-startup-icon.
{{htmlattrdef("target")}}{{Non-standard_inline}}
Defineix el nom de marc o finestra que té la relació d'enllaç definida o que mostrarà la representació de qualsevol recurs vinculat.
{{htmlattrdef("title")}}
L'atribut title té una semàntica especial en l'element <link>. Quan s'utilitza en un <link rel="stylesheet"> defineix una fulla d'estil preferida o alternativa. Si ho utilitza incorrectament, pot fer que s'ignori la fulla d'estils.
{{htmlattrdef("type")}}
Aquest atribut s'utilitza per definir el tipus de contingut vinculat. El valor de l'atribut ha de ser un tipus MIME com ara text/html, text/css, i així successivament. L'ús comú d'aquest atribut és definir el tipus de fulla d'estils vinculada i el valor actual més comú és text/css, el que indica un format de full d'estil en cascada.

Exemples

Inclusió d'un full d'estil

Per incloure un full d'estil en una pàgina, utilitzeu la següent sintaxi:

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

Proporcionar fulls d'estil alternatius

També podeu especificar fulls d'estil alternatius.

L'usuari pot triar la fulla d'estil que desitja usar seleccionant-la en el menú Veure>Estil de pàgina. Això proporciona un mètode perquè els usuaris puguin veure diverses versions d'una pàgina.

<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

Esdeveniments de càrrega de fulls d'estil

Es pot determinar quan un s'ha carregat un full d'estil en observar el disparo d'un esdeveniment load; De la mateixa manera, es pot detectar si s'ha produït un error en processar un full d'estil en observar un esdeveniment error:

<script>
function sheetLoaded() {
  // Do something interesting; the sheet has been loaded
}

function sheetError() {
  alert("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">

Nota: L'esdeveniment load es desencadena una vegada que el full d'estil i tot el seu contingut importat ha estat carregat i analitzat, i immediatament abans què els estils comencin a ser aplicats en els continguts.

Notes

Especificacions

Especificació Estat Comentari
{{SpecName('Subresource Integrity', '#htmlscriptelement', '<script>')}} {{Spec2('Subresource Integrity')}} Afegeix l'atribut integrity.
{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '<link>')}} {{Spec2('HTML WHATWG')}}

No hi ha canvis des de l'última presentació
{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '<link>')}} {{Spec2('HTML5 W3C')}} Afegeix els atributs crossorigin i sizes ; Els valors estesos de mitjans per a qualsevol consulta de mitjans; afegeix nombrosos nous valors per rel.
{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '<link>')}} {{Spec2('HTML4.01')}}  
{{CompatibilityTable}}
Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1.0 {{CompatGeckoDesktop("1.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Alternative stylesheets {{CompatUnknown}} {{CompatGeckoDesktop("1.9")}} {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}}
disabled atribut {{Non-standard_inline}} {{CompatNo}} {{CompatNo}} {{CompatVersionUnknown}} {{CompatNo}} {{CompatNo}}
methods atribute {{Non-standard_inline}} {{CompatNo}} {{CompatNo}} 4.0 {{CompatNo}} {{CompatNo}}
atribut sizes {{CompatNo}} {{CompatNo}} {{bug("441770")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
load and error events

19 (Webkit: 535.23)

({{webkitbug(38995)}})

 {{CompatGeckoDesktop("9.0")}} {{CompatUnknown}} 11.60 {{CompatUnknown}}
atribut crossorigin {{CompatChrome("25")}} {{CompatGeckoDesktop("18.0")}} {{CompatUnknown}} {{CompatOpera("15")}} {{CompatUnknown}}
atribut integrity {{CompatChrome(45.0)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatNo}}[1]
atribut referrerpolicy {{CompatUnknown}} {{CompatGeckoDesktop("50.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Característica Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Suport bàsic {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoMobile("1.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Alternative stylesheets {{CompatUnknown}} {{CompatUnknown}} {{CompatGeckoMobile("2.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
disabled atribut {{Non-standard_inline}} {{CompatNo}} {{CompatUnknown}} {{CompatNo}} {{CompatUnknown}} {{CompatNo}} {{CompatNo}} {{CompatUnknown}}
methods atribut {{Non-standard_inline}} {{CompatNo}} {{CompatUnknown}} {{CompatNo}} 4.0 {{CompatNo}} {{CompatNo}} {{CompatUnknown}}
atribut sizes {{CompatNo}} {{CompatUnknown}} {{CompatNo}} {{bug("441770")}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatUnknown}}
load and error events {{CompatUnknown}} {{CompatUnknown}} {{CompatGeckoMobile("9.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
atribut crossorigin {{CompatUnknown}} {{CompatUnknown}} {{CompatGeckoMobile("18.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
atribut integrity {{CompatNo}} {{CompatChrome(45.0)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatChrome(45.0)}}
atribut referrerpolicy {{CompatUnknown}} {{CompatUnknown}} {{CompatGeckoMobile("50.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}  

[1] {{WebKitBug(148363)}} tracks WebKit implementation of Subresource Integrity (which includes the integrity attribute).

Veure