How to use the download attribute

How to use the download attribute

HTML5 came with all new APIs, new input types and attributes for forms. As is often the case, those major additions often obscure the minor upgrades and I think that this is particularly true of the download attribute.As you know, there are some files that the browser doesn’t automatically download; images, other web pages and […]

Sara Vieira

Posted April 22, 2013

Posted Apr 22, 2013

HTML5 came with all new APIs, new input types and attributes for forms. As is often the case, those major additions often obscure the minor upgrades and I think that this is particularly true of the download attribute.

As you know, there are some files that the browser doesn’t automatically download; images, other web pages and depending on the settings in your browser, sometimes even PDFs. The download attribute gives the browser a native way to download these files automatically, without having to fall back on JavaScript. This is really useful for any app that deals with the downloading of images, such as image upload sites.

Using the download attribute

Since the download attribute doesn’t use scripts of any kind, it’s as simple as adding the attribute to your link:

<a href="myFolder/myImage.png" download>Download image</a>

What’s great about this attribute is that you can even set a name for the downloadable file, even when it’s not the name on your server. This is great for sites with complex file names, or even dynamically created images, that want to provide a simple and user-friendly file name. To provide a name, you just add an equals sign, followed by the name you want to use surrounded in quotes, like so:

<a href="myFolder/reallyUnnecessarilyLongAndComplicatedFileName.png" download="myImage">Download image</a>

Note that the browser will automatically add the correct file extension to the downloaded file, so you don’t need to include that inside your attribute value.

Browser support

Currently, only Chrome 14+ and Firefox 20+ support the download attribute, so you may need to fall back on some simple JavaScript to detect if the attribute is supported. You can do so like this:

var a = document.createElement('a');

if(typeof a.download != "undefined")
{
 // download attribute is supported
}
else
{
 // download attribute is not supported
}

Conclusion

Taking into consideration everything that has been added to HTML5, the download attribute is a very small part, but in my opinion it’s an attribute that was long overdue, and definitely has its uses in today’s apps for both usability and simplification.

Have you implemented the download attribute? What are your unsung heroes of HTML5? Let us know in the comments.

Featured image/thumbnail, download image via Shutterstock.

Sara Vieira

Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.

Read Next

A Closer Look at WordPress 6.7: “Rollins”

A Closer Look at WordPress 6.7: “Rollins”

The WordPress 6.7 release, named “Rollins” honors jazz legend Sonny Rollins, renowned for his improvisational mastery and innovative contributions to jazz. His iconic compositions, like “St. Thomas” and “Oleo,” reflect…

WDD Staff November 20, 2024 Nov 20, 2024
Why Responsive Design is Failing Modern Users

Why Responsive Design is Failing Modern Users

Yet, despite its widespread adoption, modern users are increasingly frustrated. Why? Because the once-revolutionary approach is failing to keep up with the evolving demands of today’s digital landscape. In this…

Louise North November 18, 2024 Nov 18, 2024
S U B S C R I B E N O W

Join to our thriving community of like-minded creatives!