HTML download Attribute

What You’ll Learn

The download attribute on <a> and <area> links tells the browser to download the linked resource instead of opening it in the page. You can optionally set a custom filename so users save files with a clear, descriptive name.

Purpose of download

Without download, clicking a link to a PDF, image, or other file may open the resource in a new tab instead of saving it. The download attribute prompts the browser’s save dialog and lets you suggest a filename that is clearer than the server path.

This improves user experience when offering templates, reports, images, or exported data. It is especially helpful when the original URL filename is generic (like file?id=42) but you want the saved file to be readable (like invoice-march.pdf).

📝 Syntax

Add download to an anchor with a valid href:

<a href="/files/honey-bee.pdf" download="honey-bee-guide.pdf">

  Download PDF

</a>

Syntax Rules

• Only valid on <a> and <area> elements with an href.
• Optional string value suggests the saved filename (include the extension).
• Empty download or download="" still forces download with a default name.
• Same-origin URLs are required for reliable custom filenames in most browsers.

💎 Values

The download attribute accepts an optional filename string:

• download="my_document.pdf" — Save as my_document.pdf.
• download="photo.png" — Save an image with a custom name.
• download (no value) — Download with the resource’s default filename.

<!-- Custom filename -->

<a href="data.csv" download="sales-2026.csv">Export</a>



<!-- Default filename -->

<a href="chart.png" download>Save chart</a>

Applicable Elements

download vs normal link

Examples Gallery

PDF with a custom filename, image download links, and dynamic filenames with JavaScript.

Example — PDF with Custom Filename

Download a PDF and save it with a friendly name:

pdf-download.html

Copy

<a href="/files/honey-bee.pdf" download="honey-bee-guide.pdf">

  Download PDF

</a>

View Output Try It Yourself

📤 Output:

Download PDF

Saves as honey-bee-guide.pdf.

How It Works

The browser downloads the file from href but uses the name from download in the save dialog.

Example — Downloadable Image Link

Wrap an image so clicking it saves the file:

image-download.html

Copy

<a href="/images/javascript.png" download="javascript-logo.png">

  <img src="/images/javascript.png" alt="Download logo">

</a>

View Output Try It Yourself

📤 Output:

How It Works

The link points to the image URL. download tells the browser to save the file instead of displaying it.

Dynamic Values with JavaScript

Set the download filename when generating files dynamically:

dynamic-download.html

Copy

<a id="dynamicDownloadLink" href="data:text/plain,Hello%20World!">Download</a>



<script>

  document.getElementById("dynamicDownloadLink").download = "generated_file.txt";

</script>

View Output Try It Yourself

📤 Output:

Download text file

link.download = "generated_file.txt"

How It Works

JavaScript can set download on links pointing to data: or blob: URLs created at runtime.

♿ Accessibility

• Use clear link text — Say “Download PDF report” instead of vague “Click here.”
• Indicate file type — Mention format and size when helpful (e.g. PDF, 2 MB).
• Do not rely on images alone — If the link wraps an image, provide meaningful alt text.
• Warn about large files — Let users know before starting a big download.

💡 Best Practices