Weblog von David Naber – Arikelansicht: „Externe Links auszeichnen und hervorheben“

Geht es euch auch so? Wenn ich durch das Web surfe und mir nicht sicher bin ob der Link da nun auf eine interne Seite zeigt, oder zu einer fremden Seite führt, so wandert der Blick meist erstmal Richtung Statuszeile im Browser, um zu sehen, wo es denn hin geht. An dieser Stelle finde ich es immer von Vorteil, wenn der Autor seine externen Links, in Form einer kleinen Pfeilgrafik zum Beispiel, gesondert hervorhebt.

Bisher habe ich das in diesem Fall naheliegendste getan: den Links eine extra Klasse verpasst und diese dann per CSS entsprechend geschönt.

<a href="#" class="extern">Linktext</a>

a.extern {
	background: transparent url(extern.gif) center left no-repeat;
	padding-left: 17px;
}

Nun sieht man seit einiger Zeit, dass vor allem CMS und Blogsysteme von vornherein externe Links gern mal mit dem Attribut rel und den Werten external (und nicht selten mit nofollow) auszeichnen. Dass nofollow als präventiver Spamschutz unsinnig ist, hab nicht nur ich schon mal geschrieben. Mir gehts es hier aber um das external. Das taucht zwar erst in der vorläufigen HTML 5 Spezifikation auf, validiert aber auch prima mit den HTML 4.01 und XHTML 1.0 Doctypes. Wenn das Attribut also schon da ist, wozu eine extra Klasse vergeben? CSS bietet dafür den Attributselektor an:

a[rel~=external] {
	background:transparent url(extern.gif) center left no-repeat;
	padding-left:17px;
}

<a href="#" rel="external">Externer Link</a>

Bis hierher versteht das sogar der IE 7. Die Puristen unter uns verzichten vieleicht gern auf überflüssigen Grafikballast. Warum auch nicht, die Unicodetabelle hält so einiges an Pfeilen bereit. So sieht die Kür im CSS aus:

a[rel~=external]:after {
	/**  
	 * Allen Links folgt ein  geschütztes Leerzeichen U+00A0 
	 * und ein Nord-Ost-Pfeil U+2197
	 */
	content: "0A02197";
}

Hier steigt allerdings auch der IE 7 aus, der mit den Pseudoelementen :before und :after nicht klar kommt. Die Extrawurst könnte in Form einer Hintergrundgrafik gereicht werden.

Sieht man mal von der Tatsache ab, dass sowohl der IE6 als auch Mobile Geräte die Attributselektoren ignorieren, und legt man Wert auf schlankes und semantisches Markup, so kann man die Umsetzung mit Hilfe des rel-Attribut der Variante mit eigener Klasse durchaus vorziehen, da so gleichzeitig ein semantischer Mehrwert geschaffen ist.

Das bleibt natürlich nicht auf externe Links beschränkt. Vorhergehende, oder nachfolgende Seiten eines zusammenhängenden Artikels werden mit rel="prev" bzw. rel="next" ausgezeichnet. Ein Pfeil nach links oder nach rechts verdeutlicht dann die Sache ( ←,→ )

Eine kurze Bemerkung zu dem Target-Attribut sei noch gestattet. Sucht man nach Informationen zu rel und external, findet man hier und da Vergleiche zu target="_blank" oder gar Versuche, das fehlende Target-Attribut in den Srict-Doctypes durch rel="external" und diverse JavaScripts zu ersetzen. PFUI SPINNE! Liebe Webmaster, lasst dem Besucher doch bitte selber die Entscheidung was er wo in welchem Fenster oder Tab öffnet! Danke.

Nachtrag 25.05.09
In den Kommentartexten werden die Links nicht automatisch mit dem Attribut rel="external" versehen. Da ich nur ungern in dem WordPress-Code herumdocktoren möchte, genemige ich mir hier schon eine kleine portion CSS 3:

Alle Links in den Kommentaren, die mit http:// beginnen, bekommen einen Pfeil hinten angesetzt:

a[href^="http://"]:after {
	content: "0A02197";
}

Die Links, die auf meine Subdomain zeigen, bekommen den wieder überschrieben:

a[href^="http://blog.dnaber.de"]:after {
	content: "" ! important;
}