Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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: In this example, we will download the target when the user clicks on the hyperlink.

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: In this example, we will use the download attribute.

HTML

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

 



Last Updated : 31 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads