A Chapter On Html5's Download Attribute

HTML5 is bringing evolution in web-designing, really it is doing so. But I came to know about this very later. And as soon as I got this whole new thing to learn, I decided to share it on my site. 

Still after so many years of advancement in web world, it's design structure, there are some web-elements, which don-not download, when you click on them like images, pdf, audio, videos and webpages are examples of it. For image it opens in same window or new window when you click on it and then you have to right click → and click on save image as..

So previously before the launch of HTML5 either ajax or jquery or javascript were used to make such files to download forcefully onclick. 

But HTML5 with its download attribute has made it easier. Let us learn something about HTML5 download attribute in this tutorial.

What is it?

Actually download attribute is used in any element which is to be downloaded. So when user click on element download attribute forces the browser to download the element and replaces the name of downloading element with the name specified in attribute.

Link Without Download Attribute

We are taking one pdf file and one image file, as a simple link without using download attribute

<a href='http://goo.gl/fcnSra' alt='all is mind'>Download Pdf</a> 
<a href='http://goo.gl/IvFC5q' alt='hum-tum'>Download Image</a>

Link With Download Attribute

Now we will add download attribute to the same links used above for example.

<a href='http://goo.gl/fcnSra' alt='all is mind' download='all is mind.pdf'>Download Pdf</a> 
<a href='http://goo.gl/IvFC5q' alt='hum-tum' download='hum-tum.jpeg'>Download Image</a>

See The Live Demo

Browser Compatibilty

At present download attribute functions on Chrome 14+ and Firefox 20+. Hope that very soon HTML5 should also cover the IE, Safari and Opera etc.