Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a download link with HTML?
To create a download link with HTML, you use the <a> tag with the download attribute. This attribute forces the browser to download the linked file instead of navigating to it. The download attribute works for same-origin URLs and can specify a custom filename for the downloaded file.
Syntax
Following is the basic syntax for creating a download link −
<a href="file-path" download>Download Text</a>
To specify a custom filename for the download −
<a href="file-path" download="custom-filename.ext">Download Text</a>
Basic Download Link
The simplest download link uses just the download attribute without a value. The browser will use the original filename from the URL.
Example
<!DOCTYPE html>
<html>
<head>
<title>Basic Download Link</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Download Link Example</h1>
<p>Click the link below to download a sample image:</p>
<a href="https://picsum.photos/300/200" download style="color: blue; text-decoration: underline;">
Download Sample Image
</a>
</body>
</html>
The output shows a clickable download link −
Download Link Example Click the link below to download a sample image: Download Sample Image (clickable blue link)
Download Link with Custom Filename
You can specify a custom filename by providing a value to the download attribute. This is useful for giving downloaded files meaningful names.
Example
<!DOCTYPE html>
<html>
<head>
<title>Custom Filename Download</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Download with Custom Filename</h1>
<p>These links download the same file with different names:</p>
<a href="https://picsum.photos/400/300" download="landscape-photo.jpg" style="color: blue; text-decoration: underline; margin-right: 20px;">
Download as landscape-photo.jpg
</a>
<a href="https://picsum.photos/400/300" download="my-image.jpg" style="color: blue; text-decoration: underline;">
Download as my-image.jpg
</a>
</body>
</html>
Both links point to the same image but will save with different filenames when downloaded −
Download with Custom Filename These links download the same file with different names: Download as landscape-photo.jpg Download as my-image.jpg
Download Link with Image
You can make an image itself clickable for downloading by wrapping it with an anchor tag containing the download attribute.
Example
<!DOCTYPE html>
<html>
<head>
<title>Clickable Image Download</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h1>Download Link with Image</h1>
<p>Click on the image below to download it:</p>
<a href="https://picsum.photos/300/300" download="sample-image.jpg">
<img src="https://picsum.photos/300/300" alt="Sample Image" style="width: 250px; height: 250px; border: 2px solid #ddd; border-radius: 8px;">
</a>
<p style="margin-top: 10px; font-size: 14px; color: #666;">Image will be saved as "sample-image.jpg"</p>
</body>
</html>
The output displays a clickable image that triggers a download when clicked −
Download Link with Image Click on the image below to download it: [Sample Image - 250x250 pixels with border] Image will be saved as "sample-image.jpg"
Multiple Download Options
You can provide multiple download options for different file formats or sizes on the same page.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple Download Options</title>
<style>
.download-section {
background-color: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.download-link {
display: inline-block;
padding: 10px 20px;
margin: 5px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Multiple Download Options</h1>
<div class="download-section">
<h2>Sample Documents</h2>
<p>Choose your preferred format:</p>
<a href="#" download="document.pdf" class="download-link">Download PDF</a>
<a href="#" download="document.docx" class="download-link">Download DOCX</a>
<a href="#" download="document.txt" class="download-link">Download TXT</a>
</div>
<div class="download-section">
<h2>Image Sizes</h2>
<p>Different resolutions available:</p>
<a href="https://picsum.photos/800/600" download="image-large.jpg" class="download-link">Large (800x600)</a>
<a href="https://picsum.photos/400/300" download="image-medium.jpg" class="download-link">Medium (400x300)</a>
<a href="https://picsum.photos/200/150" download="image-small.jpg" class="download-link">Small (200x150)</a>
</div>
</body>
</html>
This creates organized download sections with styled buttons for different file options −
Multiple Download Options Sample Documents Choose your preferred format: [Download PDF] [Download DOCX] [Download TXT] (blue buttons) Image Sizes Different resolutions available: [Large (800x600)] [Medium (400x300)] [Small (200x150)] (blue buttons)
Important Notes
When using the download attribute, keep these key points in mind −
-
Same-origin policy − The download attribute works best with files from the same domain. Cross-origin files may not respect the custom filename.
-
Browser support − All modern browsers support the download attribute, but older versions of Internet Explorer do not.
-
File types − The download attribute works with any file type including images, documents, videos, and archives.
-
Security − Some browsers may block downloads from untrusted sources or show security warnings.
Conclusion
The HTML download attribute provides a simple way to create download links that force browsers to download files instead of opening them. Use it with the <a> tag's href attribute, and optionally specify a custom filename. This approach works for any file type and gives users a clear download experience.
884 Views
