How to create download link in html

HtmlHow-ToBeginner · 3 min read

How to Create a Download Link in HTML: Simple Guide

To create a download link in HTML, use the <a> tag with the href attribute pointing to the file URL and add the download attribute. This tells the browser to download the file instead of opening it.

📐

Syntax

The basic syntax for a download link uses the <a> tag with two important parts:

href: The path or URL to the file you want users to download.
download: An attribute that tells the browser to download the file instead of opening it.

You can also specify a filename with download="filename.ext" to suggest a name for the saved file.

html

<a href="path/to/file.ext" download>Download File</a>

Output

A clickable link labeled 'Download File' that starts downloading the file when clicked.

💻

Example

This example shows a download link for a PDF file named "example.pdf" stored in the same folder as the HTML file. Clicking the link will download the file instead of opening it in the browser.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Download Link Example</title>
</head>
<body>
  <a href="example.pdf" download>Download Example PDF</a>
</body>
</html>

Output

A page with a link labeled 'Download Example PDF' that downloads 'example.pdf' when clicked.

⚠️

Common Pitfalls

Some common mistakes when creating download links include:

Not using the download attribute, which causes the file to open in the browser instead of downloading.
Using an incorrect or missing href URL, so the file cannot be found.
Trying to download files from other domains without proper permissions, which browsers block for security.

Always check the file path and use the download attribute for a proper download experience.

html

<!-- Wrong: No download attribute, file opens in browser -->
<a href="example.pdf">Open PDF</a>

<!-- Right: With download attribute, file downloads -->
<a href="example.pdf" download>Download PDF</a>

Output

First link opens the PDF in browser; second link downloads the PDF file.

📊

Quick Reference

Summary tips for creating download links:

Use <a href="file" download> to create a download link.
Specify a filename with download="name.ext" if you want to rename the file on download.
Ensure the file path in href is correct and accessible.
Download attribute works only for same-origin or CORS-enabled files.

✅

Key Takeaways

Use the tag with the download attribute to create a download link in HTML.

The href attribute must point to the correct file path or URL.

The download attribute forces the browser to download the file instead of opening it.

You can specify a custom filename with download="filename.ext".

Download links work best with files on the same domain or with proper CORS settings.