Skip to content
Related Articles

Related Articles

Improve Article

How to specify that the target will be downloaded when a user clicks on the hyperlink in HTML5 ?

  • Last Updated : 14 May, 2021

In this article, we will learn to specify the target to a link when opened by the user which will further download the image or any other file. This link is used when the user needs to directly download the file when clicked on hyperlink.

Approach:

In order to do that we have to use an attribute called download which is used in <a> tag. It is used to download the element when the user clicks on the hyperlink and used only when href attribute is set. We can also provide a value to it, which will give a name to the downloaded file.

Syntax: 

<a href = "file" download = "file name">

Example 1:



HTML




<!DOCTYPE html>
<html lang="en">
<!--body tag starts from here-->
<body>
    <h2 style="color:#0F9D58;">GeeksforGeeks</h2>
    
    <b>
     Download target when a user clicks 
     on the HTML5 hyperlink
    </b>
    <br/>
    <p>
     A link below downloads the image 
     file when clicked on it
    </p>
      
    <a href="gfg1.png" download="logo of gfg">
     Click to download the logo of GeeksforGeeks
    </a>
</body>
</html>

Output: We can see that the value which we gave in the download attribute is shown as the name of the downloaded file.

Downloaded file

Example 2:




<!DOCTYPE html>
<html>
  <body>
    <p>Click on image to download</p>
  
    <a href=
      download>
      <img
        src=
        alt="gfg"
        width="500"
        height="200"
      />
    </a>
  </body>
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :