Download link

Intro

You can turn a link into a download link using the download attribute. This will allow users to download files instead of visiting pages in your web browser. You can use them to let users download images, PDF files, HTML files, or other types of files.

Steps

Add anchor element

First, type a and press Tab. Type index.html for the href value and Download HTML template for the text in between the tags.

<a href="index.html">Download HTML template</a>

Check preview

If you check the preview, you should see a link that says “Download HTML template”. Right now, this is just a normal link to the homepage. To turn it into a download link, add the download attribute after the href value.

<a href="index.html" download>Download HTML template</a>

If you click on the link in the preview, you will be prompted to download the file. The filename will default to index.html, since that’s the name of the original file. If you want to customize the filename, you can give the download attribute a value. Add an equals sign, a pair of quotes, and the name template.html in between the quotes.

<a href="index.html" download="template.html">Download HTML template</a>

Now if you click on the link in the preview, you’ll be prompted to download the file again, but the filename will say template.html instead of index.html.

Final code

<a href="about.html">Internal link</a>
<a href="https://example.com/" target="_blank">External link</a>
<a href="#last-section">Go to last section</a>
<a href="mailto:">Send email to our help team</a>
<a href="index.html" download="">Download HTML template</a>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<h2 id="">Last section</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>

<a href="#top">Back to top</a>