HTML Download Links Tutorial - The Download Attribute

Understanding HTML Download Links

HTML download links use the download attribute on the <a> element to indicate that a linked resource should be downloaded rather than opened as a normal webpage.

Download links are useful for documents, text files, images, templates, data files, and other resources that visitors may want to save to their device.

Download Link Syntax

A download link is created by adding the download attribute to an <a> element.

<a href="sample.txt" download>Download Sample File</a>

The href attribute identifies the file, while the download attribute tells the browser that the resource is intended to be downloaded.

The download Attribute

The download attribute is a boolean attribute, so it can be used without assigning it a value.

<a href="guide.pdf" download>Download the Guide</a>

When supported and permitted by the browser, selecting the link causes the resource to be treated as a download instead of navigating directly to it.

Suggesting a Download Filename

A value can be assigned to the download attribute to suggest a filename for the downloaded resource.

<a href="files/document.pdf" download="html-guide.pdf">Download HTML Guide</a>

In this example, the linked file is document.pdf, but the browser is given html-guide.pdf as the suggested filename. The final filename may still be adjusted by the browser or operating system.

Downloading Different File Types

The download attribute can be used with many types of resources, including text files, PDFs, images, spreadsheets, and compressed archives.

<a href="instructions.txt" download>Download Instructions</a>

<a href="worksheet.pdf" download>Download Worksheet</a>

<a href="photo.jpg" download>Download Photo</a>

<a href="resources.zip" download>Download Resources</a>

The file type itself does not determine whether the download attribute can be used, although browser behavior and server configuration can affect the final result.

Download Link Browser Behavior

The download attribute works most predictably with files from the same website as the page containing the link. Browsers may ignore the attribute for certain cross-origin resources or apply their own security and download policies.

The web server can also influence whether a resource is displayed or downloaded through HTTP response headers. Because of this, the download attribute should be treated as a request to the browser rather than an absolute guarantee of how every file will be handled.

HTML Download Link Example

The following example provides a text file for the visitor to download and uses the download attribute to suggest a descriptive filename.

<h2>Download Example</h2>

<p>
  <a href="download-example.txt" download="html-download-example.txt">
    Download Example Text File
  </a>
</p>

Select the download link in the editor to see how the browser handles a downloadable file.

Play in Editor

Download Link Best Practices

Use descriptive link text that makes it clear the link downloads a file.
Include the file type or file size when that information will help visitors decide whether to download the resource.
Use meaningful filenames rather than generic names such as file1.pdf.
Use the download attribute primarily with resources hosted on the same website.
Do not rely on the download attribute as the only way to control file delivery because browser and server behavior can affect the result.
Make sure downloadable files are safe, available, and correctly linked before publishing the page.
Tell visitors when a download is unusually large or requires special software to open.

Summary

HTML download links use the download attribute on the <a> element to indicate that a linked resource should be saved rather than opened normally. The attribute can also provide a suggested filename, while the browser and web server ultimately determine how the download is handled.