Among the robust set of APIs and new functionalities in HTML5, the lesser-known download attribute is a gem that deserves attention. It may be overshadowed by the API heavyweights, but it’s a powerful feature in its own right.
There are certain files that web browsers typically display rather than download, such as images, HTML documents, and sometimes PDFs, depending on the user’s settings. The download attribute equips browsers with a native method for initiating downloads, bypassing the need for JavaScript. This proves invaluable for applications that handle image downloads, like photo-sharing websites.
Implementing the Download Attribute
Implementing the download attribute is a straightforward process. You don’t have to write any scripts; simply include the attribute in your hyperlink tag:
<a href="myFolder/myImage.png" download>Download image</a>
What’s wonderful is that you can assign a new filename to the downloaded file which differs from the existing server name. This feature shines on websites where files have intricate naming conventions or are generated dynamically, allowing for a more user-centric approach to naming. To specify a file name, add an equal sign and the desired name enclosed in quotes:
<a href="myFolder/reallyUnnecessarilyLongAndComplicatedFileName.png" download="myImage">Download image</a>
Be aware that the browser will append the appropriate file extension to the download, making it unnecessary to do so within the attribute value.
Compatibility Across Browsers
At present, the download attribute has the support of Chrome (version 14 or newer) and Firefox (from version 20 onward). For browsers that don’t support the attribute, you could optionally employ a simple JavaScript check:
var a = document.createElement('a');
if(typeof a.download != "undefined")
{
// Support for download attribute exists
}
else
{
// No support for download attribute
}
Final Thoughts
Considering the breadth of additions brought about by HTML5, the download attribute might seem minor, but I believe it’s been a long-awaited and highly useful addition to web developer’s toolkits, enhancing both user experience and simplicity.
Is the download attribute part of your HTML5 toolset? Are there other HTML5 features you believe deserve more recognition? Share your thoughts below.
