How to make a file download link

Short answer

Add the download attribute to the link — the browser saves the file instead of opening it:

<a href="/media/menu.pdf" download>Download the menu</a>

A custom file name

The attribute value becomes the name of the saved file. Better keep the same extension as the original file:

<a href="/media/photo-400x250.jpg" download="flower.jpg">Download the photo</a>

Hinting the type and size

It helps the user to know what they download and how heavy it is — especially on mobile data. The link can be styled as a button:

<style>
  .file { display: inline-flex; gap: 8px; align-items: baseline; padding: 8px 14px; border: 1px solid silver; border-radius: 8px; color: inherit; text-decoration: none; }
  .file small { color: gray; }
</style>
 
<a class="file" href="/media/menu.pdf" download>⬇ Menu <small>PDF, 1 KB</small></a>

Common mistake

download is put on a link to another site, and the file simply opens. The attribute works only for files from the same domain as the page (and for blob: and data: addresses). For foreign files the browser ignores it — the server itself must then enable the download with the Content-Disposition: attachment header.