Definition
The download Attribute specifies that the target will be downloaded rather than followed. You can add an optional value specifying the name of the downloaded file.
Applicable Elements
The download Attribute can be used with the following elements:
HTML <a> download Attribute
An <a> Tag and its <href> attribute create a hyperlink. The hyperlink can be to another web page, email address, location on the same page, or files.
The download attribute, when used with the <a> element, will specify that the target will be downloaded rather than followed. For example, you can set the hyperlink to download a file.
Syntax
<a href="filelocation" download="optionalfilename">Anchor Text</a>Usage
- The download attribute specifies that the target will be downloaded rather than followed.
- You can add an optional value specifying the name for the downloaded file. If no optional value is given, the file will retain its existing filename.
- There are no restrictions on the values allowed, but in reality, most file systems have limitations on punctuation support, and user agents may adjust filenames accordingly.
The download attribute only works for same-origin URLs (files hosted on the same domain).
Values
Values can include:
- An optional filename.
Examples
The following example shows a link to download a pdf file with a custom filename:
<a href="/examples/file-sample_150kB.pdf" download="filename.pdf">Download pdf file.</a>The following example uses its existing filename:
<a href="/examples/file-sample_150kB.pdf" download>Download pdf file.</a>HTML <area> download Attribute
An <area> Tag and its <href> attribute create a hyperlink to the coordinates specified in the coords attribute. The hyperlink can be to another web page, email address, location on the same page, or files.
When used with the <area> element, the’ download’ attribute will specify that the target will be downloaded rather than followed. For example, you can set the hyperlink to download a file.
Syntax
<map name="workmap">
<area shape="circle" coords="178,171,133" alt="Earth" href="/examples/earth.png" download>
<area shape="circle" coords="455,130,80" alt="Moon" href="/examples/moon.png" download="filename">
</map>Usage
- The download attribute specifies that the target will be downloaded rather than followed.
- You can add an optional value specifying the name for the downloaded file. If no optional value is given, the file will retain its existing filename.
- There are no restrictions on the values allowed, but in reality, most file systems have limitations on punctuation support, and user agents may adjust filenames accordingly.
The download attribute only works for same-origin URLs (files hosted on the same domain).
Values
Values can include:
- An optional filename.
Examples
The following example shows an area map where clicking on the Earth or Moon will download an image of the Earth or Moon, respectively.
<img src="https://res.cloudinary.com/thewebmaster/image/upload/f_auto,q_auto,w_600/image/moon-earth.png" width="600"
height="337.5" alt="Area Tag Demo" usemap="#workmap"></img>
<map name="workmap">
<area shape="circle" coords="178,171,133" alt="Earth" href="/examples/earth.png" download>
<area shape="circle" coords="455,130,80" alt="Moon" href="/examples/moon.png" download>
</map>Specification
The download HTML specification for the various form elements are as follows:
Browser Support
The download attribute has the following browser support:
Desktop
| Chrome | Edge | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|---|
<a> | Yes | Yes | Yes | No | Yes | Yes |
<area> | Yes | Yes | Yes | No | Yes | Yes |
Mobile
| Android Webview | Chrome Android | Firefox Android | Opera Android | iOS Safari | Samsung Internet | |
|---|---|---|---|---|---|---|
<a> | Yes | Yes | Yes | Yes | Yes | Yes |
<area> | Yes | Yes | Yes | Yes | Yes | Yes |