Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!

webdesign weisshart Startseite

zurück zum Standard-Style

Externe Links kennzeichnen

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Symbolbild

Ein Hyperlink, kurz: Link, ist ein Querverweis in einem Hypertext, der funktional einen Sprung zu einem anderen elektronischen Dokument oder an eine andere Stelle innerhalb eines Dokuments ermöglicht. Wenn der Hyperlink ausgeführt wird, wird automatisch das darin angegebene Ziel aufgerufen.
Quelle: Wikipedia CC-by-sa 3.0

Ich mag gern wissen, ob ein Link zu einer anderen Stelle innerhalb meines Webauftritts verweist, oder zu einer fremden Site. Deshalb kennzeichne ich Links zu fremden Seiten mit einem Icon.

Dies ist ein solchermaßen gekennzeichneter Demo-Link zu https://example.com.

Das Icon könnte man natürlich in jedem einzelnen Fall manuell in den Quellcode einfügen. Das ist aber

  1. fehleranfällig,
  2. nicht sehr elegant, weil es den Quellcode aufbläht,
  3. im RWD (Responsive Web Design) u. U. hinderlich. Ich will nämlich das Icon auf Smartphones nicht zeigen.
  4. Außerdem hat bei strenger Auslegung von Semantik so ein Icon im Markup (HTML) nichts zu suchen.


Daher füge ich das Icon per CSS ein:

a[href^='http']:not([href*='.deine_domain.de']){ background:url('pfad_zum_bild/icon.png') no-repeat; padding-left:1em; background-position-y: center; background-size: 12px; }

Erklärung zum CSS

Die erste Zeile der CSS-Anweisung, der CSS-Selektor, wählt alle a-Tags mit einem href-Attribut, das mit http beginnt (^=), also sowohl http://… als auch https://…, außer (:not) sie beinhalten (*=) den String '.deine_domain.de'.

Ein nützlicher Nebeneffekt: Durch die Darstellung des Icons als background wird ein Zeilenumbruch zwischen Icon und Linktext zuverlässig verhindert, auch wenn der Linktext unglücklich am Zeilenende zu stehen kommt.

Zusätzliche Kennzeichnung der Links mit einem Tooltip

example.com

Beim Überfahren von externen Links mit der Maus wird ein Tooltip angezeigt: "externer Link …".
Blinden Screen-Reader-Nutzern wird vorgelesen: "externer Link" – wenn der Screen Reader entsprechend konfiguriert ist: Unterstützung des Title-Attributs durch Screen Reader

Um den Tooltip zu erzeugen wird mittels JavaScript ein Title-Attribut eingefügt.

<script> var lnk = document.links; function links() { for (i = 0; i < lnk.length; i++) { if (lnk[i].href.indexOf(document.location.hostname) === -1 && lnk[i].href.indexOf("weisshart.de") === -1 ) { lnk[i].title = "externer Link: " + lnk[i] + lnk[i].title; } } } window.onload=links; </script>

Hinweis zum richtigen Aufruf von Funktionen – hier: "window.onload=links": JavaScript richtig aufrufen

Externe Links in einem neuen Tab öffnen

Verlinkte Seiten öffnen sich normalerweise im gleichen Browsertab. Daran ändert die Kennzeichnung natürlich nichts. Wer Links in einem neuen Browsertab öffnen will, kann das zum Beispiel so: Klick mit der rechten Maustaste, und dann die entsprechende Auswahl treffen (z.B.: "Link in neuem Tab öffnen"). Oder die Strg-Taste beim Klick gedrückt halten (Mac: cmd-Taste).
Oder - exklusiv auf meinen Seiten – mit dieser Technik.

Creative Commons Lizenzvertrag

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

Kommentare

Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.

? Anweisungen zur Eingabe von BB Code Wenn Javascript verfügbar ist, können Sie die obigen Schaltflächen zum Einfügen der folgenden Steuercodes verwenden (an der Cursorposition oder um gegebenenfalls markierten Text):

[b]als wichtig <strong>[/b] hervorgehobener Text
[c]Quellcode[/c] oder optisch hervorgehobenes Zitat