HTML Base-Tag
Der HTML Base-Tag definiert eine Basis-URL für relative Links und beeinflusst das Standardverhalten aller Verweise auf einer Webseite.
Was ist der HTML Base-Tag?
Der Base-Tag (geschrieben als <base>) ist ein HTML-Element, das im <head>-Bereich einer Webseite platziert wird. Er legt eine Basis-URL fest, die als Ausgangspunkt für alle relativen Links und Pfade auf der Seite dient. Außerdem lässt sich darüber ein Standardverhalten für Links festlegen, etwa ob diese in einem neuen Tab geöffnet werden sollen.
Wie funktioniert der Base-Tag?
Ein typisches Beispiel sieht so aus:
<head>
<base href="https://www.beispielseite.de/" target="_blank">
</head>
In diesem Fall werden alle relativen Links auf der Seite automatisch auf die angegebene Basis-URL bezogen. Ein Link wie <a href="kontakt.html">Kontakt</a> wird vom Browser dann als https://www.beispielseite.de/kontakt.html aufgelöst. Durch das target="_blank" würden alle Links zusätzlich in einem neuen Tab geöffnet, sofern bei den einzelnen Links kein anderes Verhalten festgelegt ist.
Wofür wird der Base-Tag eingesetzt?
- Konsistente Verlinkung: Praktisch, wenn auf einer Webseite viele relative Links verwendet werden und diese sich alle auf eine bestimmte URL beziehen sollen.
- Standardverhalten für Links: Mit dem
target-Attribut lässt sich für alle Links der gleiche Standard festlegen, ohne ihn bei jedem Link einzeln anzugeben. - Schutz vor Content-Klau: Wird eine Seite samt HTML-Code kopiert und auf einer fremden Domain verwendet, verweisen alle relativen Links und Ressourcen weiterhin auf den Originalserver. Bilder und Stylesheets werden also vom Original geladen, was Diebstahl erkennbar macht und erschwert.
- Single-Page Applications (SPA): In modernen JavaScript-Frameworks wie React, Vue oder Angular wird der Base-Tag oft genutzt, um die Basis-URL für das interne Routing korrekt zu setzen.
Best Practices für den Base-Tag
- Nur ein Base-Tag pro Seite: Es darf nur ein einziger Base-Tag pro HTML-Dokument verwendet werden. Mehrere Tags werden vom Browser ignoriert oder führen zu unerwünschtem Verhalten.
- Absolute URL verwenden: Die Basis-URL sollte immer eine vollständige absolute Adresse sein (zum Beispiel
https://www.domain.de/), nicht ein relativer Pfad. Das vermeidet Fehler bei der Auflösung. - Frühe Platzierung im <head>: Der Base-Tag sollte möglichst weit oben im
<head>stehen, damit alle nachfolgenden Verweise auf Stylesheets, Skripte und Bilder korrekt verarbeitet werden. - Auswirkungen prüfen: Da der Base-Tag das Verhalten aller relativen URLs verändert, sollte vor dem Einsatz geprüft werden, ob bestehende Links und Ressourcen weiterhin korrekt funktionieren.
Wann ist der Base-Tag weniger sinnvoll?
In vielen modernen Webprojekten wird der Base-Tag bewusst nicht verwendet. Content Management Systeme wie WordPress, Joomla oder Typo3 erzeugen interne Links meist automatisch als absolute URLs. Wer komplett mit absoluten Links arbeitet, braucht den Base-Tag in der Regel nicht. Wird er trotzdem gesetzt, können Konflikte mit Plugins, Sprungmarken (Anker-Links wie #section) oder JavaScript-Funktionen entstehen, die mit relativen URLs arbeiten.
Fazit
Der Base-Tag ist ein kleines, aber mächtiges HTML-Element, das in bestimmten Szenarien sinnvoll ist, etwa in Single-Page Applications, bei komplexen Verzeichnisstrukturen oder als zusätzliche Hürde gegen unerlaubte Kopien einer Webseite. Für klassische WordPress-Seiten und gängige Webprojekte mit absoluten Links wird er nur selten benötigt. Wer ihn einsetzt, sollte die Auswirkungen auf alle internen Verweise im Blick behalten und vorher gründlich testen.