# Hoe gebruik je de HTML-basistag om een basis-URL te definiëren?

HTML `<base>` wordt gebruikt om de basis-URL van alle relatieve URL’s te definiëren. Dit gebeurt via het attribuut `href`. Het tweede attribuut `target` definieert waar de respectieve referentiedoelen moeten worden geopend. De HTML `<base>` wordt altijd opgeslagen binnen het `<head>`.

## Wat is de HTML `<base>` -tag?

De HTML-tag `<base>` stelt de basis-URL in voor alle relatieve URL’s op een website. Deze bevat de twee HTML-attributen href en target.

Het href-attribuut specificeert de URL die als **referentie** moet dienen **voor alle relatieve URL’s, afbeeldingen, stylesheets en scripts in een HTML-document**. Deze basis-URL kan zelf ook relatief zijn. Het target-attribuut definieert de naam van het venster waarin alle **gekoppelde doelen moeten worden geopend**. Bovendien kan de HTML `<base>` specificeren hoe links in het huidige document moeten worden geopend.

De HTML `<base>` -tag wordt altijd opgeslagen binnen het `<head>` en moet zo vroeg mogelijk in de code worden gebruikt. Als er meerdere `<base>` zijn, wordt alleen de eerste in aanmerking genomen en worden alle andere genegeerd.

## Wat is de syntaxis van HTML `<base>`?

De basissyntaxis van HTML `<base>` is als volgt:

```html
<base href="URL" target="TARGET">
```

## Voorbeelden van hoe `<base>` werkt

### De basis-URL opslaan

In het eerste voorbeeld slaan we de basis-URL `https://www.example-website.com` op in het koptekstgedeelte van een document met behulp van de HTML-tag `<base>`:

```html
<html>
<head>
<title>HTML: base Tag example</title>
<base href="https://www.example-website.com" />
</head>
<body>
<p>
Here’s your website content.
</p>
<div class="hash d-none" hidden>hash_f9a683748e3c1c8d47d074e404ee230e7ad4fae9</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Standaardbestemming voor alle URL’s instellen

In het volgende voorbeeld gebruiken we het kenmerk `target` om aan te geven waar URL’s moeten worden geopend wanneer erop wordt geklikt:

```html
<html>
<head>
<title>HTML: base Tag example</title>
<base href="https://www.example-website.com" target="_self">
</head>
<body>
<p>
Here’s your website content.
</p>
<div class="hash d-none" hidden>hash_f9a683748e3c1c8d47d074e404ee230e7ad4fae9</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Toegang tot een basis-URL met meerdere relatieve links

In het derde voorbeeld gebruiken we HTML `<base>` om een basis-URL te maken die door alle relatieve links als startpagina wordt gebruikt. Zo ziet de code eruit:

```html
<html>
<head>
<title>HTML: base Tag example</title>
<base href="https://www.example-website.com/">
</head>
<body >
<h2>Various subpages</h2>
<ul>
<li><a href="/first_subpage/index.htm">First Subpage</a></li>
<li><a href="/second_subpage/index.htm">Second Subpage</a></li>
</ul>
<div class="hash d-none" hidden>hash_f9a683748e3c1c8d47d074e404ee230e7ad4fae9</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

## Welke attributen ondersteunt de HTML `<base>` -tag?

De tag `<base>` ondersteunt alleen de attributen `href` en `target`.

- **`href`**: De basis-URL voor alle relatieve URL’s op de pagina wordt bepaald via `href`. De waarde van dit attribuut wordt altijd gespecificeerd in de vorm van een URL. In de bovenstaande voorbeelden is deze waarde `https://www.example-website.com`.
- **`target`**: Het `target` geeft aan in welk venster een URL moet worden geopend. Het kan de waarden `_blank`, `_parent`, `_self` en `_top` hebben. `_blank` opent de link in een nieuw venster, `_parent` opent de link in een frame op een hoger niveau, `_self` opent de link in hetzelfde venster en `_top` opent de link in het browservenster, waarbij de pagina waarnaar wordt gelinkt wordt vervangen in plaats van als frame binnen de pagina te worden weergegeven.

Tip In onze digitale gids vindt u meer informatieve artikelen over HTML. U vindt er onder andere een uitgebreide tutorial voor beginners en een overzicht van de beste HTML-editors.


This is a markdown version of: [https://www.ionos.com/nl-be/digitalguide/websites/webontwikkeling/html-basis/](https://www.ionos.com/nl-be/digitalguide/websites/webontwikkeling/html-basis/) for AI/LLM consumption.