Use of HTML5 Download Attribute

As we know, there are many files that are not downloaded directly. For example: images, webpages, PDF files, music files, etc. We have to right click on images and then click on Save Image to save an image file. But if I want to download an image file directly, then I have to use the download attribute.

<a href="Image.jpeg" download>Download image</a>

Simply type download in the <a> anchor tag. By using this, when we click on download image, the image starts downloading. The same method is used for downloading PDF, webpage files (HTML), etc. 

If we want to give a new name to the download file, then we have to write:

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

Here, we write download="myImage". When we click on Download image, then an image file is downloaded with  name myImage with a .png extension. The browser automatically detects the correct file extension and adds it to the downloaded file. So there is no need to add the file extension in the download attribute.

CHECK BROWSER SUPPORT :

For checking our browser support download attribute, we have to use JavaScript:

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

Currently, Chrome 14+ and Firefox 20+ supports the download attribute (tried and tested by me on Chrome).

I am including the .zip file for downloading in which I am showing the use of the download attribute as well as checking browser support for the download attribute.