The download
attribute allows us to force media file downloads onto the user’s computer or mobile device. Example:
<a href="htmldoc.html" download>Download HTML document</a>
Typically, when we link to an HTML document, PDF, image file, or other media files, they will be opened in the browser when the user clicks on its link. But if the hyperlink has the download
attribute, such as in the example above, the browser is instead instructed to download the file, behaving much like a link pointing to a .zip or .exe file.
The download attribute will open a “save” dialog in Firefox, giving users the option to save the file to their computer or mobile device
The download
attribute is great for PDFs, image files, video and audio clips, and other media content that you would like users to save on their computer or mobile device.
Changing the Name of the File
You can change the actual file name by giving the download
attribute a value. Example:
<a href="tform5201.pdf" download="visa-application.pdf">
In the example above, when the user clicks on the hyperlink, the PDF file named “tform5201.pdf” is changed to a more readable and user-friendly file name “visa-application.pdf” when it’s downloaded.
Demo of the Download Attribute
Here is a demo page to help you explore and test the download
attribute’s behavior on hyperlinks: View Demo Download Source from GitHub
Download Attribute Feature Detection
Because a lot of browsers still don’t implement the download
attribute, it’s a smart idea to use JavaScript to check if the user’s browser has it:
// create temporary hyperlink element var hyperlink = document.createElement("a"); // if download property is undefined // browser doesn't support the feature if(hyperlink.download === undefined) { // do stuff }
In the demo page, if the download
attribute isn’t present in the browser, a modal window is displayed with a message telling the user the feature isn’t supported.
Safari doesn’t currently support the download attribute, so a modal window is displayed to inform the user
Implementation Status
At the time of writing, the latest versions of the following web browsers implement the download
attribute:
- Firefox/Firefox for Android
- Chrome/Chrome for Android
- Opera/Opera Mobile
- Android Browser
- Blackberry Browser
Check out this download attribute support table at caniuse.com to see its present-day browser implementation status. Also, check out the W3C’s download attribute specifications. View Repo on GitHub
Related Content
Related Resources
- Introduction to HTML5 Web Storage
- 10 Useful Infographics About HTML5
- A Guide to the New HTML5 Form Input Types
- HTML5 Template: a Basic Code Template to Start Your Next Project
- Semantic HTML for Web Content
- 15 HTML Questions for Testing Your Knowledge
- Best HTML Editor: 5 Good HTML Editors to Make Coding a Breeze
Resources by Industry
- Web Design for Excavation Companies: Top 5 Tips (With Examples!)
- 5 Web Design Tips for Fence Installers
- 5 Simple and Successful Web Design Tips for Auto Parts Retailers
- Tips for Medical Website Designs
- Medical Website Design from an Award Winning Agency
- Top 10 Effective Web Design Tips for Auto Service Centers
- Web Design for Renewable Energy: Tips for a Site That Shines
- Insurance Website Design Services
- 5 Web Design Tips for Fertility Clinics
How is your website’s SEO?
Use our free tool to get your score calculated in under 60 seconds.
Continue Reading
Get posts by email
Join 200,000 marketing managers and subscribe to Revenue Weekly!
"*" indicates required fields
WebFX Careers
Join our mission to provide industry-leading digital marketing services to businesses around the globe - all while building your personal knowledge and growing as an individual.