Conceptos básicos sobre XHTML, CSS y JavaScript.

La especificación XHTML Strict no permite el uso del atributo target en los hiperenlaces. Si queremos un código que cumpla la especificación y que muestre los enlaces como este, tendremos que usar JavaScript.

En esta entrada comento como está hecho esto en este sitio usando jQuery.

Un enlace "externo" se define con el siguiente fragmento XHTML:

<a href="http://jquery.com/" title="jQuery" rel="external">jQuery</a>

El atributo rel se utiliza para indicar de que forma esta relacionado este enlace con la página donde está definido. La especificación no define los posibles valores de este atributo por lo que se puede usar libremente. En este caso usaremos el valor "external" para diferenciar los enlaces "externos" de los que no lo son.

El siguiente estilo CSS se usa para mostrar la imagen a la derecha del texto del enlace:

.externalLink {
    background: url(/img/external.gif) right no-repeat;
    padding-right: 15px;
}

Finalmente unimos todo con el siguiente código JavaScript:

$(function(){
    // Establece el atributo "target" a "_blank" y
    // añade una indicación al título (tooltip) del enlace.
    $("a[rel~='external']").each(function() {
        this.target = "_blank";
        this.title = "Enlace externo: " + this.title;
    });
    // Aplica el estilo "externalLink" a los enlaces que NO contengan una imagen.
    $("a[rel~='external']:not(:has(img))").addClass("externalLink");
});

En este código se aprecia la potencia de selección de jQuery. La expresión

a[rel~='external']:not(:has(img))

selecciona todos los elementos a cuyo atributo rel contenga "external" y que no tengan elementos hijos de tipo img.

Solo es necesario un poquito de imaginación para conseguir grandes cosas con librerías como jQuery.