HTML(5) Download Attribute

Written by Michael Gearon on the

Last updated 04

An interesting and overlooked aspect of HTML5 is the new attributes to the link tag. The download attribute introduced in HTML5 can solve two issues; giving a downloadable document a sensible name when a person downloads it and to automatically download any type of file including PDF documents and images, which sometimes relied on a bit of ‘hacking’ to get it working.

HTML

Here is an example of  a file I downloaded recently which saved as “NOMS_AR14_15_report_accounts_Final_WEB.pdf” to my computer.

<!-- If you try to download this it will be "NOMS_AR14_15_report_accounts_Final_WEB.pdf" -->
<a href="/files/NOMS_AR14_15_report_accounts_Final_WEB.pdf">NOMS Annual Report and Accounts 2014-2015</a>

Although this example is not particularly terrible because it provides the name of the document, a date and it makes it clear that it is a report, there are a few things we could do to neaten it up.  With the download attribute, you can change the filename, so instead of it being in “gobbledygook”, which has little meaning to the person downloading it, it could have a sensible name which provides useful information to the user when they are searching for it in their computer. To do this look at the following HTML:

<!-- If you try to download this it will be "NOMS-2014-15-Annual-Report.pdf" --> 
<a href="/files/NOMS_AR14_15_report_accounts_Final_WEB.pdf" download="NOMS-2014-15-Annual-Report">NOMS Annual Report and Accounts 2014-2015</a>

Here, we have defined a new attribute which is “download” and then stated what the document title should be. By doing this we have removed the following irrelevant words “final” and “WEB”. Also, by using the download attribute, the file is downloaded by force. This is useful with PDF document and images which normally open in a new tab.

Unfortunately, this attribute is not supported in all browsers. For further information on this attribute, I recommend Thoriq Fidaus or Sara Vieira’s blog posts, as they have good examples of how to do the fallback using Javascript.

Further Reading

For further reading check out these great posts:

Written by Michael Gearon

Michael Gearon is a UX Designer at BrandContent. Specialising in voice assistants and CRO, I have a wealth of experience in UX, UI and website design. Based in Cardiff, South Wales Mike can help local businesses with their online presence.

So now what?

Let's chat, and get things going