The HTML5 Download Attribute Explained - Nathan Sebhastian

• Home
• About
• Contact

• Newsletter

The HTML5 download attribute explained

by Nathan Sebhastian

Posted on Jul 25, 2021

Reading time: 1 minute

The download attribute is commonly present inside an <a> tag to mark a hyperlink as “offering a downloadable file”.

It’s a new attribute added in HTML5 that allows your browser to download a file on click.

You may see an example of download attribute implementation as follows:<a href="document.pdf" download>Download PDF</a>

Without the download attribute above, then the browser will navigate to the document.pdf location and open the file in the browser.

When you specify the download attribute, then the computer will either:

• Save the file in the default download location defined in your browser settings
• Or ask you where to save the file before downloading

The download attribute also accepts a value that you can specify as the filename alias:<a href="document.pdf" download="HTML5_download.pdf">Download PDF</a>

When you download the document.pdf file, the browser will automatically rename the file with the download attribute value.

download attribute restrictions

The download attribute needs to refer to a file that has the same origin, or it won’t be executed by the browser.

For example, if the download page is located at sebhastian.com/html5download.html then the downloadable file must also be located at sebhastian.com.

When you refer to a cross-origin file, the browser will ignore the download request and open the file as a normal hyperlink.

download attribute browser support

The download attribute is currently supported by all major browsers like Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge.

Here’s a screenshot of browser versions supporting the attribute:

You can check out You can check out currently supported versions for the download attribute at caniuse.com

And that’s how the HTML5 download attribute works 😉

Take your skills to the next level ⚡️

I'm sending out an occasional email with the latest tutorials on programming, web development, and statistics. Drop your email in the box below and I'll send new stuff straight into your inbox!Subscribe No spam. Unsubscribe anytime.

About

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.Learn statistics, JavaScript and other programming languages using clear examples written for people.

Learn more about this website

Connect with me on Twitter

Or LinkedIn

Search

Type the keyword below and hit enter

Tags

Click to see all tutorials tagged with:Android CSS DevTools Git HTML Java JavaScript Kotlin MySQL NodeJS npm PHP Python React Sequelize Statistics