HTML5 Download Attribute

With the use of the download attribute, you can trigger the browser to download the referred asset instead of opening it.

With the HTML5 arrive we got some huge and cool stuff like the Storage, History, Web Workers API-s but the update was not just about these features. There is a lot more little piece like the download attribute which is not a popular or often used part, but sometimes it can be handy.

The attribute purpose is to make assets downloadable. The modern browsers try to open every external resource like the PDF or image files. But what is the situation if you like to avoid this behavior? You simply apply the download attribute to the <a> tags with the specific URLs like the following:

<a href="/images/my-image.jpg" download>

On the top of this implementation, you can use another attribute to tell the browser to rename the file to something else. This modification can be useful because usually this type of downloadable content generated by dynamically and the name is a unique string.

<a href="/images/my-image.jpg" download="new-name-for-the-image">

Of course, there is just a few use case for this solution, but it is still an opportunity for the developer to use it and use it cleverly.

Download Attribute Summary

The usefulness of this rarely used attribute is clean. You can decide from your HTML code when you like to make your external files downloadable instead of open. You don’t have to create a custom download handler which forces the browser to the download. You can use one attribute to achieve this with easy.

Special thanks for the following recource(s): Icon made by Smashicons from