<base>

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.

Steckbrief <base>

Kategorie: Meta & Scripting
Art: Leeres Element
Attribute: 2
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 04.02.2026

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 href oder target muss 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

2 Attribute

Attribut und Beispiel	Beschreibung
`href` URL href="https://example.com/pfad/"	Die Basis-URL, die für alle relativen URLs im Dokument verwendet wird. Muss eine gültige absolute URL sein.
`target` String target="_blank"	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).

Beispiele

3 Beispiele

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.

index.html

Basis-URL setzen

<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>

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.

index.html

Standard-Target

<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>

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.

index.html

href und target kombiniert

<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

4 Fehler

01 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.

02 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.

03 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.

04 <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

5 von 5

Das base-Element wird seit den Anfängen des Webs von allen Browsern unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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.

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.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<base>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter