Target _blank en enlaces con XHTML Strict

Pasar validación W3C: target blank en documentos HXTML 1.0 estricto y XHTML 1.1.

Valid XHTML 1.1
XHTML 1.1 Válido

En HTML, el atributo target se usa para especificar el destino de los vínculos en las etiquetas <a> o <area> de documentos del tipo HTML 4, HTML 5, XHTML Frameset o HXTML 1.0 transitional, las opciones válidas son:

  • target="_blank" – Abre el enlace en una nueva ventana
  • target="_top" – Abre el enlace al inicio de la misma ventana, escapando incluso de los frames.
  • target="_self" – Abre el enlace en el mismo frame, si el atributo TARGET no se especifica, esta es la opción por defecto.
  • target="_parent" – Abre el enlace en el primer frame de un documentos con frames.
  • target="NombreDelFrame" – Abre el enlace en el frame con el nombre especificado.
  • target="new" – Abre enlaces en una nueva ventana, este atributo NO ES VÁLIDO y no se recomienda su uso, en su lugar se debe usar _blank.

XHTML Strict y target = _blank

En XHTML estricto el atributo target no es válido en ninguna etiqueta, los TARGETS son para uso exclusivo de los doumentos con frames, si colocamos TARGET en un documento del tipo XHTML 1.0 Strict o XHTML 1.1, nuestra página no pasará la Validación XHTML Strict W3C.

Cuando buscas una solución en internet, generalmente te dicen que no uses el atributo target o bien, que uses XHTML 1.0 Transitional (donde sí se permite usar target y otros atributos o etiquetas html no válidos); sin embargo, esto no es una solución ni resuelve el problema.

La solución definitiva es muy simple gracias a javascript y el evento onclick, esto funcionará en todos los navegadores:

  1. Para elementos individuales, usar onclick de la siguiente forma:
    onclick="this.target='_blank'"
    Ejemplo de aplicación:
    <a href="https://daxmx.net/" onclick="this.target='_blank'" rel="noopener">DaxMX</a>
  2. Para aplicar a TODOS los enlaces de la página, escribí esta función Javascript:
    Nota: Colocar la función dentro de las etiquetas <head> y </head>:

    <script>
    function enlaceBlank() {
    	for(var i = 0; document.links[i]; i++) {
    		document.links[i].target = '_blank';
    	}
    }
    </script>

    Podemos cargar la función en onload dentro de la etiqueta <body>:

    <body onload="enlaceBlank()">

    O bien, podemos llamar a la función desde el final de nuestra página antes de cerrar </body>:
    <script>enlaceBlank();</script>
    </body>
    </html>

Si tienes dudas o sugerencias, deja una respuesta en la caja de comentarios.

Desde México, DaxMX.

Nota: Tutorial actualizado del original publicado en dasumo.com en Mayo de 2009.

5 comentarios

Añadir respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *