How to Create a Download Link in HTML
You can easily create navigational links in HTML but when it comes to creating links for downloading files, it may get a little tricky. In this HTML tutorial, I will demonstrate how to create download links with the help of some examples.
In HTML, you can create a link on your web page using the <a> element, like the following:
<a href="my-page.html">My Link</a>
The above code will create a link like this. The content of the <a> element (My Link) is the name of the link and the value of the href attribute (my-page.html) is the target page of the link.
HTML Links with Files
Though the link element is mainly intended for navigational purposes such as the links in your website's navigation menu or links to the inner pages or other websites, you can also use the link element to create file download links. What you need in order to provide a download link for a file that is stored on your website is simply to place a link on your page and target that file with the link's href attribute like the following:
<a href="file.txt" target="_blank">Download File</a>
The default behavior of the above link code will be to open the text file (file.txt) in a new browser tab. However, the visitors can download the text file and save to their computer by right clicking on it and selecting Save Link As... from the dropdown menu. For example, the below link targets the robots.txt file of this website. If you click on the link, the file will be opened in a new tab, but if you right click and save it, it will be downloaded to your computer.
Download (Right click > Save Link As...)
As a side note, the robots.txt file is used to provide instructions to search engine spiders and other bots. You can check how to prevent search engines to learn more about the robots.txt file.
TIP: You can make a link open in a new browser tab by adding the target attribute with _blank value like this:
<a href="link" target="_blank">Link</a>
Also feel free to check our other HTML tutorials if you would like to refresh your HTML knowledge.
HTML Link with Download Attribute
Starting with HTML5, you can now create pure download links, i.e. the user won't need to right click on the link and save, thanks to the download attribute. You can add a download attribute to a file link to make it available for download like the following:
<a href="/images/my-image.jpeg" download>Download Image</a>
Using our example of the robots.txt file, if you click on the following link, the file will be automatically downloaded to your computer. Your browser will ask for confirmation if it is not set up to accept downloads automatically.
The download attribute requires a file to be specified with the href attribute in order to work. If you do not specify a value for it, the original file name will be used while downloading the file. If you specify a different name in the download attribute's value, that name will be used for the saved file instead. Let's see an example below:
<a href="/reports/u8009snKusz12j7.pdf" download="stats-2016.pdf">Download 2016 Stats</a>
This is especially useful if you have a file generation system where the output files have temporary, meaningless names in order to prevent misuse of non-allowed third parties. With the download attribute value, you can specify a simple and meaningful file name (stats-2016.pdf) as shown in the above example.
TIP: You can also check the following tutorials to learn different ways for downloading files from your website:
How to Download a Text File with JavaScript
How to Download a File with PHP