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.
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.
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
Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.