W3docs

Atributo download de HTML

The HTML download attribute specifies that the target will be downloaded when clicking on the hyperlink. Read and find out on what elements it can be used.

El atributo download de HTML especifica que el destino se descargará al hacer clic en el hipervínculo. Solo se utiliza si el atributo href está establecido.

Nota: El atributo download solo funciona con URLs del mismo origen, URLs blob: o URLs data:. Se ignora para recursos de orígenes cruzados.

El valor del atributo especifica el nombre del archivo descargado. El navegador utiliza el valor exactamente como se escribe, sin agregar automáticamente una extensión de archivo. Si se omite el valor, el navegador utiliza el nombre de archivo original.

Puedes usar el atributo download en los siguientes elementos: <a> y <area>.

Sintaxis

Sintaxis del atributo download de HTML

<a download="filename">&lt;/a&gt;

Ejemplo del atributo download de HTML utilizado en el elemento <a>:

Ejemplo del atributo download de HTML utilizado en el elemento <a>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Click on the  logo to download it:</h1>
    <p>
      <a href="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" download>
        <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3Docs" width="190" height="45" />
      </a>
    </p>
  </body>
</html>

Ejemplo del atributo download de HTML utilizado en el elemento <area>:

Ejemplo del atributo download de HTML utilizado en el elemento <area>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on one of the HTML, CSS or PHP logo and download it:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"  width="250" height="150" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" download />
      <area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" download />
      <area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" download />
    </map>
  </body>
</html>

Práctica

Práctica

¿Qué hace el atributo download de HTML?