The download attribute on <a> tells the browser to download the linked file instead of navigating to or displaying it.
Syntax
<a href="/files/resume.pdf" download>Download Resume</a>
<a href="/files/resume.pdf" download="Aman-Resume.pdf">Download Resume</a>Basic Example
<a href="/downloads/course-brochure.pdf" download>
Download Course Brochure (PDF)
</a>Browser output: instead of opening the PDF in a new tab or the browser's built-in PDF viewer, clicking triggers a file save/download prompt straight away.
How It Works
- Without
download, clicking a link to a PDF or image typically opens it directly in the browser. - Adding
downloadoverrides that — the browser saves the file to disk instead. - Giving
downloada value (likedownload="Aman-Resume.pdf") sets the suggested filename the browser offers when saving, regardless of the file's actual name on the server.
Important Attributes
| Attribute | Purpose |
|---|---|
download | Forces a download; an optional value sets the suggested saved filename |
href | Must point to the actual file being downloaded |
Real-World Example
<ul>
<li><a href="/syllabus/data-science.pdf" download>Data Science Syllabus (PDF, 1.2MB)</a></li>
<li><a href="/syllabus/full-stack.pdf" download>Full Stack Syllabus (PDF, 980KB)</a></li>
</ul>A resources page offering syllabus PDFs as direct downloads — exactly the kind of link where forcing a download (instead of opening a new tab) is genuinely the better experience.
Common Mistakes
- Expecting
downloadto work reliably on a cross-origin link (a file hosted on a different domain) — most browsers ignore the attribute in that case for security reasons, and simply navigate to the file instead - Forgetting that
downloadonly applies to<a>elements — it has no effect if mistakenly placed on other tags - Not indicating file type or size in the link text, leaving visitors to guess what they're about to download
Best Practices
- Only rely on
downloadfor same-origin files (hosted on your own domain) - Clearly state the file type and, where helpful, its approximate size in the link text
- Use the value form (
download="filename.pdf") when you want a cleaner suggested filename than the one on the server
Accessibility Considerations
Announce that a link triggers a download, not navigation, directly in its text — "Download Resume (PDF)" sets clear expectations for all users, including those on screen readers who won't see a file-type icon.
SEO Considerations
No direct ranking effect, though downloadable resources (guides, syllabi, brochures) can be a genuine source of backlinks and engagement when they're genuinely useful.
Browser & Modern HTML Notes
Well-supported in all modern browsers for same-origin files; cross-origin behavior is intentionally restricted as a security measure and depends on the destination server's CORS configuration.
Mini Practice
- Add a download link for a same-origin PDF, including its file type and size in the link text.
- Give that download link a custom suggested filename using
download="...".
Module 3 Practice Lab
Quick Practice
Build a "Contact & Resources" section with one internal link, one external link (with rel="noopener"), one mailto: link, and one tel: link.
Challenge
Audit a sample navigation menu that uses target="_blank" on every link (including internal ones) and fix it — only the genuinely external link should open in a new tab, with the correct rel value.
Mini Project — Resource Download Page
Build a "Free Resources" page listing three downloadable PDFs using the download attribute, an external link to a relevant outside article (properly secured with rel="noopener"), an internal link back to the homepage, and a footer with both a mailto: and a tel: contact link.
