Nuevos atributos para enlaces en HTML5: download, media, ping

Parece que últimamente se han decidido a añadir algunos atributos al elemento A: download, media, ping. Rellenan algunas carencias que tenía hasta ahora el elemento de enlace.

Atributo download

El atributo download complementa al atributo href en dos aspectos:

  • Le indica al navegador que es una descarga, por lo que éste no lo mostrará como enlace visitado.
  • El nombre del archivo descargado no es el que se proporciona en el href, sino el proporcionado en download.

En el siguiente ejemplo el archivo no se descargaría como 78e65784668.pdf, sino como Informe Marzo 2014.pdf:

<a href="archivos/78e65784668.pdf"
   download="Informe Marzo 2014.pdf">Informe Marzo 2014</a>

De este modo aunque el enlace nos de un nombre sin significado, al descargar si se obtiene con un nombre más descriptivo.

También puede utilizarse con binarios embebidos:

<a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCA..."
   download="prueba_de_imagen.png">Prueba de imagen</a>

Ejemplo: Prueba de imagen.

Compatibilidad

Soportado, salvo Internet Explorer y Safari.

Atributo media

Su uso en el elemento de enlace es similar al que se venía haciendo en el elemento LINK. Podría resultar útil para descargas en las que haya que diferenciar tamaños de pantalla.

<ul>
  <li>
    <a href="download/320" media="min-width: 320px">
      <img src="files/imagen_320.jpg" alt="Texto alternativo">
    </a>
  </li>
  <li>
    <a href="download/1382" media="min-width: 1280px">
      <img src="files/imagen_1280.jpg" alt="Texto alternativo">
    </a>
  </li>
</ul>

Compatibilidad

Sin soporte.

Atributo ping

Sirve para recuperar información de las acciones realizadas sobre el enlace por parte del usuario. En el futuro puede evitar o minimizar la necesidad de Javascript para la recogida de estadísticas de uso de los sitios

<ul>
  <li>
    <a href="/ruta/enlace/1" ping="/track/ruta/enlace/1">Enlace 1</a>
  </li>
  <li>
    <a href="/ruta/enlace/2" ping="/track/ruta/enlace/2">Enlace 2</a>
  </li>
</ul>

Compatibilidad

En este momento sólo lo soportan Safari, Chrome y Firefox (desactivado por defecto).

Saber más