How to use the download attribute

Default avatar.
April 22, 2013
How to use the download attribute.

ThumbnailHTML5 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 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

15 Best New Fonts, March 2023

Fonts are one of the most critical tools in any designer’s toolbox. With clever use, you can transform a design from hu…

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…

AI’s Impact on the Web Is Growing

Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this. When your…

Exciting New Tools for Designers, February 2023

No matter what you’re working on, you can guarantee that there’s a cool app, resource, or service that will help you do…

15 Best New Fonts, January 2023

Your choice of typeface significantly impacts the tone of voice your designs adopt. Heritage, ambition, freshness, ener…