Ein bislang fast nie benutztes Attribut des <a> Tags ist das Attribut hreflang, welches beschreibt in welcher Sprache die Seite geschrieben ist, zu der ein Link führt. Dieses Attribut darf nur gesetzt werden, wenn auch das href Attribut angegeben wurde.
Doch scheint das hreflang Attribut keinen wirklichen Nutzen zu haben, da es ja in keiner Weise auf der angezeigten HTML Seite dargestellt wird. In den nächsten Abschnitten möchte ich zwei Wege zeigen, wie man das Attribut doch sichtbar machen kann.
Die CSS Methode
Moderne Browser wie Firefox erlauben es per CSS auf Elemente der Seite mit bestimmten Attributen zuzugreifen und diesen dann einen Style zuzuweisen. Dies geschieht, indem man den Attribut Namen in eckigen Klammern hinter den Tag Namen schreibt:
a[hreflang] {
...Styles...
}
Mit ein paar weiteren 'Tricks' ist es somit möglich den Inhalt von hreflang sichtbar zu machen und z.B. hinter das entsprechende Tag anzufügen:
a[hreflang]::after{
content:" ["attr(hreflang)"]";
}
Als Ergebnis bekommt man dann einen Link in folgender Form:
Der Nachteil dabei ist, wie ich schon erwähnt habe, dass solche CSS Definitionen nur in modernen Browsern funktionieren und somit nicht in älteren Browsern wie dem Internet Explorer!
Darum habe ich eine weitere Möglichkeit der Umsetzung ersonnen...
Die JavaScript Methode
JavaScript unterstützen heute die meisten Browser. Wenn man also sichergehen will, das die Darstellung der Sprache in all diesem Browsern funktioniert, kann man folgendes Script verwenden.
function showHreflang() {
for (var i = 0; i < document.links.length; i++) {
var link = document.links.item(i);
var hreflang = link.getAttribute("hreflang");
if (hreflang != null & hreflang.length > 0) {
var langText = document.createTextNode(" [" + hreflang + "]");
var supNode = document.createElement("b");
supNode.appendChild(langText);
link.parentNode.insertBefore(supNode, link.nextSibling);
}
}
}
Das Script durchsucht einfach alle Links auf der Seite, schaut nach ob das hreflang Attribut definiert wurde und einen Inhalt besitzt und hängt dann den Inhalt in eckigen Klammern hinter den entsprechenden Link.
Sollte der Benutzer JavaScript in seinem Browser ausgeschaltet haben, schadet es auch nichts, dann wird einfach nichts angezeigt, womit derjenige dann auf jeden Fall leben kann.
Hier das Ergebnis
Ein Link zu einer Seite auf Deutsch Google.de und hier einer zu einer englischen Seite Google.com. Und dann darf natürlich auch ein Link nicht fehlen, der keine hreflang Angabe besitzt webmatze.de!