Internet, Networking, & Security Around the Web How to Create a Download Link Create links that download files rather than display them By Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated November 11, 2019 Around the Web How to Get a VPN Tweet Share Email It's interesting how some things come full circle. In the early days of the Web, browsers would automatically download links to files that weren't a web page, like images, PDF files, and documents. Then, browsers became so advanced that they were able to open nearly any file in real-time. That created a problem for developers, though. How would you force a browser to download a file, instead of opening it? A bunch of hacks and workarounds sprung up to solve the issue, but none were a true solution. That all changed with HTML5 when the Download Attribute was introduced. Now, developers can add a special download attribute to their HTML anchor tags to tell browsers to treat a link as a download, rather than opening the target file. There are a few different ways that you can use the Download Attribute to control the way browsers handle your download links. Even better, all modern browsers support the Download Attribute, so you shouldn't see any issues with compatibility or the need for a fallback. There are a few different ways that you can handle the Download Attribute. Each has its own benefit, and they all work smoothly across different browsers. The Plain Download Attribute The simplest way to use the Download Attribute is to just include it in its most basic form in your anchor tags. You don't need to include an additional file name or any supporting information. The result looks like this: <a href="/path/to/download.pdf" download>Download Now!</a> By including "download" you're telling any browser reading the page to download the target link instead of opening it. In this instance, the browser will download the file exactly as it is with the same name. Changing the File Name What happens if you actually want to change the name. There are plenty of occasions where you'd want to do this. Automatically generated file names are a good example. They usually have ridiculously long names with strings of garbage characters. That's not the experience you want for your visitors. You can standardize things with the Download Attribute. To specify a file name, set the download attribute equal to it. Exclude the file extension. The browser can't and won't convert the file type, so there's no sense in trying. <a href="/path/to/download.pdf" download="your-file">Download Now!</a> Your visitors will download the file as your-file.pdf. Downloading an Image Along with this comes a simplified way to let your users download images directly. This isn't revolutionary, and you can probably piece it together yourself, but you can use the download attribute to create a downloadable image link. Start by setting up an image like you normally would on your page. This, of course, will be the image that's available for download. <img src="/path/to/image.jpg" alt="my image"> Then, encapsulate the whole thing in an anchor tag, linking to the image path. <a href="/path/to/image.jpg"> <img src="/path/to/image.jpg" alt="my image"></a> Finally, add in the download attribute to your anchor tag. You can change the name of your image if you like. <a href="/path/to/image.jpg" download="image-download"> <img src="/path/to/image.jpg" alt="my image"></a> Now, when a visitor clicks the image, they'll automatically download it directly from your server. It's not necessary, and it might seem like overkill to a developer, but how many site visitors would think to right-click on an image to view or download it?