HTML download Attribute

The HTML "download" attribute specifies that the target will be downloaded when clicking on the hyperlink. It is used only if the "href" attribute is set.

The value of the attribute is the name of the downloaded file. The browser automatically identifies the correct file extension and adds it to the file (e.g., .img, .txt, .pdf,). The browser will use the original filename if the value is omitted.

You can use the "download" attribute on the following elements: <a> and <area>.

Syntax

<tag download></tag>

Example of the HTML "download" attribute used on the <a> element:

<!DOCTYPE html>
<html>
  <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>

Example of the HTML "download" attribute used on the <area> element:

<!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>



Do you find this helpful?

Related articles