HTML5 introduced a lot of new APIs, input types and attributes for forms. However, a lot of small additions were made such as the download attribute.

HTML5 - Web Design Cheshire, ALJT Media

The download attribute is ideal when your browser won't automatically download the file; images, other web pages and sometimes PDFs. The download attribute is used to give the browser a native way to download these files automatically without having to fall back on Javascript. This comes in handy for websites that use a lot of images which users can download e.g. image upload sites.

What is the download attribute?

The download attribute is as simple as adding a new attribute to your link tag:

<a href="/images/your_image.jpg" download>Download image</a>

Using the download attribute, we can override the default file name that should automatically be saved even when it isn't present on your server. This tackles any problems when websites use long dynamically created image names that we want to replace with a more simple and user-friendly file name. To provide a name you simply add a value to the attribute as seen below:

<a href="/images/some_long_file_name_123_123_0192.jpg" download="MyImage">Download image</a>

You don't need to worry about adding the extension, your browser will automatically add the correct file extension onto the downloaded file.

Browser Support

Currently, only Chrome 14+ and Firefox 20+ support the download attribute, so you may need to fall back on some Javascript to detect and determine if the attribute is supported or not. Sample code is:

var a = document.createElement('a');
if(typeof != "undefined") {
   // download attribute is supported
} else {
  // download attribute is not supported

Overall, with everything else that has been added to HTML5, the download attribute is a very small part but still, it definitely has its uses in today's applications for both usability and simplification.

SEE ALSO: Foundation 4 has been released (HTML5)

Have you implemented the download attribute? Which is your favourite HTML5 addition? Get in touch with us by mentioning #ALJTMedia on Twitter, leaving a comment on our FacebookGoogle+ or LinkedIn page, or writing a comment below.

Image Credit: The Future of HTML5, 84% of Developers Plan to Adopt Key HTML5 Features

Make your Instagram beautiful. Preview your images before you post them ›