<a>-element – koppelingen makenHet <a>-element, afgeleid van "anker (in het Engels anchor)" of "link", is een onmisbaar HTML-element dat wordt gebruikt om verwijzingen naar andere webpagina's of bronnen te creëren. Koppelingen vormen de kern van het web en stellen gebruikers in staat om naadloos van de ene webpagina naar de andere te navigeren. In dit hoofdstuk zullen we leren hoe het <a>-element op de juiste manier te gebruiken om doeltreffende koppelingen te maken.
Het <a>-element wordt geopend met <a> en gesloten met </a>. Binnen het <a>-element plaatsen we de URL waarnaar we willen verwijzen tussen dubbele aanhalingstekens in het 'href' (hypertext reference) attribuut.
Standaard worden links in de browser weergegeven in blauw en onderstreept om aan te geven dat ze klikbaar zijn. Hun stijl kan worden aangepast met behulp van CSS, zowel wanneer ze worden bezocht als wanneer de muisaanwijzer erover beweegt. Met CSS kunnen ontwikkelaars de standaardweergave van links aanpassen en verfraaien, inclusief de kleur, tekstdecoratie en interactieve effecten.
<a>-elementEen absolute HTML-ankerlink, ook wel een absolute URL-link genoemd, is een hyperlink binnen een HTML-document die de volledige URL van de doelpagina of bron specificeert. Deze URL bevat zowel het protocol (zoals "http://" of "https://") als het domein (zoals "www.example.com") van de doelpagina.
Voorbeeld:
<a href="https://www.example.com">Ga naar voorbeeld.com</a>Naast absolute URL's kunnen we ook HTML-ankerlinks gebruiken om naar andere pagina's binnen dezelfde website te linken. Een relatieve URL is een pad naar een bestemming binnen de huidige website, zoals:
<a href="/pagina2.html">Ga naar Pagina 2</a>Soms willen we dat een koppeling wordt geopend in een nieuw browser tabblad of venster. Dit kan worden bereikt met het target-attribuut:
<a href="https://www.example.com" target="_blank">Open in nieuw tabblad</a>Met target="_blank" wordt de koppeling geopend in een nieuw tabblad. Er kunnen verschillende waarden worden toegewezen aan het target-attribuut, zoals:
_self: Opent het gekoppelde document in hetzelfde venster of tabblad waarin de link is aangeklikt (dit is de standaardinstelling)._parent: Opent het gekoppelde document in het bovenliggende venster._top: Opent het gekoppelde document in het volledige venster.framenaam: Opent het gekoppelde document in het genoemde iframe.Je kunt ook e-mailadressen koppelen door "mailto:" voor het e-mailadres te plaatsen:
<a href="mailto:voorbeeld@email.com">Stuur een e-mail</a>Het <a>-element is cruciaal voor het maken van koppelingen in HTML-documenten. Met het href-attribuut definieer je de doel-URL van de koppeling, en met het target-attribuut kun je aangeven hoe de koppeling moet worden geopend. Of je nu naar andere webpagina's, bestanden binnen dezelfde website of zelfs e-mailadressen wilt linken, het <a>-element biedt de flexibiliteit om dit te bereiken.
Het <a>-element biedt meer dan alleen basislinking. Hier gaan we dieper in op geavanceerde toepassingen en attributen die je kunt gebruiken om je koppelingen krachtiger te maken.
Met ankerlinks kun je gebruikers naar specifieke secties van dezelfde webpagina leiden. Dit wordt vaak gebruikt voor lange pagina's met meerdere secties. Om een ankerlink te maken, voeg je een `id`-attribuut toe aan het doelgedeelte en gebruik je de `#`-notatie in het `href`-attribuut:
<a href="#sectie1">Ga naar Sectie 1</a>En hier is het doelgedeelte met het `id`-attribuut:
<section id="sectie1"><h3>Sectie 1</h3><p>Dit is de eerste sectie van de pagina.</p></section>Het `title`-attribuut voegt extra informatie toe aan de koppeling, die wordt weergegeven als een tooltip wanneer de gebruiker met de muis over de link beweegt:
<a href="https://www.example.com" title="Bezoek voorbeeld.com voor meer informatie">Voorbeeld</a>Je kunt het <a>-element gebruiken om bestanden te koppelen die door gebruikers kunnen worden gedownload. Gebruik hiervoor het `download`-attribuut:
<a href="document.pdf" download>Download PDF</a>Bij het linken naar externe websites, is het een best practice om het rel-attribuut te gebruiken met de waarde noopener noreferrer voor verbeterde veiligheid:
<a href="https://www.externesite.com" target="_blank" rel="noopener noreferrer">Externe Site</a>Deze aanpak voorkomt dat de nieuwe pagina toegang heeft tot de window.opener eigenschap en zorgt ervoor dat de oorspronkelijke pagina niet door de nieuwe pagina kan worden gemanipuleerd.