download attribute

In this video tutorial we’ll show you how we can add download attribute and make the UX(User Experience) little better!

Related Read: HTML5 and CSS3 Video Tutorial List

We’ve seen so many times that a PDF file available for download opens up in the browser once the link is clicked. Same way the rar files, zip files, image files etc. We could add download attribute and fix this simple issue.

HTML5: Download Attribute with Value

1
2
3

 <a href="Picture1.jpg" download="book.jpg">
    Download Book Cover
 </a>

Once we add download attribute to the anchor tag, once someone clicks on the link, the linked resource starts to download, instead of opening in the browser.

The value, if present, to download attribute will be used to replace the original name of the resource file linked in the anchor tag.

Download Attribute: HTML5

[youtube https://www.youtube.com/watch?v=Wg6bMQ9leMQ]

YouTube Link: https://www.youtube.com/watch?v=Wg6bMQ9leMQ [Watch the Video In Full Screen.]

Full Free Code: HTML5 Download Attribute with Value

< !doctype html>
<html>
<head>
<title>Download Attribute</title>
</head>
<body>
 
 <a href="Picture1.jpg" download="book.jpg">
    Download Book Cover
 </a>
 
</body>
</html>

Make sure you have the doctype of html5(First line in above code).