HTML5 Download Attribute Guide

The `download` attribute empowers websites to initiate the download of media files directly to a user's comput

The `download` attribute empowers websites to initiate the download of media files directly to a user’s computer or mobile device. For instance:

“`html

Download HTML document

“`

Generally, when a user clicks on a link leading to an HTML document, PDF, image, or other media files, these are typically opened within the browser. However, when the hyperlink includes the `download` attribute, as demonstrated above, the browser is directed to download the file, mimicking the behavior of a link to a .zip or .exe file.

![Download Attribute Guide](https://www.webfx.com/wp-content/uploads/2021/10/0435-02_force_download_in_firefox.png)

The `download` attribute prompts a “save” dialog in Firefox, allowing users to elect to save the file on their computer or mobile device.

This attribute is particularly useful for PDFs, image files, video and audio clips, and other media content intended for users to store locally on their devices.

The actual file name can be customized by assigning a value to the `download` attribute. For example:

“`html

Download Visa Application

“`

In the provided example, when the user clicks the hyperlink, the PDF file named “tform5201.pdf” is renamed to “visa-application.pdf” upon download for improved readability and user convenience.

To experiment with the behavior of the `download` attribute, you can visit a demo page: ![Download Attribute Demo](https://www.webfx.com/wp-content/uploads/2021/10/0435-03_html5_download_attribute_demo.png)

In instances where the `download` attribute is not supported by the user’s browser, JavaScript can be employed to detect the feature’s availability:

“`javascript

// 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 is not supported, a modal window informs the user of the lack of feature support. ![Download Attribute Demo](https://www.webfx.com/wp-content/uploads/2021/10/0435-04_download_attribute_feature_detection.png)

As of the time of this writing, the latest versions of the following web browsers support the `download` attribute:

– Firefox/Firefox for Android

– Chrome/Chrome for Android

– Opera/Opera Mobile

HTML5 Download Attribute Guide

– Android Browser

HTML5 Download Attribute Guide

– Blackberry Browser

To verify the current browser implementation status of the `download` attribute, consult the support table at caniuse.com. Additionally, refer to the W3C’s specifications for the download attribute. [View Repo on GitHub](#)

For further reading on related topics:

– Designing the Perfect Hyperlink — It’s Not as Simple as You Think

– HTML5 Canvas Element Guide

– A Generic HTML5 Template

Chat With Us

If you need to do Google SEO screen blocking business, please contact me immediately

Share:

More Posts