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

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