HTML / HTML Attributes

HTML Download Attribute

Oct 12, 2022
3 min read
HTML download Attribute

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

ChromeEdgeFirefoxIEOperaSafari
<a>YesYesYesNoYesYes
<area>YesYesYesNoYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
<a>YesYesYesYesYesYes
<area>YesYesYesYesYesYes