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

Next lesson: Ping and rel types

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies