Artikel-Hilfsmenü
Mittwoch, 1. Januar 2020 – aktualisiert am Sonntag, 4. September 2022
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.
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
- fehleranfällig,
- nicht sehr elegant, weil es den Quellcode aufbläht,
- im RWD (Responsive Web Design) u. U. hinderlich. Ich will nämlich das Icon auf Smartphones nicht zeigen.
- 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
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.
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.