Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Naslag / Structuur van een pagina

Het element <link>

Het <link>-HTML-element specificeert relaties tussen het huidige document en een externe bron. Dit element wordt het meest gebruikt om te linken naar stylesheets, maar wordt onder andere ook gebruikt om siteiconen (zowel "favicon"-stijl-iconen als iconen voor het startscherm en apps op mobiele apparaten) in te stellen.

Auteur: Maarten Soetens

Code 
<link href="/shared-assets/misc/link-element-example.css" rel="stylesheet" />

<p>This text will be red as defined in the external stylesheet.</p>
<p style="color: blue">
  The <code>style</code> attribute can override it, though.
</p>
Resultaat in de browser

Attributen

Dit element bevat de globale attributen.

as

Dit attribuut is verplicht wanneer rel="preload" is ingesteld op het <link>-element, optioneel wanneer rel="modulepreload" is ingesteld, en mag verder niet worden gebruikt. Het geeft het type inhoud aan dat door de <link> wordt geladen, wat nodig is voor het matchen van verzoeken, de toepassing van het juiste content security policy, en het instellen van de juiste Accept-request-header.

Bovendien gebruikt rel="preload" dit als signaal voor de prioritering van verzoeken. De onderstaande tabel geeft de geldige waarden voor dit attribuut en de elementen of bronnen waarop ze van toepassing zijn.

As-waarde Rel-waarde Van toepassing op
audioworklet modulepreload AudioWorklet-modules
fetch preload

fetch, XHR

Opmerking: Deze waarde vereist ook dat <link> het crossorigin-attribuut bevat, zie CORS-enabled fetches.

font preload

CSS @font-face

Opmerking: Deze waarde vereist ook dat <link> het crossorigin-attribuut bevat, zie CORS-enabled fetches.

image preload <img>- en <picture>-elementen met srcset- of imageset-attributen, SVG-<image>-elementen, CSS-*-image-regels
json modulepreload Aanvullend JSON-bestand
paintworklet modulepreload PaintWorklet-modules
script preload or modulepreload <script>-elementen, Worker importScripts, en modulepreload-bestemmingen.
serviceworker modulepreload ServiceWorker-modules
sharedworker modulepreload SharedWorker
style preload or modulepreload <link rel=stylesheet>-elementen, CSS @import en modulepreload-bestemmingen.
text modulepreload Aanvullend platte-tekstbestand
track preload <track>-elementen (WebVTT, MIME-type text/vtt)
worker modulepreload Worker-modules

blocking

Dit attribuut geeft expliciet aan dat bepaalde bewerkingen geblokkeerd moeten worden totdat aan specifieke voorwaarden is voldaan. Het mag alleen worden gebruikt wanneer het rel-attribuut de sleutelwoorden expect of stylesheet bevat. Met rel="expect" geeft het aan dat bewerkingen geblokkeerd moeten worden totdat een specifieke DOM-node is geparseerd. Met rel="stylesheet" geeft het aan dat bewerkingen geblokkeerd moeten worden totdat een extern stylesheet en de kritieke subbronnen ervan zijn opgehaald en toegepast op het document. De bewerkingen die geblokkeerd moeten worden, moeten een door spaties gescheiden lijst zijn van de onderstaande blokkeringstokens. Momenteel is er slechts één token:

  • render: Het renderen van inhoud op het scherm wordt geblokkeerd.
Opmerking

Alleen link-elementen in de <head> van het document kunnen mogelijk het renderen blokkeren. Standaard blokkeert een link-element met rel="stylesheet" in de <head> het renderen zodra de browser het ontdekt tijdens het parseren. Als zo'n link-element dynamisch via een script wordt toegevoegd, moet je bovendien blocking = "render" instellen zodat het het renderen blokkeert.

crossorigin

Dit enumerated attribuut geeft aan of CORS gebruikt moet worden bij het ophalen van de bron. CORS-enabled images kunnen worden hergebruikt in het <canvas>-element zonder besmet (tainted) te raken. De toegestane waarden zijn:

  • anonymous
    • : Er wordt een cross-origin-verzoek uitgevoerd (d.w.z. met een Origin-HTTP-header), maar er wordt geen credential verzonden (d.w.z. geen cookie, X.509-certificaat, of HTTP Basic-authenticatie). Als de server geen credentials aan de origin-site verstrekt (door de Access-Control-Allow-Origin-HTTP-header niet in te stellen), wordt de bron besmet en is het gebruik ervan beperkt.
  • use-credentials
    • : Er wordt een cross-origin-verzoek uitgevoerd (d.w.z. met een Origin-HTTP-header), samen met een verzonden credential (d.w.z. een cookie, certificaat en/of HTTP Basic-authenticatie wordt uitgevoerd). Als de server geen credentials aan de origin-site verstrekt (via de Access-Control-Allow-Credentials-HTTP-header), wordt de bron besmet en is het gebruik ervan beperkt.

Als het attribuut niet aanwezig is, wordt de bron opgehaald zonder een CORS-verzoek (d.w.z. zonder het verzenden van de Origin-HTTP-header), waardoor niet-besmet gebruik ervan wordt voorkomen. Indien ongeldig, wordt het behandeld alsof het enumerated sleutelwoord anonymous is gebruikt. Zie CORS settings attributes voor aanvullende informatie.

disabled

Uitsluitend voor rel="stylesheet" geeft het Booleaanse attribuut disabled aan of het beschreven stylesheet moet worden geladen en toegepast op het document. Als disabled is opgegeven in de HTML op het moment dat deze wordt geladen, wordt het stylesheet niet geladen tijdens het laden van de pagina. In plaats daarvan wordt het stylesheet on-demand geladen, als en wanneer het disabled-attribuut wordt gewijzigd naar false of wordt verwijderd.

Het instellen van de disabled-eigenschap in de DOM zorgt ervoor dat het stylesheet wordt verwijderd uit de Document.styleSheets-lijst van het document.

fetchpriority

Geeft een hint over de relatieve prioriteit die gebruikt moet worden bij het ophalen van een bron van een bepaald type. Toegestane waarden:
  • high
    • : Haal de bron op met hoge prioriteit ten opzichte van andere bronnen van hetzelfde type.
  • low
    • : Haal de bron op met lage prioriteit ten opzichte van andere bronnen van hetzelfde type.
  • auto
    • : Stel geen voorkeur in voor de fetch-prioriteit. Dit is de standaardwaarde. Deze wordt gebruikt als er geen waarde of een ongeldige waarde is ingesteld.

href

Dit attribuut geeft de URL van de gekoppelde bron aan. Een URL kan absoluut of relatief zijn.

hreflang

Dit attribuut geeft de taal van de gekoppelde bron aan. Het is louter informatief. Waarden moeten geldige BCP 47-taaltags zijn. Gebruik dit attribuut alleen als het href-attribuut aanwezig is.

imagesizes

Uitsluitend voor rel="preload" en as="image" heeft het imagesizes-attribuut een vergelijkbare syntaxis en semantiek als het sizes-attribuut, dat aangeeft welke geschikte bron vooraf geladen moet worden voor gebruik door een img-element met overeenkomstige waarden voor de srcset- en sizes-attributen.

imagesrcset

Uitsluitend voor rel="preload" en as="image" heeft het imagesrcset-attribuut een vergelijkbare syntaxis en semantiek als het srcset-attribuut, dat aangeeft welke geschikte bron vooraf geladen moet worden voor gebruik door een img-element met overeenkomstige waarden voor de srcset- en sizes-attributen.

integrity

Dit attribuut bevat een of meer hashes van de bron. Het wordt gebruikt om te garanderen dat de inhoud van de bron overeenkomt met wat de ontwikkelaar verwacht, en niet is vervangen door een kwaadaardige kopie in een supply chain attack. Het attribuut mag alleen worden opgegeven wanneer het rel-attribuut is ingesteld op stylesheet, preload of modulepreload. Zie Subresource Integrity.

media

Dit attribuut geeft aan op welke media de gekoppelde bron van toepassing is. De waarde ervan moet een mediatype / media query zijn. Dit attribuut is vooral nuttig bij het koppelen naar externe stylesheets — het stelt de user agent in staat om het best passende stylesheet te kiezen voor het apparaat waarop het draait.

referrerpolicy

Een string die aangeeft welke referrer gebruikt moet worden bij het ophalen van de bron. Zie voor gedetailleerde uitleg en voorbeelden van elk beleid de documentatie van de Referrer-Policy-header.
  • no-referrer betekent dat de Referer-header niet wordt verzonden.
  • no-referrer-when-downgrade betekent dat er geen Referer-header wordt verzonden bij het navigeren naar een origin zonder TLS (HTTPS). Dit is het standaardgedrag van een user agent, als er verder geen beleid is opgegeven.
  • origin betekent dat de referrer de origin van de pagina zal zijn, wat ruwweg het schema, de host en de poort is.
  • origin-when-cross-origin betekent dat navigeren naar andere origins beperkt wordt tot het schema, de host en de poort, terwijl navigeren binnen dezelfde origin het pad van de referrer bevat.
  • same-origin betekent dat de referrer (origin, pad en querystring) wordt verzonden voor verzoeken binnen dezelfde origin, maar dat er geen referrer wordt verzonden voor cross-origin-verzoeken.
  • strict-origin betekent dat alleen de origin wordt verzonden wanneer het beveiligingsniveau van het protocol gelijk blijft (HTTPS→HTTPS). Er wordt geen referrer verzonden naar minder veilige bestemmingen (HTTPS→HTTP). Dit is belangrijk voor HTTPS-pagina's omdat het voorkomt dat referrer-informatie lekt naar onveilige origins.
  • strict-origin-when-cross-origin betekent dat de volledige referrer wordt verzonden voor verzoeken binnen dezelfde origin. Voor cross-origin-verzoeken wordt alleen de origin verzonden wanneer het protocol gelijk blijft (HTTPS→HTTPS), en wordt er geen referrer verzonden bij het downgraden naar HTTP. Dit is de standaardwaarde, die functionaliteit afweegt tegen privacy en beveiliging voor HTTPS-sites.
  • unsafe-url betekent dat de referrer de origin en het pad zal bevatten (maar niet het fragment, wachtwoord of de gebruikersnaam). Dit geval is onveilig omdat het origins en paden van TLS-beveiligde bronnen kan lekken naar onveilige origins.

rel

Dit attribuut geeft een relatie aan van het gekoppelde document met het huidige document. Het attribuut moet een door spaties gescheiden lijst van linktypewaarden zijn.

sizes

Dit attribuut definieert de afmetingen van de iconen voor visuele media die in de bron zijn opgenomen. Het mag alleen aanwezig zijn als rel een waarde van icon bevat, of een niet-standaard type zoals Apple's apple-touch-icon. Het kan de volgende waarden hebben:

  • any, wat betekent dat het icoon naar elke grootte kan worden geschaald omdat het in een vectorformaat is, zoals image/svg+xml.
  • een door witruimte gescheiden lijst van afmetingen, elk in het formaat <breedte in pixels>x<hoogte in pixels> of <breedte in pixels>X<hoogte in pixels>. Elk van deze afmetingen moet in de bron aanwezig zijn.
Opmerking

De meeste icoonformaten kunnen slechts één enkel icoon opslaan; daarom bevat het sizes-attribuut meestal slechts één item. Microsofts ICO-formaat en Apples ICNS-formaat kunnen meerdere icoongroottes in één bestand opslaan. ICO heeft betere browserondersteuning, dus je moet dit formaat gebruiken als cross-browser-ondersteuning belangrijk is.

title

Het title-attribuut heeft speciale semantiek op het <link>-element. Wanneer gebruikt op een <link rel="stylesheet"> definieert het een standaard- of alternatief stylesheet.

type

Dit attribuut wordt gebruikt om het type van de gekoppelde inhoud te definiëren. De waarde van het attribuut moet een MIME-type zijn, zoals text/html, text/css, enzovoort. Het gebruikelijke gebruik van dit attribuut is het definiëren van het type stylesheet waarnaar wordt verwezen (zoals text/css), maar aangezien CSS de enige stylesheettaal is die op het web wordt gebruikt, is het niet alleen mogelijk om het type-attribuut weg te laten, maar wordt dit tegenwoordig zelfs aanbevolen als praktijk. Het wordt ook gebruikt bij rel="preload"-linktypen, om ervoor te zorgen dat de browser alleen bestandstypen downloadt die het ondersteunt.

Niet-standaard attributen

target VerouderdDefinieert de naam van het frame of venster dat de gedefinieerde koppelingsrelatie heeft, of dat de weergave van een gekoppelde bron zal tonen.

Verouderde attributen

charset Verouderd

Dit attribuut definieert de tekencodering van de gekoppelde bron. De waarde is een door spaties en/of komma's gescheiden lijst van tekensets zoals gedefinieerd in RFC 2045. De standaardwaarde is iso-8859-1.

Opmerking

Om hetzelfde effect te bereiken als dit verouderde attribuut, gebruik je de Content-Type-HTTP-header op de gekoppelde bron.

rev Verouderd

De waarde van dit attribuut toont de relatie van het huidige document met het gekoppelde document, zoals gedefinieerd door het href-attribuut. Het attribuut definieert dus de omgekeerde relatie ten opzichte van de waarde van het rel-attribuut. Linktypewaarden voor het attribuut zijn vergelijkbaar met de mogelijke waarden voor rel.

Opmerking

In plaats van rev moet je het rel-attribuut gebruiken met de tegenovergestelde linktypewaarde. Om bijvoorbeeld de omgekeerde koppeling voor made in te stellen, geef je author op. Bovendien staat dit attribuut niet voor "revision" en mag het niet worden gebruikt met een versienummer, ook al misbruiken veel sites het op deze manier.

Voorbeelden

Een stylesheet opnemen

Om een stylesheet in een pagina op te nemen, gebruik je de volgende syntaxis:

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

Alternatieve stylesheets aanbieden

Je kunt ook alternatieve stylesheets opgeven.

De gebruiker kan kiezen welk stylesheet hij wil gebruiken door dit te kiezen uit het menu View > Page Style. Dit biedt gebruikers een manier om meerdere versies van een pagina te bekijken.

HTML
<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" />

Iconen aanbieden voor verschillende gebruikscontexten

Je kunt koppelingen naar meerdere iconen op dezelfde pagina opnemen, en de browser zal kiezen welk icoon het beste past bij zijn specifieke context, met behulp van de rel- en sizes-waarden als aanwijzingen.

HTML
<!-- iPad Pro with high-resolution Retina display: -->
<link
  rel="apple-touch-icon"
  sizes="167x167"
  href="/apple-touch-icon-167x167.png" />
<!-- 3x resolution iPhone: -->
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/apple-touch-icon-180x180.png" />
<!-- non-Retina iPad, iPad mini, etc.: -->
<link
  rel="apple-touch-icon"
  sizes="152x152"
  href="/apple-touch-icon-152x152.png" />
<!-- 2x resolution iPhone and other devices: -->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
<!-- basic favicon -->
<link rel="icon" href="/favicon.ico" />

Voor informatie over welke sizes je moet kiezen voor Apple-iconen, zie Apple's documentatie over het configureren van webtoepassingen en de aangehaalde Apple human interface guidelines. Meestal volstaat het om een grote afbeelding aan te bieden, zoals 192x192, en de browser deze naar beneden te laten schalen indien nodig, maar je wilt mogelijk afbeeldingen met verschillende niveaus van detail aanbieden voor verschillende groottes, zoals de Apple-ontwerprichtlijn aanbeveelt. Kleinere iconen voor lagere resoluties aanbieden bespaart ook bandbreedte.

Het is mogelijk niet nodig om <link>-elementen op te nemen. Browsers vragen bijvoorbeeld automatisch /favicon.ico op vanaf de root van een site, en Apple vraagt ook automatisch /apple-touch-icon-[size].png, /apple-touch-icon.png, enz. op. Het bieden van expliciete koppelingen beschermt je echter tegen wijzigingen in deze conventies.

Bronnen voorwaardelijk laden met media queries

Je kunt een mediatype of query opgeven in een media-attribuut; deze bron wordt dan alleen geladen als de mediaconditie waar is. Bijvoorbeeld:

HTML
<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 (width >= 600px)" />
<link
  href="highres.css"
  rel="stylesheet"
  media="screen and (resolution >= 300dpi)" />

Stylesheet-laadgebeurtenissen

Je kunt bepalen wanneer een stylesheet is geladen door te letten op een load-gebeurtenis die erop wordt geactiveerd; op dezelfde manier kun je detecteren of er een fout is opgetreden tijdens het verwerken van een stylesheet door te letten op een error-gebeurtenis:

HTML
<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />
JS
const stylesheet = document.getElementById("my-stylesheet");

stylesheet.onload = () => {
  // Do something interesting; the sheet has been loaded
};

stylesheet.onerror = () => {
  console.log("An error occurred loading the stylesheet!");
};
Opmerking

De load-gebeurtenis wordt geactiveerd zodra het stylesheet en alle geïmporteerde inhoud ervan zijn geladen en geparseerd, en vlak voordat de stijlen op de inhoud worden toegepast.

Voorbeelden van preload

Je kunt een aantal voorbeelden van <link rel="preload"> vinden in Preloading content with rel="preload".

Renderen blokkeren totdat een bron is opgehaald

Je kunt het render-token opnemen in een blocking-attribuut; het renderen van de pagina wordt geblokkeerd totdat de bron en de kritieke subbronnen ervan zijn opgehaald en toegepast op het document. Bijvoorbeeld:

HTML
<link blocking="render" rel="stylesheet" href="example.css" crossorigin />

Technische samenvatting

Inhoudscategorieën Metadata-inhoud. Indien itemprop aanwezig is: Flow-inhoud en phrasing-inhoud.
Toegestane inhoud Geen; het is een void element.
Weglaten van tags Moet een begintag hebben en mag geen eindtag hebben.
Toegestane ouders Elk element dat metadata-elementen accepteert. Indien itemprop aanwezig is: elk element dat phrasing-inhoud accepteert.
Impliciete ARIA-rol link met href-attribuut
Toegestane ARIA-rollen Geen role toegestaan
DOM-interface HTMLLinkElement

Verwante elementen

<base> <body> <head> <html> <meta> <noscript> <script> <slot>