HTML <base>-Tag
Das HTML <base>-Tag legt eine absolute Basis-URL für alle relativen URLs und ein Standard-Linkziel fest. Attribute, Verwendung und der Anker-Fallstrick.
Das HTML-Tag <base> legt eine einzelne absolute (Basis-)URL fest, die der Browser verwendet, um jede relative URL im Dokument aufzulösen — Links, Bilder, Stylesheets, Skripte und Formularaktionen. Es kann außerdem ein Standard-target festlegen, sodass Links in einem bestimmten Fenster oder Tab geöffnet werden, ohne target bei jedem <a>-Element zu wiederholen.
Diese Seite erklärt, was <base> bewirkt, wann es sinnvoll eingesetzt wird, welche Attribute es akzeptiert, und den wichtigen Fallstrick, der den meisten beim ersten Mal auffällt: wie <base href> das Verhalten von Anker-Links auf derselben Seite verändert.
Warum und wann <base> verwendet werden sollte
<base> verschiebt den „Ausgangspunkt" für relative Pfade. Ohne <base> wird eine relative URL gegen die eigene Adresse des Dokuments aufgelöst. Mit <base> wird jede relative URL stattdessen gegen die angegebene href aufgelöst. Das ist gelegentlich genau das, was man möchte:
- Assets, die von einem CDN ausgeliefert werden. Wenn das Markup relative Pfade wie
img/logo.pngverwendet, die echten Dateien aber auf einem CDN liegen, verweist ein einzelnes<base href="https://cdn.example.com/assets/">alle Pfade auf das CDN, ohne jeden Pfad einzeln zu ändern. - Site-Migrationen und Reverse-Proxies. Wenn ein Dokument verschoben oder unter einem anderen Pfad als dem ursprünglich vorgesehenen ausgeliefert wird, kann
<base>dafür sorgen, dass relative Links weiterhin auf den ursprünglichen Ort zeigen. - Static-Site-Generatoren und Templating. Ein gemeinsames Layout, das unter vielen URLs gerendert wird, kann eine Basis deklarieren, damit Partials nicht wissen müssen, wie tief sie verschachtelt sind.
Verwenden Sie <base> sparsam. Da <base> jede relative URL auf der Seite auf einmal beeinflusst — einschließlich solcher, die man selbst nicht geschrieben hat — ist es ein grobes Werkzeug. Die meisten modernen Projekte bevorzugen korrekte relative oder root-relative Pfade oder einen Build-Schritt gegenüber einem globalen <base>.
Auf die Basis-URL über JavaScript zugreifen
Die aufgelöste Basis-URL eines Dokuments kann mit document.baseURI gelesen werden. Hat das Dokument kein <base>-Element, fällt dies auf die eigene Adresse des Dokuments zurück (document.location.href).
// With <base href="https://www.w3docs.com/"> in the document:
console.log(document.baseURI); // "https://www.w3docs.com/"Syntax
Das <base>-Tag ist ein leeres Element (void element), was bedeutet, dass das schließende Tag nicht erforderlich ist. In HTML5 ist der selbstschließende Schrägstrich optional, in XHTML muss das <base>-Tag jedoch geschlossen werden (<base />).
Auf einer Seite darf nur ein <base>-Tag verwendet werden, und es muss im <head>-Element platziert werden. Es sollte so früh wie möglich eingefügt werden, da seine Wirkung ab der Stelle gilt, an der es angegeben ist.
Werden mehrere <base>-Elemente verwendet, werden nur das erste href- und target-Attribut berücksichtigt. Alle weiteren werden ignoriert.
Beispiel des HTML-<base>-Tags
Das folgende Dokument setzt beide Attribute gleichzeitig. Die Basis-URL wird zu https://www.w3docs.com/, sodass der relative Link /css3-maker/border-radius zu https://www.w3docs.com/css3-maker/border-radius aufgelöst wird. Und da target="_blank" auf <base> gesetzt ist, öffnet sich der Link in einem neuen Tab, obwohl das <a>-Element selbst kein target besitzt.
<!DOCTYPE html>
<html>
<head>
<title>HTML base tag</title>
<base href="https://www.w3docs.com/" target="_blank" />
</head>
<body>
<a href="/css3-maker/border-radius">Try CSS Maker Tool</a>
</body>
</html>Bearbeiten Sie den Ausschnitt unten: Ein Klick auf den Link öffnet w3docs.com in einem neuen Tab — gesteuert ausschließlich durch das <base>-Tag.
Nur href verwenden (der häufige Fall)
Meistens möchte man nur relative URLs umleiten, nicht die Art ändern, wie Links geöffnet werden. Setzen Sie href und lassen Sie target weg:
<head>
<base href="https://cdn.example.com/assets/" />
</head>
<body>
<!-- resolves to https://cdn.example.com/assets/img/logo.png -->
<img src="img/logo.png" alt="Logo" />
</body>Nur target verwenden
Ein Standard-target kann auch ohne Änderung der Basis-URL gesetzt werden. Hier werden relative URLs weiterhin gegen die eigene Adresse des Dokuments aufgelöst, aber jeder Link öffnet sich in einem neuen Tab:
<head>
<base target="_blank" />
</head>
<body>
<!-- no target attribute, yet opens in a new tab -->
<a href="/pricing">Pricing</a>
</body>Wenn Links über target="_blank" in einem neuen Tab geöffnet werden, fügen Sie aus Sicherheitsgründen rel="noopener noreferrer" zu den <a>-Elementen hinzu. <base> kann rel nicht setzen, daher muss es bei jedem Link angegeben werden. Ohne noopener kann die geöffnete Seite über window.opener auf Ihre Seite zugreifen und Tabnabbing versuchen.
Fallstrick: <base href> unterbricht Anker-Links auf derselben Seite
Dies ist die häufigste Überraschung. Ein Fragment-Link wie <a href="#section"> ist eine relative URL — er besteht nur aus einem Fragment ohne Pfad. Wenn ein <base href> vorhanden ist, löst der Browser dieses Fragment gegen die Basis-URL auf, nicht gegen die aktuelle Seite.
Mit <base href="https://www.w3docs.com/"> scrollt ein Klick auf <a href="#section"> daher nicht zum seiteninternen Element mit id="section". Stattdessen wird zu https://www.w3docs.com/#section navigiert — in der Regel eine völlig andere Seite.
<head>
<base href="https://www.w3docs.com/" />
</head>
<body>
<!-- BAD: navigates to https://www.w3docs.com/#contact -->
<a href="#contact">Contact</a>
<!-- GOOD: stays on the current page -->
<a href="/current-page#contact">Contact</a>
<h2 id="contact">Contact</h2>
</body>Die Lösung besteht darin, seiteninternen Anker-Links als absolute oder root-relative URLs zu schreiben, die den Pfad der aktuellen Seite enthalten, damit das Fragment beim richtigen Dokument landet. Mehr zum Auflösen von Pfaden erfahren Sie unter HTML-Dateipfade.
Attribute
Das <base>-Tag kann entweder das Attribut href oder target enthalten, oder beide. Ist keines angegeben, hat das Tag keine Wirkung.
| Attribut | Wert | Beschreibung |
|---|---|---|
| href | absolute URL | Die Basis-URL für alle relativen URLs auf der Seite. Es sollte eine absolute URL sein (ein relativer Wert ist unzuverlässig und wird gegen die eigene Adresse des Dokuments aufgelöst). |
| target | Name des Browsing-Kontexts | Standard-Ziel für Hyperlinks und Formulare. Akzeptiert die vier reservierten Schlüsselwörter unten oder den Namen eines beliebigen Browsing-Kontexts (zum Beispiel den name eines Iframes oder eines benannten Fensters). |
Die reservierten Schlüsselwortwerte für target sind:
| Wert | Beschreibung |
|---|---|
_blank | Öffnet den Link in einem neuen Fenster oder Tab. |
_self | Öffnet den Link im aktuellen Fenster (Standard). |
_parent | Öffnet den Link im übergeordneten Browsing-Kontext. |
_top | Öffnet den Link im obersten (vollständigen) Browsing-Kontext. |
Ein benutzerdefinierter Name wie target="preview" zielt auf einen Browsing-Kontext mit diesem Namen — zum Beispiel <iframe name="preview"> — und wird als neues Fenster erstellt, wenn keines mit diesem Namen vorhanden ist.
Besonderheiten und Wechselwirkungen
<link rel="canonical">. Eine kanonische URL sollte als absolute URL geschrieben werden. Verlassen Sie sich nicht auf<base>, um ein relatives<link rel="canonical" href="...">in die richtige Adresse umzuwandeln — machen Sie den kanonischen Wert selbst absolut. Siehe<link>.<form action="">. Dieactioneines Formulars wird ebenfalls gegen die Basis-URL aufgelöst. Ein leeresaction=""sendet normalerweise an die aktuelle Seite; mit einem<base href>wird stattdessen an die Basis-URL gesendet, was selten beabsichtigt ist.- Die Platzierung ist wichtig.
<base>wirkt nur auf URLs, die nach ihm im Quellcode erscheinen. Platzieren Sie es ganz oben im<head>, vor allen<link>-,<script>- oder anderen URL-tragenden Elementen.