A Look Into: HTML5 Download Attribute

By . Filed in Web Design

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.

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.

Author:

Thoriq is a writer for hongkiat.com. He is also a web developer with very unpredictable sleep cycle.

Advertisement