Download links
Create downloadable file links with the download attribute.
What is the download attribute?
When you add the download attribute to an <a> tag, the browser saves the file instead of opening it. This is handy when you want the user to fetch a report, a PDF or an image.
Basic usage looks like this: <a href="/files/report-2026.pdf" download>Download report</a>. When the link is clicked, the browser opens a save dialog. If you want to pick the file name yourself, the next card shows how.
Setting a file name with download
If you give the download attribute a value, the browser saves the file with that name. For example, <a href="/files/report-2026.pdf" download="report.pdf">Download</a> saves the file as report.pdf.
This works best for files on your own server. For files from other servers the browser may ignore download for security reasons. Avoiding non-ASCII letters in the file name is also a good habit; it prevents trouble during saving.
Exercise Write a downloadable PDF link
Write an <a> link. Its href goes to /files/report-2026.pdf. Give it a download attribute and set the file name to report.pdf. The link text should be Download annual report.
Show example solution
<a href="/files/report-2026.pdf" download="report.pdf">Download annual report</a>Test yourself
-
Which attribute makes a link download instead of open?
- download
- href
- target
- rel
Show answer
download — Correct. The download attribute makes the link act as a download.
-
Write the download attribute
<a href="/files/report-2026.pdf" ____>Download report</a>Show answer
<a href="/files/report-2026.pdf" download>Download report</a> -
Match each attribute to its role
- download
- Makes the link downloadable
- href
- Sets the link target
- target
- Sets where the link opens
- rel
- States the link relation