A Look Into: HTML5 Download Attribute
Creating a download link is usually an easy task. All we need to do is use an anchor tag <a>, and add the reference URL pointing to the file. But some file types pose a technical problem – PDF, image and text files will open in the browser instead of being downloaded when a user clicks on the relevant link(s).
In the past, complicated setups and hacks on the server side were required to download these files (PDF, image, text, etc) by force. For that reason, HTML5 has a new attribute called download, which is much easier to implement.
HTML5 <article> and <section> Elements
HTML5 comes with a bunch of new elements with more to be recommended in the future. However, there... Read more
Using Download Attribute
The download attribute does two things: download a file by force, and rename the file with the name specified in the attribute upon downloading.
For example, we have here a PDF and an Image file that are named randomly.
<a href="file/e4ptK9qd7bGT24e.pdf">Download PDF</a> <a href="file/KU7Ba93M7t7ghbi.jpg">Download Image</a>
So, without the download attribute, these two files will open in the browser.
But when we add the download attribute like so:
<a href="file/e4ptK9qd7bGT24e.pdf" download="10 Things You Should Know About Passion.pdf">Download PDF</a> <a href="file/KU7Ba93M7t7ghbi.jpg" download="wii.jpg">Download Image</a>
The files will be downloaded and renamed, as shown in the following screenshot.
We have created a demo page for you to see this attribute in action.
Conclusion
HTML5 has introdued some new elements and attributes that make life easier for web developers. This download attribute is indeed a very handy addition. Unfortunately, the browsers are slow to catch up – it’s currently only supported on Firefox 20+, Chrome 14.0 and Opera 15.0.