Article Categories

Selected Reading

How to specify that the target will be downloaded when a user clicks on the hyperlink in HTML?

HTML Web Development Front End Technology

The download attribute in HTML specifies that the target will be downloaded when a user clicks on the hyperlink, rather than navigating to the linked resource. This attribute transforms any link into a download trigger, allowing users to save files directly to their device.

Syntax

Following is the syntax for the download attribute −

<a href="file-url" download>Link Text</a>

You can also specify a filename for the downloaded file −

<a href="file-url" download="filename">Link Text</a>

Parameters

The download attribute accepts the following values −

Empty value − download without a value uses the original filename.
Filename − download="newname" specifies a custom name for the downloaded file.

Basic Download Example

Following example demonstrates how to use the download attribute to download an image file −

<!DOCTYPE html>
<html>
<head>
   <title>Download Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Download Image Example</h2>
   <p>Click the image below to download it (Java if-statement diagram):</p>
   
   <a href="https://www.tutorialspoint.com/java/images/if_statement.jpg" download>
      <img src="https://www.tutorialspoint.com/java/images/if_statement.jpg" 
           alt="Java if-statement diagram" 
           width="400" 
           height="450" 
           style="border: 2px solid #ddd; cursor: pointer;">
   </a>
   
   <p><em>Note: Click the image to download the Java if-statement diagram.</em></p>
</body>
</html>

Clicking on the image will download the file with its original filename.

Download with Custom Filename

You can specify a custom filename for the downloaded file using the download attribute value −

<!DOCTYPE html>
<html>
<head>
   <title>Custom Download Filename</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Download with Custom Filename</h2>
   
   <p>Download links with custom filenames:</p>
   
   <ul>
      <li>
         <a href="https://www.tutorialspoint.com/java/images/if_statement.jpg" 
            download="java-if-statement-diagram.jpg">
            Download Java If-Statement Diagram
         </a>
      </li>
      <li>
         <a href="data:text/plain;charset=utf-8,Hello World!" 
            download="hello.txt">
            Download Text File
         </a>
      </li>
   </ul>
   
   <p>The first link downloads the image as "java-if-statement-diagram.jpg" and the second creates a text file named "hello.txt".</p>
</body>
</html>

The files will be downloaded with the specified custom names rather than their original filenames.

Download Different File Types

The download attribute works with various file types including images, documents, and text files −

<!DOCTYPE html>
<html>
<head>
   <title>Multiple File Type Downloads</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Download Different File Types</h2>
   
   <div style="margin: 10px 0;">
      <h3>Text File Download</h3>
      <a href="data:text/plain;charset=utf-8,This is a sample text file content.
Line 2 of the file.
Line 3 of the file." 
         download="sample-text.txt"
         style="background: #007bff; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px;">
         Download Text File
      </a>
   </div>
   
   <div style="margin: 10px 0;">
      <h3>JSON File Download</h3>
      <a href='data:application/json;charset=utf-8,{"name":"John","age":30,"city":"New York"}' 
         download="data.json"
         style="background: #28a745; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px;">
         Download JSON File
      </a>
   </div>
   
   <div style="margin: 10px 0;">
      <h3>CSV File Download</h3>
      <a href="data:text/csv;charset=utf-8,Name,Age,City%0AJohn,25,New York%0AJane,30,London" 
         download="users.csv"
         style="background: #17a2b8; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px;">
         Download CSV File
      </a>
   </div>
</body>
</html>

Each link creates and downloads a different file type with the specified content and filename.

Browser Compatibility and Limitations

The download attribute has some important limitations −

Same-origin policy − Most browsers only allow downloads from the same origin (domain) as the current page for security reasons.
HTTPS requirement − Some browsers require HTTPS for cross-origin downloads.
File size limits − Browsers may have limits on downloadable file sizes.
MIME type support − The browser must support the file type being downloaded.

Key Points

The download attribute only works with <a> (anchor) elements.
If no filename is specified, the browser uses the original filename from the URL.
The download attribute overrides the browser's default behavior of trying to display the file.
For cross-origin downloads, appropriate CORS headers may be required.

Conclusion

The HTML download attribute provides a simple way to force file downloads instead of navigation. By adding download to any anchor tag, you can create download links that save files directly to the user's device. You can also specify custom filenames to make downloaded files more user-friendly and organized.

Nikitha N

Updated on: 2026-03-16T21:38:53+05:30

219 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next