How to Make a Link Downloadable in HTML

One of the lesser-known, but highly useful, attributes in HTML is the “download” attribute. This attribute allows you to control the downloading of files directly from a web page. In this tutorial you will learn how to use this HTML download attribute which makes a link downloadable.

“download” Attribute of HTML Anchor <a> tag

The “download” attribute is typically used with the <a> (anchor) element, which is commonly used for creating hyperlinks and this attribute makes the link downloadable. Here’s the basic syntax of the download attribute:

<a href="file-path" download="new-file-name">Link Text</a>
  • href: This attribute specifies the URL of the file you want to make available for download.
  • download: This attribute tells the browser to download the linked file instead of navigating to it.
  • new-file-name (optional): You can provide a new name for the downloaded file. If you omit this attribute, the browser will use the original file name.

Example of the “download” attribute:

You can use the download attribute to create download links for various file types such as PDFs, images, documents, audios, videos, and more. For example:

<a href="example.pdf" download="my-document.pdf">Download PDF</a>
<a href="image.jpg" download>Download Image</a>
<a href="song.mp3" download="Song Name.mp3">Download Mp3</a>

When you provide a custom name for the downloaded file using the download attribute, you give users a better idea of what they are downloading. This can be particularly useful when the original file name is cryptic or lengthy.

Leave a Reply

Your email address will not be published. Required fields are marked *

We use cookies to ensure that we give you the best experience on our website. Privacy Policy