HTML from Scratch: The download Attribute in HTML5 (for downloading files). Lesson #25

Hello, friends!

Today, I want to share a useful trick — how to use the “download” attribute in HTML5 to create links that allow users to download files directly from your website. Want your users to quickly download “.zip”, “.rar” archives, or even images and PDF documents? It’s simple! Let’s dive into how it works.

This attribute is especially useful if you’re creating a file-sharing site or a document repository. It helps not only provide easy access to files but also enhances the user experience.

Let’s see how it works in practice.

Example 1: Link to an image

First, if you just provide a link to an image:

<a href="overcod-net.png">Link to the image</a>

The browser will open the image in the window. But if you want to prompt the user to download the image instead, just add the “download” attribute:

<a href="overcod-net.png" download>Download the image</a>

Now, when you click the link, instead of opening the image, the browser will prompt you to download the file.

Example 2: Link to a webpage

Let’s say you want to offer a webpage download. A regular link will behave like this:

<a href="index.html">Link to the webpage</a>

But by adding the “download” attribute, you change its behavior:

<a href="index.html" download>Download the webpage</a>

Now, instead of opening the page, the browser will prompt you to save it to your device.

Example 3: Link to a PDF

Want to let the user download a PDF document? Without the “download” attribute, it will look like this:

<a href="1.pdf">Link to the book</a>

But if you want the PDF to be downloaded right away instead of opened, just add the attribute:

<a href="1.pdf" download>Download the book</a>

Now, when you click the link, the PDF will be offered for download immediately.

Conclusion

The “download” attribute is an essential tool for creating easy-to-use file download links. It allows you to provide users with quick access to files and enhances their experience on your website.

If you have any questions or suggestions, leave them in the comments! I’d love to read them.

Don’t forget to subscribe to the blog updates to stay tuned for more useful lessons. Good luck and happy coding!