HTML Download Attribute

Michael Gearon

Last updated on November 3, 2022

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">Download PDF</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:

• David Walsh – Download Attribute
• Six Revisions – HTML5 Download Attribute Guide
• Thoriq Fidaus – Quick Tip: Using the HTML5 “download” Attribute
• Sara Vieira – How to Use the Download Attribute 

First published on June 12, 2015