1. Web Design
  3. HTML Templates

Quick Tip: Using the HTML5 Download Attribute

Scroll to top
Read Time: 3 min
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Don’t Forget the “optgroup” Element
All You Need to Know About the HTML5 Data Attribute

Creating a download link in HTML is straightforward; add an anchor tag and point to the file within the “href” attribute. Some file types, however, won’t be downloaded; they’ll be opened in the browser. In this case consider using the “download” attribute.

If you have server-side access to your website there are some workarounds you can use, such as configuring the .htaccess, to download these files directly. If your site is hosted with a free service like WordPress.com, Blogspot, or perhaps Github pages which don’t allow you to do so, consider using the download attribute.

Using the HTML5 Download Attribute

The download attribute is part of the HTML5 spec and expresses a link as download link rather than a navigational link.


<a href="download/acme-doc.txt" download>Download Text</a>

The download attribute allows you to optionally rename the file name upon downloading. When the file resides on the server, especially if it’s been automatically generated, this can be ideal for giving users a file with a more sensible name when downloaded, perhaps like: Acme Documentation (ver. 2.0.1).txt (not forgetting the file extension).

Here’s how that would look in practice:

<a href="download/acme-doc-2.0.1.txt" download="Acme Documentation (ver. 2.0.1).txt">Download Text</a>

Give it a try on the demo page, and you should find the file downloaded with the name specified in the download attribute.

the html download procedurethe html download procedurethe html download procedure

A Couple of Notes:

  • Firefox only allows users to download files of the same origin due to a security concern. The file must come from your own server or domain name, otherwise it will be opened in the browser. 
  • While downloading cross-origin files is allowed in Chrome and the latest Opera (with Chromium/Blink), they will both ignore the attribute value. In other words, the file name will remain unchanged.
The download attribute can also be used with the less common <area> element.

Providing Fallback for Internet Explorer

The download attribute has not been implemented in Internet Explorer, though it is supported by Edge. 

browser support for the HTML5 download attribute, from caniuse.combrowser support for the HTML5 download attribute, from caniuse.combrowser support for the HTML5 download attribute, from caniuse.com
browser support for the download attribute, from caniuse.com

In order to make things bullet proof we can add a decent fallback, such as providing extra instructions below the download link for non-supporting browsers. To do so, we will need to download Modernizr with the download feature test included.

modernizr script with download attribute featuremodernizr script with download attribute featuremodernizr script with download attribute feature
Configure Modernizr build.

Then we can add the following script.

if ( ! Modernizr.adownload ) {
	var $link = $('a');
	$link.each(function() {
		var $download = $(this).attr('download');
		if (typeof $download !== typeof undefined && $download !== false) {
      var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"');

The script will test whether the browser supports the download attribute; if not it will append a new <div> with the class for styling purposes as well as the instruction text, and insert it immediately below any link which has been furnished with the download attribute.

backup download instructionsbackup download instructionsbackup download instructions


The HTML5 download attribute makes handling download links very convenient for anyone who has no access to server-side configuration.

Learn More HTML

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.