W3docs
en
Log in

HTML download Attribute

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.

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.

Note: The download attribute only works for same-origin URLs, blob: URLs, or data: URLs. It is ignored for cross-origin resources.

The value of the attribute specifies the name of the downloaded file. The browser uses the value exactly as typed, without automatically adding a file extension. If the value is omitted, the browser uses the original filename.

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

Syntax

Syntax of the HTML download Attribute

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

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>
Try it Yourself »

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>
Try it Yourself »

Practice

Practice

What does the HTML download attribute do?