{"id":3607,"date":"2023-10-16T16:31:04","date_gmt":"2023-10-16T14:31:04","guid":{"rendered":"https://www.tundra.nl/en/?post_type=vaktaal&p=3607"},"modified":"2025-05-16T10:42:16","modified_gmt":"2025-05-16T08:42:16","slug":"anchortag","status":"publish","type":"vaktaal","link":"https://www.tundra.nl/en/vaktaal/anchortag/","title":{"rendered":"anchortag"},"content":{"rendered":"

Een AnchorTag is een essentieel onderdeel van webontwikkeling en is in feite een hyperlink binnen een HTML-document dat gebruikers naar een andere locatie kan leiden, hetzij binnen hetzelfde document (bijv. naar een andere sectie) of naar een ander webadres. Het meest herkenbare element van een AnchorTag is de traditionele ‘klikbare’ link die we vaak tegenkomen op websites.

\n

De structuur van een anchortag

\n

In HTML wordt een AnchorTag gedefinieerd door het <a> element. Het heeft verschillende attributen, maar de meest voorkomende is het href attribuut, dat het webadres of de bestemming van de link bevat. Een basisvoorbeeld ziet er als volgt uit:

\n
\n
<a href=\"https://voorbeeld.nl\">Bezoek onze website</a>
\n
\n
\n

In dit voorbeeld, wanneer een gebruiker op “Bezoek onze website” klikt, wordt hij naar “https://voorbeeld.nl” geleid. Maar een AnchorTag hoeft niet altijd naar externe websites te wijzen. Het kan ook worden gebruikt om naar verschillende secties binnen hetzelfde document te navigeren. Dit is handig voor lange documenten of webpagina’s waar je snel naar specifieke secties wilt springen. Dit wordt gedaan door het gebruik van het ID-attribuut van een HTML-element als doel:

\n
\n
<a href=\"#sectie2\">Ga naar Sectie 2</a>
\n...
\n<h2 id=\"sectie2\">Sectie 2</h2>
\n
\n
\n

Wanneer iemand op “Ga naar Sectie 2” klikt, wordt hij automatisch naar het gedeelte van de pagina gebracht dat is gemarkeerd met id=\"sectie2\".

\n

Geavanceerd gebruik van anchortags

\n

AnchorTags hebben meer mogelijkheden dan alleen het leiden naar andere webpagina’s of secties binnen een pagina. Ze kunnen bijvoorbeeld worden gebruikt om bestanden te downloaden, e-mailtoepassingen te openen of zelfs JavaScript-functies te activeren.

\n

Een voorbeeld van het gebruik van een AnchorTag om een bestand te downloaden:

\n
\n
<a href=\"pad/naar/bestand.pdf\" download>Download het bestand</a>
\n
\n
\n

In dit voorbeeld, door het download attribuut toe te voegen, wordt de gebruiker aangegeven het bestand te downloaden in plaats van het in de browser te bekijken.

\n

AnchorTags kunnen ook worden gebruikt in combinatie met JavaScript om bepaalde functies uit te voeren. Bijvoorbeeld:

\n
\n
<a href=\"javascript:void(0);\" onclick=\"alert('Hallo!')\">Klik op mij</a>
\n
\n
\n

Wanneer iemand op deze link klikt, verschijnt er een pop-upvenster met de tekst “Hallo!”.

\n

Tot slot is het belangrijk op te merken dat het ontwerp en het gedrag van AnchorTags volledig kunnen worden aangepast met behulp van CSS en JavaScript. Dit biedt webontwikkelaars en -ontwerpers een hoge mate van flexibiliteit bij het bepalen van het uiterlijk en de functionaliteit van links op hun webpagina’s.

\n","protected":false},"featured_media":0,"template":"","class_list":["post-3607","vaktaal","type-vaktaal","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https://www.tundra.nl/en/wp-json/wp/v2/vaktaal/3607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https://www.tundra.nl/en/wp-json/wp/v2/vaktaal"}],"about":[{"href":"https://www.tundra.nl/en/wp-json/wp/v2/types/vaktaal"}],"wp:attachment":[{"href":"https://www.tundra.nl/en/wp-json/wp/v2/media?parent=3607"}],"curies":[{"name":"wp","href":"https://api.w.org/{rel}","templated":true}]}}