<base>
Zuletzt aktualisiert am 4. Februar 2026
Das <base>-Element legt die Basis-URL für alle relativen URLs in einem HTML-Dokument fest. Zusätzlich kannst du damit ein Standard-Ziel für alle Links definieren: zum Beispiel, dass jeder Link in einem neuen Tab geöffnet wird.
Grundlagen
Wenn du auf einer Webseite relative URLs verwendest (also URLs ohne https://... am Anfang), berechnet der Browser die vollständige URL anhand der aktuellen Seitenadresse. Mit <base> kannst du diese Berechnung ändern und eine andere Basis-URL vorgeben.
Das Element hat ein paar Besonderheiten:
- Es ist ein Void-Element: es hat keinen Inhalt und kein schließendes Tag
- Es darf nur einmal pro Dokument vorkommen
- Es muss im
<head>stehen, idealerweise vor allen anderen Elementen, die URLs verwenden - Es beeinflusst alle relativen URLs im Dokument, auch bei
<link>,<img>,<script>,<a>und Formularen - Mindestens eines der Attribute
hrefodertargetmuss gesetzt sein
In der Praxis begegnet dir <base> eher selten. Es wird vor allem in Anwendungen genutzt, bei denen sich die Basis-URL dynamisch ändert, oder wenn alle Links auf einer Seite standardmäßig in einem neuen Tab geöffnet werden sollen.
Syntax
<base href="https://example.com/" />
<base target="_blank" />
<base href="https://example.com/" target="_blank" />Da <base> ein Void-Element ist, schreibst du es als selbstschließendes Tag. Der abschließende Schrägstrich (/) ist in HTML optional, aber guter Stil.
Attribute
| Attribut | Typ | Beschreibung | Beispiel |
|---|---|---|---|
href | URL | Die Basis-URL, die für alle relativen URLs im Dokument verwendet wird. Muss eine gültige absolute URL sein. | href="https://example.com/pfad/" |
target | String | Das Standard-Ziel für alle Links und Formulare im Dokument. Übliche Werte: _self (Standard, gleicher Tab), _blank (neuer Tab), _parent (übergeordneter Frame), _top (gesamtes Fenster). | target="_blank" |
Beispiele
Basis-URL für relative Links setzen
Mit href legst du fest, wie der Browser relative URLs auflöst. Alle relativen Pfade im Dokument werden dann relativ zur angegebenen Basis-URL berechnet.
<head>
<base href="https://mitmario.dev/" />
</head>
<body>
<p>Dieser Link geht zu <a href="blog">mitmario.dev/blog</a></p>
<p>Und dieser zu <a href="docs/html">mitmario.dev/docs/html</a></p>
</body>Standard-Target für alle Links
Mit target kannst du festlegen, dass alle Links standardmäßig in einem neuen Tab geöffnet werden, ohne target="_blank" an jeden einzelnen Link schreiben zu müssen.
<head>
<base target="_blank" />
</head>
<body>
<p>Alle Links öffnen sich in einem neuen Tab:</p>
<ul>
<li><a href="https://developer.mozilla.org">MDN Web Docs</a></li>
<li><a href="https://www.w3.org">W3C</a></li>
</ul>
<p>Einzelne Links können das überschreiben:</p>
<a href="https://example.com" target="_self">Dieser Link öffnet im gleichen Tab</a>
</body>Beide Attribute kombiniert
Du kannst href und target auch zusammen verwenden. Das ist praktisch, wenn du eine zentrale Basis-URL festlegen und gleichzeitig alle Links in neuen Tabs öffnen möchtest.
<head>
<base href="https://mitmario.dev/" target="_blank" />
</head>
<body>
<nav>
<a href="blog">Blog</a> |
<a href="docs/html">HTML Docs</a> |
<a href="kurse">Kurse</a>
</nav>
</body>Barrierefreiheit
Das <base>-Element hat keinen direkten Einfluss auf die Barrierefreiheit. Wenn du allerdings target="_blank" als Standard setzt, solltest du beachten:
- Neue Tabs können verwirrend sein: Nutzer von Screenreadern oder Personen mit kognitiven Einschränkungen erwarten, dass der Zurück-Button funktioniert. Ein neuer Tab bricht diese Erwartung.
- Hinweis geben: Wenn Links in einem neuen Tab geöffnet werden, sollte das für den Nutzer erkennbar sein, etwa durch einen visuellen Hinweis oder
aria-label. - Einzelne Links überschreiben: Interne Navigation sollte im gleichen Tab bleiben. Du kannst
target="_self"am jeweiligen Link setzen, um das Standard-Target zu überschreiben.
Häufige Fehler
Mehrere <base>-Elemente im Dokument. Der Browser verwendet nur das erste <base>-Element und ignoriert alle weiteren. Wenn du versehentlich zwei <base>-Tags hast, wird das zweite komplett ignoriert, ohne Fehlermeldung.
Vergessen, dass Anker-Links betroffen sind. Ein <a href="#abschnitt"> springt normalerweise zu einem Element auf der aktuellen Seite. Mit <base href="https://andere-seite.de/"> wird daraus aber ein Link zu https://andere-seite.de/#abschnitt. Das ist eine häufige Fehlerquelle, die schwer zu debuggen ist.
Trailing Slash vergessen. Wenn du <base href="https://example.com/pfad"> schreibst (ohne Slash am Ende), wird <a href="seite"> zu https://example.com/seite aufgelöst, nicht zu https://example.com/pfad/seite. Der Trailing Slash macht einen Unterschied.
<base> nach Elementen platziert, die URLs verwenden. Das <base>-Element sollte so früh wie möglich im <head> stehen, am besten direkt nach <meta charset>. Elemente, die vor dem <base> stehen und relative URLs verwenden (wie <link> oder <script>), werden noch mit der ursprünglichen Basis-URL aufgelöst.
Browser-Kompatibilität
Das base-Element wird seit den Anfängen des Webs von allen Browsern unterstützt.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Chrome | Komplett | — |
| Firefox | Komplett | — |
| Safari | Komplett | — |
| Edge | Komplett | — |
| Opera | Komplett | — |
Email-Kompatibilität
Das base-Element wird von E-Mail-Clients nicht unterstützt. Die meisten Clients entfernen den gesamten head-Bereich und damit auch das base-Element. Verwende in E-Mails immer absolute URLs.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Apple Mail | Keine | Wird ignoriert. Verwende absolute URLs. |
| Gmail | Keine | Gmail entfernt den head-Bereich komplett. |
| Outlook | Keine | Outlook ignoriert das base-Element. |
| Thunderbird | Keine | Wird nicht ausgewertet. |
| Yahoo Mail | Keine | Yahoo Mail entfernt den head-Bereich. |
Verwandte Elemente
Bleib auf dem Laufenden
Erhalte neue Inhalte direkt in dein Postfach
Was erwartet dich?
Neue Artikel & Videos
Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.
Plattform & Kurs-Updates
Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.
Einmal die Woche in deinem Postfach
Kurz, auf den Punkt, kein Spam.