{"id":115892,"date":"2025-03-03T09:16:52","date_gmt":"2025-03-03T07:16:52","guid":{"rendered":"https:\/\/elementor.com\/blog\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/"},"modified":"2025-12-21T13:55:41","modified_gmt":"2025-12-21T11:55:41","slug":"html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/","title":{"rendered":"HTML-koppelingen: Hyperlinks, syntaxis, code, attributen en voorbeelden"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"115892\" class=\"elementor elementor-115892 elementor-1477\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-278f6cd e-flex e-con-boxed e-con e-parent\" data-id=\"278f6cd\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1b4328 elementor-widget elementor-widget-text-editor\" data-id=\"d1b4328\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In deze ultieme gids ontrafelen we de geheimen van HTML-koppelingen.<br \/>\nOf je nu een beginner bent die net begint met webontwikkeling of je vaardigheden wilt aanscherpen, je leert alles wat je nodig hebt om links te maken die zowel functioneel als gebruiksvriendelijk zijn.<br \/>\nEn vergeet niet dat een goed ontworpen website met naadloze navigatie niet alleen je bezoekers blij maakt; het kan ook een positieve invloed hebben op de positie in zoekmachines.   Laten we erin duiken!<\/span><\/p>\n<h2><b>De essenti\u00eble anatomie van een HTML-link<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Het hart van elke HTML-link wordt gevormd door de tag &lt;a&gt;.<br \/>\nDeze tag, kort voor &#8220;anker&#8221;, is als een magische deur naar andere bestemmingen op het web.<br \/>\nBinnen de openende &lt;a&gt; tag is zijn partner-in-crime het href attribuut (kort voor &#8220;hypertext referentie&#8221;).<br \/>\nMet het href attribuut geef je het adres op van de pagina of bron waarnaar je wilt linken.   <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Laten we de basiscomponenten eens uit elkaar halen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;a&gt;:<\/b><span style=\"font-weight: 400;\"> Dit is de opening van de anchor tag, die het begin van je link aangeeft.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>href attribuut:<\/b><span style=\"font-weight: 400;\"> Dit deel bevat de bestemmings-URL, het adres van waar de link de gebruiker naartoe brengt als erop wordt geklikt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ankertekst:<\/b><span style=\"font-weight: 400;\">  Dit is het zichtbare deel van de link waar gebruikers op zullen klikken.<br \/>\nHet is de tekst die op de webpagina verschijnt. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Afsluitende tag:<\/b><span style=\"font-weight: 400;\"> Een afsluitende tag &lt;\/a&gt; markeert het einde van je link.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Het is belangrijk om beschrijvende ankertekst te gebruiken.<br \/>\nDit helpt zowel gebruikers als zoekmachines om de context te begrijpen van waar ze op klikken.<br \/>\nVermijd algemene zinnen als &#8220;klik hier&#8221; of &#8220;lees meer&#8221;.<br \/>\nGa in plaats daarvan voor tekst die de inhoud waar de link naartoe leidt nauwkeurig weergeeft.   <\/span><\/p>\n<h3><b>Soorten HTML-koppelingen<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">HTML-koppelingen zijn niet standaard.<br \/>\nZe zijn er in verschillende smaken, elk met een eigen doel en gedrag.<br \/>\nLaten we eens kijken naar de meest voorkomende types:  <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Absolute URL&#8217;s<\/b><b><br \/><\/b><span style=\"font-weight: 400;\">Absolute URL&#8217;s specificeren het volledige adres van een webpagina, inclusief het protocol (meestal https:\/\/), de domeinnaam en het specifieke pad naar de bron.<br \/>\nZe zijn perfect voor het linken naar externe websites omdat ze de volledige route naar de bestemming geven. <\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">Deze link verwijst bijvoorbeeld naar de homepage van Voorbeeldwebsite:<\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">https:\/\/www.example.com<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Relatieve URL&#8217;s<\/b><b><br \/><\/b><span style=\"font-weight: 400;\">Relatieve URL&#8217;s zijn een soort snelkoppelingen binnen je website.<br \/>\nIn plaats van het volledige adres geven ze een locatie ten opzichte van de huidige pagina aan, waardoor ze super handig zijn voor het linken tussen pagina&#8217;s binnen je website. <\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">Als je bijvoorbeeld wilt linken naar een &#8220;contact.html&#8221; pagina die zich in dezelfde map bevindt als je huidige pagina, zou je link er als volgt uitzien:<\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">contact.html<\/span><span style=\"font-weight: 400;\"><br \/><\/span><b>Bonustip:<\/b><span style=\"font-weight: 400;\">  Relatieve URL&#8217;s kunnen helpen bij het stroomlijnen van je website-updates.<br \/>\nAls je je hele site naar een nieuw domein verhuist, zullen relatieve links nog steeds werken zonder dat er aanpassingen nodig zijn. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Afbeelding koppelingen<\/b><b><br \/><\/b><span style=\"font-weight: 400;\">Wil je van een afbeelding een klikbare link maken?<br \/>\nDat is heel eenvoudig!<br \/>\nJe wikkelt een afbeeldingstag &lt;img&gt; binnen je ankertag &lt;a&gt;.<br \/>\nZorg ervoor dat je <a href=\"https:\/\/elementor.com\/blog\/alt-tag\/\" data-wpil-monitor-id=\"7849\">het &#8216;alt&#8217; attribuut<\/a> toevoegt <a href=\"https:\/\/elementor.com\/blog\/alt-tag\/\" data-wpil-monitor-id=\"7849\">aan je afbeeldingstag<\/a>.<br \/>\nDit bevat de beschrijvende tekst voor toegankelijkheid (schermlezers) en verschijnt als de afbeelding niet wordt geladen.    <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Email koppelingen (mailto:)<\/b><b><br \/><\/b><span style=\"font-weight: 400;\">Voor email links gebruik je het speciale mailto protocol.<br \/>\nAls je erop klikt, wordt het standaard emailprogramma van de gebruiker geopend met een vooraf ingevuld &#8216;Aan&#8217;-adres.<br \/>\nJe kunt zelfs de onderwerpregel of de inhoud van de email vooraf invullen.<br \/>\nBijvoorbeeld:   <\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">mailto:info@example.com?subject=Website Onderzoek<\/span><\/li>\n<\/ul>\n<h3><b>Linkgedrag regelen: het &#8216;doel&#8217;-attribuut<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Het doel attribuut is als een verkeersregelaar voor je links.<br \/>\nHiermee kun je bepalen of een gelinkte pagina moet openen in hetzelfde browsertabblad, een nieuw tabblad of zelfs binnen een specifiek frame van je website (als je frames gebruikt).<br \/>\nHier volgt een overzicht van de meest voorkomende waarden:  <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>_blank:<\/b><span style=\"font-weight: 400;\">  Dit is de optie bij uitstek als je wilt dat de gelinkte pagina wordt geopend in een nieuw browsertabblad of -venster.<br \/>\nJe huidige website blijft open, zodat gebruikers er gemakkelijk naar terug kunnen komen. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Zelf:<\/b><span style=\"font-weight: 400;\">  Dit is het standaard gedrag.<br \/>\nHet vertelt de browser om de gelinkte pagina in hetzelfde tabblad of venster te openen, ter vervanging van de huidige pagina waarop de gebruiker zich bevindt. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>_ouder:<\/b><span style=\"font-weight: 400;\"> Als je website frames gebruikt, vertelt deze waarde de gelinkte pagina te openen in het bovenliggende frame.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>_top:<\/b><span style=\"font-weight: 400;\"> Deze waarde is vergelijkbaar met _parent, maar opent de gelinkte pagina in het volledige browservenster, zonder framesets.<\/span><\/li>\n<\/ul>\n<p><b>Wanneer gebruiken?<\/b><span style=\"font-weight: 400;\">  De beste keuze voor het doelattribuut hangt af van de context van je link.<br \/>\nHier is een algemene vuistregel: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gebruik voor links naar externe websites _blank om te voorkomen dat de gebruiker volledig wordt omgeleid naar jouw site.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Voor links binnen je website kies je meestal _self, zodat de navigatie vloeiend blijft binnen hetzelfde tabblad.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Vermijd het gebruik van _parent en _top tenzij je site specifiek framesets gebruikt, omdat ze de gebruikerservaring kunnen verstoren.<\/span><\/li>\n<\/ul>\n<h3><b>Links voor navigatie<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Zie links als de paden door je website.<br \/>\nEen goed georganiseerd navigatiesysteem met duidelijke links is als een routekaart die je bezoekers naar de informatie leidt die ze nodig hebben.<br \/>\nMenu&#8217;s op websites zijn vaak helemaal opgebouwd uit links!<br \/>\nLaten we eens kijken hoe je met HTML basisnavigatiestructuren kunt maken:   <\/span><\/p>\n<h4><b>Ongeordende lijsten (voor eenvoudige navigatie):<\/b><b><br \/><\/b><span style=\"font-weight: 400;\">Ongeordende lijsten, gemarkeerd door de tag &lt;ul&gt;, zijn perfect voor eenvoudige navigatiemenu&#8217;s.<br \/>\nElk item in de lijst &lt;li&gt; kan een link bevatten: <\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f3365b elementor-widget elementor-widget-code-highlight\" data-id=\"2f3365b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<ul>\r\n    <li><a href=\"\/\">Home<\/a><\/li>\r\n    <li><a href=\"\/about\">About Us<\/a><\/li>\r\n    <li><a href=\"\/contact\">Contact<\/a><\/li>\r\n<\/ul>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e89a7d elementor-widget elementor-widget-text-editor\" data-id=\"3e89a7d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Geordende lijsten (voor genummerde menu&#8217;s):<\/b><b><br \/><\/b><span style=\"font-weight: 400;\">Geordende lijsten (&lt;ol&gt;) werken op dezelfde manier als <a href=\"https:\/\/elementor.com\/blog\/how-to-remove-bullet-points-in-css\/\" data-wpil-monitor-id=\"7850\">ongeordende lijsten<\/a>, maar geven nummers weer naast elk item.<br \/>\nZe zijn geweldig voor stapsgewijze instructies of ranglijsten. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lijsten nesten (voor submenu&#8217;s):<\/b><b><br \/><\/b><span style=\"font-weight: 400;\">Voor complexere navigatie kun je dropdowns of menu&#8217;s met meerdere niveaus maken door lijsten in elkaar te nesten.<\/span><\/li>\n<\/ul>\n<p><b>Elementor Tip:<\/b><span style=\"font-weight: 400;\">  Als je Elementor gebruikt, heb je met de krachtige Theme Builder-functie een enorme visuele controle over het maken en stylen van menu&#8217;s.<br \/>\nJe kunt met gemak aangepaste menu&#8217;s ontwerpen, wat je tijd en ingewikkelde codering bespaart. <\/span><\/p>\n<p><b>Pro Tip<\/b><span style=\"font-weight: 400;\">: Houd je navigatiemenu&#8217;s beknopt en doelgericht.<br \/>\nTe veel links kunnen gebruikers overweldigen.<br \/>\nGeef prioriteit aan de belangrijkste pagina&#8217;s en zorg ervoor dat je menustructuur logisch en gemakkelijk te volgen is.  <\/span><\/p>\n<h3><b>Links opmaken met CSS<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Gewone HTML-links zijn functioneel, maar kunnen er een beetje saai uitzien.<br \/>\nCSS (Cascading Style Sheets) is als een toverstaf om links te transformeren in opvallende, interactieve elementen.<br \/>\nHier zijn enkele essenti\u00eble <a href=\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/\" data-wpil-monitor-id=\"7851\">CSS eigenschappen<\/a> om je op weg te helpen:  <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>kleur:<\/b><span style=\"font-weight: 400;\"> Dit is de meest eenvoudige manier om <a href=\"https:\/\/elementor.com\/blog\/nl\/hoe-linkkleuren-veranderen-in-wordpress5-methoden\/\" data-wpil-monitor-id=\"7852\">de kleur van je linktekst te veranderen<\/a>.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>tekstdecoratie:<\/b><span style=\"font-weight: 400;\">  Controleer onderstrepingen met deze eigenschap.<br \/>\nDe meest voorkomende waarde is none om de standaard onderstreping te verwijderen, terwijl underline deze weer toevoegt. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>lettertype-gewicht<\/b><span style=\"font-weight: 400;\">: Laat je links opvallen door ze vet te maken, of experimenteer met verschillende lettergewichten voor visuele hi\u00ebrarchie.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>lettergrootte:<\/b><span style=\"font-weight: 400;\"> Pas de grootte van je linktekst aan voor leesbaarheid en nadruk.<\/span><\/li>\n<\/ul>\n<h3><b>Het naar een hoger niveau tillen: Pseudoklassen<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Pseudoklassen geven je superkrachten om links te stylen op basis van hun status.<br \/>\nHier zijn de belangrijkste: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Zweven:  <\/b><span style=\"font-weight: 400;\">Dit maakt je links interactief!<br \/>\nStijlveranderingen die je aanbrengt met: hover verschijnen wanneer de muis van de gebruiker over de link beweegt.<br \/>\nHet is een geweldige manier om visuele feedback te geven.  <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>bezocht :  <\/b><span style=\"font-weight: 400;\">  Gebruik dit om het uiterlijk van links waarop de gebruiker al heeft geklikt te veranderen.<br \/>\nDit kan een handige visuele aanwijzing zijn voor navigatie. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>:active : <\/b><span style=\"font-weight: 400;\"> Deze stijlt op het moment dat er op een link wordt geklikt, waardoor de gebruiker direct de bevestiging krijgt dat zijn klik is geregistreerd.<\/span><\/li>\n<\/ul>\n<p><b>Voorbeeld:<\/b><span style=\"font-weight: 400;\"> Laten we links rood maken en een onderstreping geven als ze zweven:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-043e812 elementor-widget elementor-widget-code-highlight\" data-id=\"043e812\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\na:hover { \r\n    color: red; \r\n    text-decoration: underline; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38455db elementor-widget elementor-widget-text-editor\" data-id=\"38455db\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Elementor Tip:<\/b><span style=\"font-weight: 400;\"> Met Elementor kun je je links visueel opmaken met talloze opties, waaronder hover-effecten, zonder dat je handmatig CSS-code hoeft te schrijven.<\/span><\/p>\n<h3><b>Jump koppelingen: Navigeren binnen een pagina<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Soms staan lange webpagina&#8217;s vol met inhoud.<br \/>\nJump links, ook wel ankerlinks genoemd, stellen gebruikers in staat om snel naar specifieke secties op dezelfde pagina te &#8220;springen&#8221;, wat de gebruikerservaring verbetert.<br \/>\nZe zijn vooral handig voor lange artikelen, FAQ&#8217;s of pagina&#8217;s met een <a href=\"https:\/\/elementor.com\/blog\/table-of-contents\/\" data-wpil-monitor-id=\"7844\">inhoudsopgave<\/a>.  <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Zo werkt het:<\/span><\/p>\n<p><b>Maak een anker:<\/b><span style=\"font-weight: 400;\"> Geef de sectie waarnaar je wilt linken <\/span><i><span style=\"font-weight: 400;\">naar<\/span><\/i><span style=\"font-weight: 400;\">  een uniek id met het id attribuut.<br \/>\nBijvoorbeeld: <\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba83295 elementor-widget elementor-widget-code-highlight\" data-id=\"ba83295\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<h2 id=\"tips\">Additional Tips<\/h2>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90fac18 elementor-widget elementor-widget-text-editor\" data-id=\"90fac18\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>  Maak de jump link:<\/b><span style=\"font-weight: 400;\">  Gebruik een anchor tag om te linken naar de ID die je zojuist hebt gemaakt.<br \/>\nVoorvoeg de ID met een hashtag (#).<br \/>\nBijvoorbeeld:  <\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44a9373 elementor-widget elementor-widget-code-highlight\" data-id=\"44a9373\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<a href=\"#tips\">Jump to Tips<\/a>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0165abb elementor-widget elementor-widget-text-editor\" data-id=\"0165abb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Als iemand nu op de link &#8220;Spring naar tips&#8221; klikt, zal zijn browser soepel naar beneden scrollen naar de sectie met de &#8220;tips&#8221; ID.<\/span><\/p>\n<p><b>Pro Tip:<\/b><span style=\"font-weight: 400;\">  Zorg ervoor dat je ID&#8217;s beschrijvend en uniek zijn binnen de pagina.<br \/>\nDit zorgt ervoor dat je spronglinks correct werken en voorkomt verwarring. <\/span><\/p>\n<h3><b>Toegankelijkheid  <\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Bij webtoegankelijkheid gaat het om het maken van websites die bruikbaar zijn voor mensen met een beperking.<br \/>\nAls het om links gaat, zijn er een paar cruciale dingen waar je rekening mee moet houden: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Beschrijvende ankertekst:<\/b><span style=\"font-weight: 400;\">  Vermijd vage zinnen als &#8220;klik hier&#8221; of &#8220;lees meer&#8221;.<br \/>\nGebruikers die afhankelijk zijn van schermlezers (hulptechnologie die websites hardop voorleest) hebben context nodig om te begrijpen waar een link hen naartoe brengt.<br \/>\nMaak van je ankertekst een duidelijke beschrijving van de doelpagina of bron.  <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Het attribuut &#8217;titel&#8217;:<\/b><span style=\"font-weight: 400;\">  Hoewel het niet altijd visueel wordt weergegeven, geeft het title attribuut extra informatie voor schermlezers.<br \/>\nGebruik het om je ankertekst aan te vullen, vooral als de linkbestemming meer uitleg nodig heeft. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Focusindicatoren:<\/b><span style=\"font-weight: 400;\">  Gebruikers die navigeren met een toetsenbord (in plaats van een muis) hebben visuele aanwijzingen nodig over welke link op dat moment is geselecteerd.<br \/>\nZorg ervoor dat je <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"30524\">CSS<\/a> duidelijke focusstijlen biedt, vaak met een contrasterende omlijning of kleurverandering. <\/span><\/li>\n<\/ul>\n<p><b>Elementor Tip:<\/b><span style=\"font-weight: 400;\">  Elementor heeft verschillende ingebouwde toegankelijkheidsfuncties en houdt zich aan de best practices op het gebied van toegankelijkheid.<br \/>\nOverweeg het te gebruiken om je inspanningen voor een inclusieve website te stroomlijnen. <\/span><\/p>\n<p><b>Belangrijke opmerking:<\/b><span style=\"font-weight: 400;\">  Toegankelijkheid is niet alleen bedoeld om mensen met een handicap te helpen.<br \/>\nDuidelijke linkteksten en goed ontworpen focusstijlen verbeteren de ervaring voor   <\/span><i><span style=\"font-weight: 400;\">alle<\/span><\/i><span style=\"font-weight: 400;\"> gebruikers.<\/span><\/p>\n<h2><b>Beste praktijken voor HTML-links en SEO<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Zoekmachines zoals Google gebruiken links om het web te doorzoeken, nieuwe pagina&#8217;s te ontdekken en de relaties tussen inhoud te begrijpen.<br \/>\nZo zorg je ervoor dat je links je <a href=\"https:\/\/elementor.com\/blog\/nl\/7-beste-websitebouwers-voor-seo-in-year\/\" data-wpil-monitor-id=\"7853\">SEO-inspanningen<\/a> ondersteunen: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Semantische koppelingen en inhoudsorganisatie<\/b><span style=\"font-weight: 400;\">: Kies beschrijvende ankertekst die de inhoud van de gelinkte pagina goed weergeeft.<br \/>\nZorg ervoor dat je links zinvol zijn binnen de algehele structuur en stroom van je website, waardoor de actuele relevantie wordt verbeterd. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Intern linken:<\/b><span style=\"font-weight: 400;\">  Een sterke interne linkstrategie helpt <a href=\"https:\/\/elementor.com\/blog\/best-wordpress-search-plugins\/\" data-wpil-monitor-id=\"7846\">zoekmachines de<\/a> hi\u00ebrarchie <a href=\"https:\/\/elementor.com\/blog\/best-wordpress-search-plugins\/\" data-wpil-monitor-id=\"7846\">van je site te begrijpen<\/a> en je belangrijkste pagina&#8217;s te identificeren.<br \/>\nNeem relevante links op in je artikelen om zowel gebruikers als zoekmachinecrawlers de weg te wijzen. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b><a href=\"https:\/\/elementor.com\/blog\/nl\/hoe-kan-ik-gebroken-links-vinden-en-repareren5-methodes\/\" data-wpil-monitor-id=\"7854\"><a href=\"https:\/\/elementor.com\/blog\/nl\/hoe-kan-ik-gebroken-links-vinden-en-repareren5-methodes\/\">Gebroken koppelingen<\/a><\/a><\/b><span style=\"font-weight: 400;\">: Pas altijd op voor gebroken links (links die naar 404-foutpagina&#8217;s leiden).<br \/>\nZe zorgen voor een frustrerende gebruikerservaring en kunnen de geloofwaardigheid van je website bij zoekmachines schaden.<br \/>\nControleer regelmatig je links met tools zoals de W3C Link Checker (  <\/span><a href=\"https:\/\/validator.w3.org\/checklink\"><span style=\"font-weight: 400;\">https:\/\/validator.w3.org\/checklink<\/span><\/a><span style=\"font-weight: 400;\">) of browserextensies die zijn ontworpen voor het vinden van gebroken links.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Hoewel links een belangrijke factor zijn in SEO, zijn ze slechts \u00e9\u00e9n stukje van de puzzel.<br \/>\nInhoud van hoge kwaliteit, een goede websitestructuur en een positieve gebruikerservaring spelen ook een essenti\u00eble rol. <\/span><\/p>\n<h3><b>Problemen oplossen met veelvoorkomende koppelingsfouten<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Zelfs de meest nauwgezette webontwikkelaars komen af en toe linkhaperingen tegen.<br \/>\nHier zijn enkele veelvoorkomende problemen en hoe je ze kunt oplossen: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Onjuiste URL&#8217;s:<\/b><span style=\"font-weight: 400;\">  Controleer je URL&#8217;s dubbel (en driedubbel!) op typefouten.<br \/>\nZelfs een enkel verkeerd teken kan een link verbreken. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Veranderingen in paginastructuur:<\/b><span style=\"font-weight: 400;\">  Als je pagina&#8217;s op je website verplaatst of hernoemt, vergeet dan niet om alle links die ernaar verwijzen bij te werken.<br \/>\nAnders krijg je gebroken links. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Veranderingen externe website:<\/b><span style=\"font-weight: 400;\">  Helaas heb je geen controle over de stabiliteit van externe websites.<br \/>\nAls een website waarnaar je linkt wordt verwijderd of de URL verandert, zal je link niet meer werken. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Problemen met browsercompatibiliteit<\/b><span style=\"font-weight: 400;\">: Hoewel dit zelden voorkomt bij basislinks, kan het gedrag van complexe links inconsistent zijn in verschillende browsers.<br \/>\nTest je links altijd in de populairste browsers (zoals Chrome, Firefox en Safari) om er zeker van te zijn dat ze werken zoals verwacht. <\/span><\/li>\n<\/ul>\n<p><b>Hulpmiddelen om te redden:<\/b><span style=\"font-weight: 400;\"> Verschillende tools kunnen helpen bij het opsporen en oplossen van linkproblemen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>W3C Link Checker:<\/b> <a href=\"https:\/\/validator.w3.org\/checklink\"><span style=\"font-weight: 400;\">https:\/\/validator.w3.org\/checklink<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Browser extensies:<\/b><span style=\"font-weight: 400;\"> Veel extensies, zoals &#8220;Check My Links&#8221; voor Chrome, zijn speciaal ontworpen om een pagina te scannen en gebroken links te markeren.<\/span><\/li>\n<\/ul>\n<h3><b>Extra tips en overwegingen<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Veiligheid: Let op links van externe bronnen.<\/b><span style=\"font-weight: 400;\">  Houd bij het linken naar andere websites rekening met hun betrouwbaarheid en reputatie.<br \/>\nLinks naar kwaadaardige websites kunnen de reputatie van je eigen site schaden en je gebruikers mogelijk blootstellen aan veiligheidsrisico&#8217;s. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>HTTPS:<\/b><span style=\"font-weight: 400;\">  Gebruik altijd het beveiligde https:\/\/ protocol in je links, vooral voor links met betrekking tot gevoelige acties zoals inloggen, formulieren of betalingen.<br \/>\nDit zorgt ervoor dat gebruikersgegevens worden <a href=\"https:\/\/elementor.com\/blog\/nl\/wat-is-encryptie-en-hoe-werkt-het\/\" data-wpil-monitor-id=\"7847\">versleuteld<\/a> en beschermd. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Het attribuut &#8216;download&#8217;:<\/b><span style=\"font-weight: 400;\">  Het download attribuut maakt het downloaden van bestanden eenvoudig.<br \/>\nVoeg het toe aan je link en de browser zal de gebruiker vragen het bestand te downloaden in plaats van het online weer te geven. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Dynamische koppelingen met Elementor (optioneel):<\/b><span style=\"font-weight: 400;\">  Als je Elementor gebruikt, maak dan gebruik van de mogelijkheden voor dynamische inhoud.<br \/>\nHiermee kun je links maken die automatisch worden gevuld met gegevens uit aangepaste velden, formulieren en meer, wat je handmatig werk bespaart, vooral op grote websites. <\/span><\/li>\n<\/ul>\n<p><b>Een opmerking over het volgen van links:<\/b><span style=\"font-weight: 400;\"> Om meer inzicht te krijgen in de interactie tussen gebruikers en je links, kun je overwegen om URL-trackingparameters (zoals UTM-codes) te gebruiken in combinatie met <a href=\"https:\/\/elementor.com\/blog\/google-analytics-wordpress\/\" data-wpil-monitor-id=\"7845\">analyseprogramma&#8217;s zoals Google Analytics<\/a>.<\/span><\/p>\n<h2><b>Conclusie<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Inmiddels heb je de ins en outs van HTML-links onder de knie.<br \/>\nJe begrijpt hun verschillende vormen, hoe je hun gedrag kunt bepalen en hoe je ze kunt gebruiken voor navigatie, toegankelijkheid en een positieve gebruikerservaring.<br \/>\nOnthoud dat links de bouwstenen zijn van de onderlinge verbondenheid binnen je website en over de uitgestrektheid van het internet.  <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hoewel de basis van HTML-tags altijd belangrijk zal blijven, is het combineren van deze kennis met een krachtige <a href=\"https:\/\/elementor.com\/blog\/nl\/10-beste-website-hosting-providers-van-year\/\" data-wpil-monitor-id=\"7848\">websitebouwer en geoptimaliseerde hosting<\/a> het ultieme recept voor succes.<br \/>\nOplossingen zoals Elementor stroomlijnen de technische aspecten van webontwikkeling, zodat jij je kunt richten op het maken van boeiende inhoud en een naadloze gebruikerservaring waarin je links schitteren. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Of je nu een beginner bent die je eerste website bouwt of een doorgewinterde ontwikkelaar die zijn workflow wil verbeteren, inzicht in de basisprincipes van HTML-links en de impact van de infrastructuur van je website zal je op weg helpen naar digitaal succes!<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Koppelingen in HTML zijn essentieel voor het maken van goed gestructureerde en gemakkelijk navigeerbare websites.<br \/>\nZe leiden bezoekers door de informatie en kunnen zelfs e-mails starten.<br \/>\nGebroken links frustreren gebruikers echter en schaden de reputatie van een website.  <\/p>\n","protected":false},"author":2024234,"featured_media":113326,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[515],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-115892","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bronnen"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML-koppelingen: Hyperlinks, syntaxis, code, attributen en voorbeelden<\/title>\n<meta name=\"description\" content=\"Koppelingen in HTML zijn essentieel voor het maken van goed gestructureerde en gemakkelijk navigeerbare websites. Ze leiden bezoekers door de informatie en kunnen zelfs e-mails starten. Gebroken links frustreren gebruikers echter en schaden de reputatie van een website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML-koppelingen: Hyperlinks, syntaxis, code, attributen en voorbeelden\" \/>\n<meta property=\"og:description\" content=\"Koppelingen in HTML zijn essentieel voor het maken van goed gestructureerde en gemakkelijk navigeerbare websites. Ze leiden bezoekers door de informatie en kunnen zelfs e-mails starten. Gebroken links frustreren gebruikers echter en schaden de reputatie van een website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T07:16:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-21T11:55:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\\\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#\\\/schema\\\/person\\\/5d24783541c454816685653dfed73377\"},\"headline\":\"HTML-koppelingen: Hyperlinks, syntaxis, code, attributen en voorbeelden\",\"datePublished\":\"2025-03-03T07:16:52+00:00\",\"dateModified\":\"2025-12-21T11:55:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\\\/\"},\"wordCount\":2410,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Bronnen\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\\\/\",\"name\":\"HTML-koppelingen: Hyperlinks, syntaxis, code, attributen en voorbeelden\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-03T07:16:52+00:00\",\"dateModified\":\"2025-12-21T11:55:41+00:00\",\"description\":\"Koppelingen in HTML zijn essentieel voor het maken van goed gestructureerde en gemakkelijk navigeerbare websites. Ze leiden bezoekers door de informatie en kunnen zelfs e-mails starten. Gebroken links frustreren gebruikers echter en schaden de reputatie van een website.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\\\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bronnen\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/category\\\/bronnen\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML-koppelingen: Hyperlinks, syntaxis, code, attributen en voorbeelden\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/elemntor\\\/\",\"https:\\\/\\\/x.com\\\/elemntor\",\"https:\\\/\\\/www.instagram.com\\\/elementor\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#\\\/schema\\\/person\\\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \\\/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/author\\\/itamarha\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/itamar-haim-8149b85b\\\/\"],\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/author\\\/itamarha\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML-koppelingen: Hyperlinks, syntaxis, code, attributen en voorbeelden","description":"Koppelingen in HTML zijn essentieel voor het maken van goed gestructureerde en gemakkelijk navigeerbare websites. Ze leiden bezoekers door de informatie en kunnen zelfs e-mails starten. Gebroken links frustreren gebruikers echter en schaden de reputatie van een website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/","og_locale":"nl_NL","og_type":"article","og_title":"HTML-koppelingen: Hyperlinks, syntaxis, code, attributen en voorbeelden","og_description":"Koppelingen in HTML zijn essentieel voor het maken van goed gestructureerde en gemakkelijk navigeerbare websites. Ze leiden bezoekers door de informatie en kunnen zelfs e-mails starten. Gebroken links frustreren gebruikers echter en schaden de reputatie van een website.","og_url":"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T07:16:52+00:00","article_modified_time":"2025-12-21T11:55:41+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Geschreven door":"Itamar Haim","Geschatte leestijd":"12 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"HTML-koppelingen: Hyperlinks, syntaxis, code, attributen en voorbeelden","datePublished":"2025-03-03T07:16:52+00:00","dateModified":"2025-12-21T11:55:41+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/"},"wordCount":2410,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Bronnen"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/","url":"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/","name":"HTML-koppelingen: Hyperlinks, syntaxis, code, attributen en voorbeelden","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-03T07:16:52+00:00","dateModified":"2025-12-21T11:55:41+00:00","description":"Koppelingen in HTML zijn essentieel voor het maken van goed gestructureerde en gemakkelijk navigeerbare websites. Ze leiden bezoekers door de informatie en kunnen zelfs e-mails starten. Gebroken links frustreren gebruikers echter en schaden de reputatie van een website.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/nl\/html-koppelingen-hyperlinks-syntaxis-code-attributen-en-voorbeelden\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/nl\/"},{"@type":"ListItem","position":2,"name":"Bronnen","item":"https:\/\/elementor.com\/blog\/nl\/category\/bronnen\/"},{"@type":"ListItem","position":3,"name":"HTML-koppelingen: Hyperlinks, syntaxis, code, attributen en voorbeelden"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/nl\/#website","url":"https:\/\/elementor.com\/blog\/nl\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/nl\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/nl\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/115892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/comments?post=115892"}],"version-history":[{"count":0,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/115892\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media\/113326"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media?parent=115892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/categories?post=115892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/tags?post=115892"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_persona?post=115892"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_intent?post=115892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}