HTML5 Download Attribute Guide

William Craig

CEO & Co-Founder
3 minute read
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.

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.

Download attribute pop up example

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: Screenshot of HTML5 download attribute demo page 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 download attribute example