The download
attribute is commonly present inside an <a>
tag to mark a hyperlink as “offering a downloadable file”.
It’s a new attribute added in HTML5 that allows your browser to download a file on click.
You may see an example of download
attribute implementation as follows:
<a href="document.pdf" download>Download PDF</a>
Without the download
attribute above, then the browser will navigate to the document.pdf
location and open the file in the browser.
When you specify the download
attribute, then the computer will either:
- Save the file in the default download location defined in your browser settings
- Or ask you where to save the file before downloading
The download
attribute also accepts a value that you can specify as the filename alias:
<a href="document.pdf" download="HTML5_download.pdf">Download PDF</a>
When you download the document.pdf
file, the browser will automatically rename the file with the download
attribute value.
download attribute restrictions
The download
attribute needs to refer to a file that has the same origin, or it won’t be executed by the browser.
For example, if the download page is located at sebhastian.com/html5download.html
then the downloadable file must also be located at sebhastian.com
.
When you refer to a cross-origin file, the browser will ignore the download request and open the file as a normal hyperlink.
download attribute browser support
The download
attribute is currently supported by all major browsers like Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge.
Here’s a screenshot of browser versions supporting the attribute:
You can check out You can check out currently supported versions for the download
attribute at caniuse.com
And that’s how the HTML5 download
attribute works 😉