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;
}

Kommentare

  1. 01) 13.05.2009
    Francesco

    Danke für diesen wunderbaren Artikel!

    Kleinere Fragen habe ich allerdings:

    1. Was hat es mit dem geschützten Leerzeichen auf sich? Stellt das Einfügen eines Leerzeichens per Space-Taste irgendein Nachteil dar?

    2. Ist es nachteilig, anstatt der Zeichenfolge der Unicodetabelle direkt den Pfeil im CSS anzugeben?

    Man dankt schon im Vorraus! :-)

  2. 02) 14.05.2009
    David

    Ein geschütztes Leerzeichen unterscheidet sich von einem gewöhnlichen dadurch, dass an der Stelle kein Zeilenumbruch stattfinden darf. D.h. der Pfeil kann im ungünstigen Fall nicht alleine auf die nächste Zeile rutschen. Siehe Wikipedia: geschütztes Leerzeichen

    Du kannst in die CSS auch Reintext als Inhalt für die Pesudoelemente schreiben, klar. Da solche Zeichen allerdings nicht auf der Tastatur sind, finde ich es bequemer, einfach den Hex-Wert zu schreiben. Eine Tabelle für die Zeichen kann man sich ja zu den Lesezeichen legen.

  3. 03) 10.01.2013
    Skornyakov

    Danke, sehr informativ.

Fragen, Ideen oder Kritik? – Hier ist Platz dafür!

Dein Kommentar

Um ein Kommentar abzugeben, reicht der Text im Kommentarfeld. Die Angabe eines Namens wäre nett, ist aber nicht erforderlich.

Du darfst folgenden HTML-Code verwenden, musst aber nicht:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>