# HTML base: So legen Sie eine Basis-URL für Ihre Website fest

Mit HTML `<base>` wird die Basis-URL aller relativen URLs definiert. Dies geschieht über das Attribut `href`. Das zweite Attribut `target` legt fest, wo die jeweiligen Verweisziele geöffnet werden sollen. Das HTML-`<base>`-Tag wird immer innerhalb des Elements `<head>` hinterlegt.

## Was ist das HTML-`<base>`-Tag?

Das HTML-Tag `<base>` legt die Basis-URL aller relativen URLs einer Website fest. Es enthält die beiden HTML-Attribute href und target. Über `href` wird die URL bestimmt, die als **Bezug für alle relativen URLs, Grafiken, Stylesheets und Skripte in einem HTML-Dokument** dienen soll. Diese Basis-URL kann auch selbst relativ sein. Das Attribut `target` bestimmt den Namen des Fensters, in dem sämtliche **Verweisziele geöffnet werden sollen**. Zusätzlich kann über HTML `<base>` auch festgelegt werden, wie Links im aktuellen Dokument geöffnet werden sollen.

Das HTML-`<base>`-Tag wird immer innerhalb des `<head>`-Elements hinterlegt und sollte möglichst früh im Code eingesetzt werden. Falls es mehrere `<base>`-Tags gibt, wird ausschließlich das erste berücksichtigt, während alle weiteren ignoriert werden.

## Die Syntax von HTML `<base>`

Die grundsätzliche Syntax von HTML `<base>` sieht wie folgt aus:

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

## Beispiele für die Funktionsweise von `<base>`

### Basis-URL hinterlegen

Im ersten Beispiel hinterlegen wir im Kopfbereich eines Dokuments mithilfe des HTML-`<base>`-Tags die Basis-URL `https://www.beispielseite.com`:

```html

<html>
<head>
<title>HTML: base Tag Beispiel</title>
<base href="https://www.beispielseite.com" />
</head>
<body>
<p>
Hier steht der Inhalt Ihrer Website.
</p>
<div class="hash d-none" hidden>hash_cfd52ceb7e5667c7246742b775afba265b8436f8</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>
```

### Standardziel für alle URLs definieren

Im nächsten Beispiel legen wir im Code über das Attribut `target` fest, welches Ziel alle URLs auf der Seite ansteuern sollen:

```html

<html>
<head>
<title>HTML: base Tag Beispiel</title>
<base href="https://www.beispielseite.com" target="_self">
</head>
<body>
<p>
Hier steht der Inhalt Ihrer Website.
</p>
<div class="hash d-none" hidden>hash_cfd52ceb7e5667c7246742b775afba265b8436f8</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>
```

### Mit mehreren relativen Links auf eine Basis-URL zugreifen

Im dritten Beispiel nutzen wir HTML `<base>`, um eine Basis-URL anzulegen, die von sämtlichen relativen Links als Startseite verwendet wird. So sieht der Code dafür aus:

```html

<html>
<head>
<title>HTML: base Tag Beispiel</title>
<base href="https://www.beispielseite.com/">
</head>
<body >
<h2>Verschiedene Unterseiten</h2>
<ul>
<li><a href="/erste_unterseite/index.htm">Erste Unterseite</a></li>
<li><a href="/zweite_unterseite/index.htm">Zweite Unterseite</a></li>
</ul>
<div class="hash d-none" hidden>hash_cfd52ceb7e5667c7246742b775afba265b8436f8</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>
```

## Welche Attribute unterstützt das HTML-`<base>`-Tag?

Das `<base>`-Tag unterstützt lediglich die beiden Attribute `href` und `target`.

- **`href`**: Über `href` wird die Basis-URL für alle relativen URLs auf der Seite bestimmt. Der Wert dieses Attributs wird immer in Form einer URL angegeben. Für unsere Beispiele von oben lautet dieser Wert `https://www.beispielseite.com`.
- **`target`**: Das Attribut `target` gibt an, in welchem Zielfenster eine URL geöffnet werden soll. Es kann die Werte `_blank`, `_parent`, `_self` und `_top` haben. `_blank` öffnet die Links in einem neuen Fenster, `_parent` öffnet Links in einem übergeordneten Frame, `_self` öffnet alle Links im selben Fenster und `_top` öffnet die Links im Browserfenster und nicht als Frame der verlinkenden Seite.

Tipp In unserem Digital Guide finden Sie noch viele weitere informative Artikel rund um die Hypertext Markup Language. Hier finden Sie unter anderem ein großes Einsteiger-Tutorial und einen Überblick über die besten HTML-Editoren.


This is a markdown version of: [https://www.ionos.com/de-ch/digitalguide/websites/web-entwicklung/html-base/](https://www.ionos.com/de-ch/digitalguide/websites/web-entwicklung/html-base/) for AI/LLM consumption.