HTML base • Basis-URL der Webseite

HTML base, Basis-URL der Webseite

HTML base definiert die Basis-URL aller relativen URLs einer Webseite und erlaubt relative Adressen an beliebigen Stellen im HTML-Dokument. Interessanterweise muss die Basis-URL keine absolute Adresse sein, sondern kann selber auch relativ sein.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Es kann nur ein base-Tag geben

Das HTML base-Element darf nur einmal gesetzt werden und muss immer zwischen dem öffnenden und schließenden head-Tag stehen.

<base href="https://www.mediaevent.de/javascript/" />

Nützlich ist das base-Tag beim Anlegen und Testen von Webseiten. Wenn Bilder und Scripte nicht mit der vollen URL – z.B.

https://meineSeite.de/img/meinBild.png

angesprochen werden, sondern mit einer relativen Adresse

img/meinBild.png

wird diese URL immer um das Verzeichnis aus dem href-Attribut des base-Tags ergänzt. Liegen Seiten für Tests oder während der Entwicklung auf dem lokalen Rechner oder einem Verzeichnis im Netzwerk, findet der Browser ansonsten Ressourcen wie dieses Bild nicht.

Würden z.B. alle Medien und Links einer Seite in ein versioniertes Verzeichnis verschoben, müsste nur <base href="2017-10/"> in den Kopf der Seite eingefügt werden.

base-Tag für Webseiten-Tests auf dem lokalen Rechner

Durch <base href="https://meineSeite.de/" /> wird der Browser alle URLs, die nicht voll durch http:// bzw. https:// und den Domainnamen qualifiziert sind, durch die base-URL ersetzen und sich das Bild aus dem Webverzeichnis laden.

So muss das Verzeichnis /img nicht ebenfalls zum Testserver kopiert werden, Formulare, die auf dem Testserver u.U. nicht ausführbar sind, wären während der Tests genauso verfügbar wie Javascript-Dateien und CSS-Dateien.

Für dieses Szenario müssen alle Verweise auf dem selben Level sein … wird z.B. https://meineSeite.de/blog als Base für alle Verweise eingesetzt, müssen auch alle Links von diesem Verzeichnis ausgehen.

Bei Umzügen der Seiten in eine andere Domaine wird die base-Angabe allerdings zu einem Hindernis. Das base-Tag hat zudem einen großen Teil seiner Bedeutung durch den Einsatz von Content Management Systemen verloren.

Attribute für das base-Tag

href
Das Attribut href ist erforderlich. Es definiert die Basis-URL.
target
target ist der vorgegebene Name eines Frames oder eines Fensters, in dem alle Zielseiten erscheinen sollen, wenn ein Link auf Ihrer Seite geklickt wurde. Die vier reservierten Namen sind
_blank öffnet alle Links in einem neuen Fenster,
_parent öffnet Links im übergeordneten Frame,
_self öffnet Links im selben Fenster
_top öffnet Links direkt im Browserfenster und nicht als Frame der verlinkenden Seite.

Wird das target-Attribut auf _blank gesetzt, würde jeder Klick auf einen Link eine neue Seite öffnen. Damit geht man besser ausgesprochen vorsichtig um, denn viele Benutzer werden dieses Verhalten ablehnen. Wenn Links schon in einem neuen Tab geöffnet werden sollen – dann über ein target-Attribut im jeweiligen Link-Tag oder per Javascript.

base Tag mit target-Attribut

Wenn der Besucher über einen Link von einer anderen Webseite auf die aktuelle Seite kam, kann das target-Attribut absichern, dass die aktuelle Seite nicht als Frame der linkenden Seite erscheint – also immer das obere Fenster ist.

Frames und Framesets gehören nicht mehr zu HTML5 und sind so gut wie ausgestorben.

Beispiel für den Einsatz des base-Tags

Um eine Seite auf dem lokalen Rechner zu testen und anstelle der lokalen Adresse 127.0.0.1 mit der »wahren« Adresse zu arbeiten:

<head> 
<base href="https://www.mediaevent.de/css/" /> 
</head> 
<body> 
    <img src="meinPng.png" /> 
    ...

Der Link im body-Element wird aufgelöst zu:

//www.mediaevent.de/css/meinPng.png

Während wir bei Links das Protokoll nicht vor die URL schreiben müssen, sondern der doppelte Schrägstrich // schon zur Kennzeichnung einer absoluten Adresse reicht, braucht base allem Anschein nach das Protokoll https oder http im href-Attribut.

base-Tag und Anker

Das base-Tag verändert auch einfache Anker-Links. Ein base-Tag überschreibt die Adresse eines internen Links <a href='#anchor1'>Anker</a>.