<a> — HTML element uitgelegd

Attributen

De attributen van dit element omvatten de globale attributen.

`attributionsrc` Verouderd Niet-standaard	Geeft aan dat u wilt dat de browser een `Attribution-Reporting-Eligible`-header verstuurt. Aan de serverkant wordt dit gebruikt om het verzenden van een `Attribution-Reporting-Register-Source`-header in de respons te activeren, om een navigatiegebaseerde attributiebron te registreren. De browser slaat de brongegevens op die zijn geassocieerd met de navigatiegebaseerde attributiebron (zoals opgegeven in de responsheader `Attribution-Reporting-Register-Source`) wanneer de gebruiker op de link klikt. Zie de Attribution Reporting API voor meer details. Er zijn twee versies van dit attribuut die u kunt instellen: Booleaans, d.w.z. alleen de naam `attributionsrc`. Dit geeft aan dat u wilt dat de `Attribution-Reporting-Eligible`-header naar dezelfde server wordt verzonden waar het `href`-attribuut naar verwijst. Dit is prima wanneer u de registratie van de attributiebron op dezelfde server afhandelt. Een waarde die een of meer URL's bevat, bijvoorbeeld: HTML `attributionsrc="https://a.example/register-source https://b.example/register-source"` Dit is nuttig in gevallen waarin de aangevraagde resource zich niet op een server bevindt die u beheert, of als u de registratie van de attributiebron gewoon op een andere server wilt afhandelen. In dit geval kunt u één of meer URL's opgeven als de waarde van `attributionsrc`. Wanneer de resourceaanvraag plaatsvindt, wordt de `Attribution-Reporting-Eligible`-header verzonden naar de URL('s) die zijn opgegeven in `attributionsrc`, naast de resource-oorsprong. Deze URL's kunnen vervolgens antwoorden met de `Attribution-Reporting-Register-Source` om de registratie te voltooien. Opmerking Het opgeven van meerdere URL's betekent dat meerdere attributiebronnen op dezelfde functionaliteit kunnen worden geregistreerd. U kunt bijvoorbeeld verschillende campagnes hebben waarvan u het succes probeert te meten, waarbij verschillende rapporten over verschillende gegevens worden gegenereerd. `<a>`-elementen kunnen niet worden gebruikt als attributietriggers, alleen als bronnen.
`download`	Zorgt ervoor dat de browser de gelinkte URL behandelt als een download. Kan worden gebruikt met of zonder een `filename`-waarde: Zonder waarde, stelt de browser een bestandsnaam/extensie voor, gegenereerd uit verschillende bronnen: De HTTP-header `Content-Disposition` Het laatste segment in het URL-pad Het mediatype (uit de header `Content-Type`, het begin van een `data:`-URL, of `Blob.type` voor een `blob:`-URL) `filename`: het opgeven van een waarde stelt deze voor als de bestandsnaam. `/`- en `\`-tekens worden omgezet naar underscores (`_`). Bestandssystemen kunnen andere tekens in bestandsnamen verbieden, dus browsers passen de voorgestelde naam indien nodig aan. Opmerking `download` werkt alleen voor URL's met dezelfde oorsprong, of de schema's `blob:` en `data:`. Hoe browsers downloads behandelen, verschilt per browser, gebruikersinstellingen en andere factoren. De gebruiker kan gevraagd worden voordat een download start, of het bestand kan automatisch worden opgeslagen, of het kan automatisch worden geopend, ofwel in een externe applicatie ofwel in de browser zelf. Als de `Content-Disposition`-header andere informatie bevat dan het `download`-attribuut, kan het resulterende gedrag verschillen: Als de header een `filename` specificeert, heeft deze voorrang boven een bestandsnaam die in het `download`-attribuut is opgegeven. Als de header een dispositie van `inline` specificeert, geven Chrome en Firefox voorrang aan het attribuut en behandelen ze het als een download. Oude Firefox-versies (vóór 82) geven voorrang aan de header en tonen de inhoud inline.
`href`	De URL waar de hyperlink naar verwijst. Links zijn niet beperkt tot HTTP-gebaseerde URL's — ze kunnen elk URL-schema gebruiken dat door browsers wordt ondersteund: Telefoonnummers met `tel:`-URL's E-mailadressen met `mailto:`-URL's Sms-berichten met `sms:`-URL's Uitvoerbare code met `javascript:`-URL's Hoewel webbrowsers mogelijk geen andere URL-schema's ondersteunen, kunnen websites dit wel doen met `registerProtocolHandler()` Bovendien kunnen andere URL-functies specifieke delen van de resource lokaliseren, waaronder: Secties van een pagina met documentfragmenten Specifieke tekstgedeelten met tekstfragmenten Delen van mediabestanden met mediafragmenten
`hreflang`	Geeft een hint over de menselijke taal van de gelinkte URL. Geen ingebouwde functionaliteit. Toegestane waarden zijn dezelfde als het globale `lang`-attribuut.
`interestfor` Experimenteel Niet-standaard	Definieert het `<a>`-element als een interest invoker. De waarde ervan is de `id` van het doelelement, dat op een bepaalde manier wordt beïnvloed (normaal gesproken getoond of verborgen) wanneer interesse wordt getoond in of verloren wordt op het invoker-element (bijvoorbeeld door erover te hoveren/niet meer te hoveren, of te focussen/blur te geven). Zie Interest invokers gebruiken voor meer details en voorbeelden.
`ping`	Een door spaties gescheiden lijst met URL's. Wanneer de link wordt gevolgd, stuurt de browser `POST`-verzoeken met de body `PING` naar de URL's. Doorgaans voor het bijhouden van gegevens.
`referrerpolicy`	Hoeveel van de referrer moet worden verzonden bij het volgen van de link. `no-referrer`: De `Referer`-header wordt niet verzonden. `no-referrer-when-downgrade`: De `Referer`-header wordt niet verzonden naar origins zonder TLS (HTTPS). `origin`: De verzonden referrer wordt beperkt tot de oorsprong van de verwijzende pagina: het schema, de host en de port ervan. `origin-when-cross-origin`: De referrer die naar andere oorsprongen wordt verzonden, wordt beperkt tot het schema, de host en de poort. Navigaties binnen dezelfde oorsprong bevatten nog steeds het pad. `same-origin`: Een referrer wordt verzonden voor dezelfde oorsprong, maar cross-origin-verzoeken bevatten geen referrer-informatie. `strict-origin`: Verzend alleen de oorsprong van het document als referrer wanneer het beveiligingsniveau van het protocol hetzelfde blijft (HTTPS→HTTPS), maar verzend het niet naar een minder veilige bestemming (HTTPS→HTTP). `strict-origin-when-cross-origin` (standaard): Verzend een volledige URL bij het uitvoeren van een verzoek binnen dezelfde oorsprong, verzend alleen de oorsprong wanneer het beveiligingsniveau van het protocol hetzelfde blijft (HTTPS→HTTPS), en verzend geen header naar een minder veilige bestemming (HTTPS→HTTP). `unsafe-url`: De referrer bevat de oorsprong en het pad (maar niet het fragment, het wachtwoord of de gebruikersnaam). Deze waarde is onveilig, omdat er oorspronghen en paden van door TLS beveiligde resources lekken naar onveilige oorsprongen.
`rel`	De relatie van de gelinkte URL als door spaties gescheiden linktypen.
`target`	Waar de gelinkte URL moet worden weergegeven, als de naam voor een navigatiecontext (browsing context) (een tabblad, venster of `<iframe>`). De volgende sleutelwoorden hebben speciale betekenissen voor waar de URL moet worden geladen: `_self`: De huidige navigatiecontext. (Standaard) `_blank`: Meestal een nieuw tabblad, maar gebruikers kunnen browsers zo configureren dat er in plaats daarvan een nieuw venster wordt geopend. `_parent`: De bovenliggende navigatiecontext van de huidige context. Als er geen bovenliggende context is, gedraagt dit zich als `_self`. `_top`: De bovenste navigatiecontext. Om specifiek te zijn: dit betekent de "hoogste" context die een voorouder is van de huidige. Als er geen voorouders zijn, gedraagt dit zich als `_self`. `_unfencedTop`: Staat toe dat ingebedde fenced frames navigeren naar het topniveau-frame (d.w.z. verder gaan dan de root van het fenced frame, in tegenstelling tot andere gereserveerde bestemmingen). Merk op dat de navigatie nog steeds slaagt als dit buiten een fenced-frame-context wordt gebruikt, maar dan gedraagt het zich niet als een gereserveerd sleutelwoord. Opmerking Het instellen van `target="_blank"` op `<a>`-elementen biedt impliciet hetzelfde `rel`-gedrag als het instellen van `rel="noopener"`, wat `window.opener` niet instelt.
`type`	Geeft een hint over het formaat van de gelinkte URL met een MIME type. Geen ingebouwde functionaliteit.

Verouderde attributen

`charset` Verouderd	Gaf een hint over de tekencodering van de gelinkte URL. Opmerking Dit attribuut is verouderd en mag niet door auteurs worden gebruikt. Gebruik de HTTP-header `Content-Type` op de gelinkte URL.
`coords` Verouderd	Wordt gebruikt met het `shape`-attribuut. Een door komma's gescheiden lijst met coördinaten.
`name` Verouderd	Was vereist om een mogelijke doellocatie op een pagina te definiëren. In HTML 4.01 konden `id` en `name` beide op `<a>` worden gebruikt, zolang ze dezelfde waarde hadden. Opmerking Gebruik in plaats daarvan het globale attribuut `id`.
`rev` Verouderd	Specificeerde een omgekeerde link; het tegenovergestelde van het `rel`-attribuut. Verouderd omdat het erg verwarrend is.
`shape` Verouderd	De vorm van het hyperlinkgebied in een imagemap. Opmerking Gebruik in plaats daarvan het `<area>`-element voor imagemaps.

Toegankelijkheid

Sterke linktekst

De inhoud binnen een link moet aangeven waar de link naartoe leidt, zelfs zonder context.

Ontoegankelijke, zwakke linktekst

Een helaas veelvoorkomende fout is het linken van alleen de woorden "klik hier" of "hier":

HTML

<p>Learn more about our products <a href="/products">here</a>.</p>

Resultaat

Resultaat in de browser

Toegankelijke, sterke linktekst

Gelukkig is dit eenvoudig op te lossen, en het is zelfs korter dan de ontoegankelijke versie!

HTML

<p>Learn more <a href="/products">about our products</a>.</p>

Resultaat

Resultaat in de browser

Ondersteunende software heeft snelkoppelingen om alle links op een pagina op te sommen. Sterke linktekst komt echter alle gebruikers ten goede — de snelkoppeling "alle links opsommen" emuleert hoe ziende gebruikers snel pagina's doorlopen.

onclick-gebeurtenissen

Ankerelementen worden vaak misbruikt als nepknoppen door hun href in te stellen op # of javascript:void(0) om te voorkomen dat de pagina wordt ververst, en vervolgens te luisteren naar hun click-gebeurtenissen.

Deze nep-href-waarden veroorzaken onverwacht gedrag bij het kopiëren/slepen van links, het openen van links in een nieuw tabblad/venster, het toevoegen aan bladwijzers, of wanneer JavaScript wordt geladen, fouten geeft of is uitgeschakeld. Ze geven ook onjuiste semantiek door aan ondersteunende technologieën, zoals schermlezers.

Gebruik in plaats daarvan een <button>. Over het algemeen moet u een hyperlink alleen gebruiken voor navigatie naar een echte URL.

Externe links en linken naar niet-HTML-resources

Links die via target="_blank" in een nieuw tabblad/venster openen, of links die verwijzen naar een downloadbestand, moeten aangeven wat er gebeurt wanneer de link wordt gevolgd.

Mensen met verminderd gezichtsvermogen, die navigeren met behulp van schermlezertechnologie, of met cognitieve beperkingen kunnen in verwarring raken wanneer onverwacht een nieuw tabblad, venster of applicatie opent. Oudere schermlezersoftware kondigt dit gedrag mogelijk zelfs niet aan.

Link die een nieuw tabblad/venster opent

HTML

<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia (opens in new tab)
</a>

Resultaat

Resultaat in de browser

Link naar een niet-HTML-resource

Als een pictogram wordt gebruikt om het gedrag van de link aan te geven, zorg er dan voor dat het een alt-attribuut heeft om het doel ervan te beschrijven. Mocht het pictogram ontbreken, dan brengt de inhoud van het alt-attribuut het gedrag van de link nog steeds over.

HTML

<p>
  <a href="https://www.wikipedia.org/" target="_blank">
    Wikipedia
    <img src="new-tab.svg" width="14" alt="(Opens in new tab)" />
  </a>
  <br />
  <a href="2017-annual-report.ppt">
    2017 annual report
    <img src="powerpoint.svg" width="14" alt="(PowerPoint file)" />
  </a>
</p>
<p>
  <a href="https://www.wikipedia.org/" target="_blank">
    Wikipedia
    <img src="missing-icon.svg" width="14" alt="(Opens in new tab)" />
  </a>
  <br />
  <a href="2017-annual-report.ppt">
    2017 annual report
    <img src="missing-icon.svg" width="14" alt="(PowerPoint file)" />
  </a>
</p>

Resultaat

Resultaat in de browser

Skip-links

Een skip-link is een link die zo vroeg mogelijk in de <body>-inhoud wordt geplaatst en die naar het begin van de hoofdinhoud van de pagina verwijst. Meestal verbergt CSS een skip-link buiten beeld totdat deze de focus krijgt.

HTML

<body>
  <a href="#content" class="skip-link">Skip to main content</a>

  <header>…</header>

  <!-- The skip link jumps to here -->
  <main id="content"></main>
</body>

CSS

.skip-link {
  position: absolute;
  top: -3em;
  background: white;
}
.skip-link:focus {
  top: 0;
}

Resultaat

Resultaat in de browser

Skip-links laten toetsenbordgebruikers inhoud overslaan die op meerdere pagina's wordt herhaald, zoals kopnavigatie.

Skip-links zijn met name nuttig voor mensen die navigeren met behulp van ondersteunende technologie zoals switch control, spraakcommando's of mond-/hoofdstokken, waarbij het bewegen door repetitieve links een lastige taak kan zijn.

Grootte en nabijheid

Grootte

Interactieve elementen, zoals links, moeten een gebied groot genoeg bieden om ze gemakkelijk te kunnen activeren. Dit helpt een verscheidenheid aan mensen, waaronder mensen met motorische beperkingen en mensen die onnauwkeurige invoermethoden gebruiken zoals een touchscreen. Een minimumgrootte van 44×44 CSS-pixels wordt aanbevolen.

Alleen-tekst-links in doorlopende tekst zijn vrijgesteld van deze eis, maar het is nog steeds een goed idee om ervoor te zorgen dat er genoeg tekst is gehyperlinkt om gemakkelijk te kunnen worden geactiveerd.

Nabijheid

Interactieve elementen, zoals links, die dicht bij elkaar staan, moeten ruimte tussen zich hebben. Ruimte helpt mensen met motorische beperkingen, die anders per ongeluk de verkeerde interactieve inhoud kunnen activeren.

Ruimte kan worden gecreëerd met behulp van CSS-eigenschappen zoals margin.

Voorbeelden

Linken naar een absolute URL

HTML

<a href="https://voorbeeld.nl">Voorbeeld</a>

Resultaat

Resultaat in de browser

Linken naar relatieve URL's

HTML

<a href="//example.com">Scheme-relative URL</a>
<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
<a href="p">Directory-relative URL</a>
<a href="./p">Directory-relative URL</a>
<a href="../p">Parent-directory-relative URL</a>

CSS

a {
  display: block;
  margin-bottom: 0.5em;
}

Resultaat

Resultaat in de browser

Linken naar een element op dezelfde pagina

HTML

<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">Jump to the heading below</a></p>

<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>

Resultaat

Resultaat in de browser

Opmerking

U kunt href="#top" of het lege fragment (href="#") gebruiken om naar de bovenkant van de huidige pagina te linken, zoals gedefinieerd in de HTML-specificatie.

Linken naar een e-mailadres

Om links te maken die het e-mailprogramma van de gebruiker openen om een nieuw bericht te versturen, gebruikt u het mailto:-schema:

HTML

<a href="mailto:iemand@voorbeeld.nl">Send email to nowhere</a>

Resultaat

Resultaat in de browser

Voor details over mailto:-URL's, zoals het opnemen van een onderwerp of body, zie E-maillinks of RFC 6068.

Linken naar telefoonnummers

HTML

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

Resultaat

Resultaat in de browser

Het gedrag van tel:-links varieert afhankelijk van de mogelijkheden van het apparaat:

Mobiele apparaten bellen het nummer automatisch.
De meeste besturingssystemen hebben programma's waarmee gebeld kan worden, zoals Skype of FaceTime.
Websites kunnen telefoongesprekken voeren met registerProtocolHandler, zoals web.skype.com.
Ander gedrag omvat het opslaan van het nummer in contacten, of het versturen van het nummer naar een ander apparaat.

Zie RFC 3966 voor syntaxis, aanvullende functies en andere details over het tel:-URL-schema.

Het download-attribuut gebruiken om een <canvas> als PNG op te slaan

Om de inhoud van een <canvas>-element als afbeelding op te slaan, kunt u een link maken waarbij de href de canvasgegevens is als een data:-URL, gemaakt met JavaScript, en het download-attribuut de bestandsnaam biedt voor het gedownloade PNG-bestand:

Voorbeeld tekenapp met opslaanlink

HTML

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my painting</a>
</p>

<canvas width="300" height="300"></canvas>

CSS

html {
  font-family: sans-serif;
}
canvas {
  background: white;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #6699cc;
  color: white;
  padding: 5px 10px;
}

JavaScript

const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );

Resultaat

Resultaat in de browser

Beveiliging en privacy

<a>-elementen kunnen gevolgen hebben voor de beveiliging en privacy van gebruikers. Zie Referer-header: privacy- en beveiligingsoverwegingen voor meer informatie.

Het gebruik van target="_blank" zonder rel="noreferrer" en rel="noopener" maakt de website kwetsbaar voor exploitatieaanvallen via de window.opener-API, hoewel in nieuwere browserversies het instellen van target="_blank" impliciet dezelfde bescherming biedt als het instellen van rel="noopener". Zie browsercompatibiliteit voor details.

Technische samenvatting

Content categories	Flow content, phrasing content, interactive content, palpable content.
Toegestane inhoud	Transparent, behalve dat geen enkele afstammeling interactive content of een `<a>`-element mag zijn, en geen enkele afstammeling een opgegeven tabindex-attribuut mag hebben.
Weglaten van tags	Geen, zowel de begin- als de eindtag zijn verplicht.
Toegestane ouders	Elk element dat flow content accepteert, maar geen andere `<a>`-elementen.
Impliciete ARIA-rol	`link` wanneer het `href`-attribuut aanwezig is, anders `generic`
Toegestane ARIA-rollen	Wanneer het `href`-attribuut aanwezig is: Wanneer het `href`-attribuut niet aanwezig is: elke
DOM-interface	`HTMLAnchorElement`

Zie ook

<link>

Het element <a>

Attributen

Verouderde attributen

Toegankelijkheid

Sterke linktekst

Ontoegankelijke, zwakke linktekst

Resultaat

Toegankelijke, sterke linktekst

Resultaat

onclick-gebeurtenissen

Externe links en linken naar niet-HTML-resources

Link die een nieuw tabblad/venster opent

Resultaat

Link naar een niet-HTML-resource

Resultaat

Skip-links

Resultaat

Grootte en nabijheid

Grootte

Nabijheid

Voorbeelden

Linken naar een absolute URL

HTML

Resultaat

Linken naar relatieve URL's

HTML

Resultaat

Linken naar een element op dezelfde pagina

Resultaat

Linken naar een e-mailadres

Resultaat

Linken naar telefoonnummers

Resultaat

Het download-attribuut gebruiken om een <canvas> als PNG op te slaan

Voorbeeld tekenapp met opslaanlink

HTML

CSS

JavaScript

Resultaat

Beveiliging en privacy

Technische samenvatting

Zie ook

Het element `<a>`