Practical Exercise 15: Download Links
Discover how to create HTML download links to offer files directly from your website. Learn with a simple and useful practical exercise for real-world projects.
Activity
Create a link that allows a file to be downloaded. In the same folder, you must have your HTML document and a file to download. The download file can be in a subfolder, for example, called "file". Try it with a file in PDF format.
Interactive Solution
Solution with complete HTML code
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Enlace de Descarga</title>
</head>
<body>
<h1>Descargar Archivo</h1>
<a href="archivo/mi_documento.pdf" download>Descargar ⬇</a>
</body>
</html>
Variants of the Same Exercise
Variant 1: Custom File Name on Download
The download attribute can specify a name different from what the file has on the server. Ideal for offering files with descriptive and user-friendly names.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Download with Custom Name</title>
</head>
<body>
<h1>Downloadable Resources</h1>
<p>
<!-- The file on the server is called "reporte-2026-q2-final-v3.pdf"
but the user downloads it as "Financial-Report-Q2-2026.pdf" -->
<a
href="archivo/reporte-2026-q2-final-v3.pdf"
download="Financial-Report-Q2-2026.pdf"
>
📊 Download Financial Report Q2 2026
</a>
</p>
<p>
<a
href="archivo/foto-temp-IMG_8472.jpg"
download="Professional-Profile-Photo.jpg"
>
📸 Download Profile Photo
</a>
</p>
<p>
<a
href="archivo/manual-v4.2-es.pdf"
download="DivZone-User-Manual.pdf"
>
📘 Download User Manual
</a>
</p>
</body>
</html>
The value of download is the name with which the file is saved on the user's computer. If you just put download without a value, the original server name is used.
Variant 2: Image Downloads
Not just PDFs — any file type can be downloaded with the download attribute. This is useful for photo galleries, portfolios, or image banks.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Download Images</title>
<style>
.galeria {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.galeria figure {
margin: 0;
text-align: center;
}
.galeria img {
width: 200px;
height: 150px;
object-fit: cover;
border-radius: 8px;
display: block;
margin-bottom: 8px;
}
.descargar {
display: inline-block;
padding: 6px 14px;
background: #28a745;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Downloadable Gallery</h1>
<p>Click on the images to download them in high resolution.</p>
<div class="galeria">
<figure>
<img src="img/paisaje-thumb.jpg" alt="Mountain landscape" />
<figcaption>
<a href="img/paisaje-hd.jpg" download="Mountain-Landscape-HD.jpg" class="descargar">
⬇ Download HD
</a>
</figcaption>
</figure>
<figure>
<img src="img/ciudad-thumb.jpg" alt="Night cityscape" />
<figcaption>
<a href="img/ciudad-hd.jpg" download="Night-City-HD.jpg" class="descargar">
⬇ Download HD
</a>
</figcaption>
</figure>
<figure>
<img src="img/playa-thumb.jpg" alt="Paradise beach" />
<figcaption>
<a href="img/playa-hd.jpg" download="Paradise-Beach-HD.jpg" class="descargar">
⬇ Download HD
</a>
</figcaption>
</figure>
</div>
</body>
</html>
Variant 3: Compressed File Downloads (ZIP)
For offering heavy documents or multiple files together, .zip files are the best option. The browser automatically downloads them without trying to open them.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Download Resources</title>
<style>
.recurso {
border: 1px solid #ddd;
padding: 16px;
margin: 12px 0;
border-radius: 8px;
background: #f9f9f9;
}
.recurso h3 {
margin-top: 0;
}
.btn-descarga {
display: inline-block;
padding: 10px 20px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: bold;
}
.tamano {
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Course Resource Pack</h1>
<p>Download all supplementary course material for HTML in a single file.</p>
<div class="recurso">
<h3>📦 Complete Exercise Pack</h3>
<p>Includes the 20 solved exercises, sample images, and audio files.</p>
<p class="tamano">Size: 15.4 MB | Format: ZIP</p>
<a href="archivo/ejercicios-html-completo.zip" download="HTML-Exercises-DivZone.zip" class="btn-descarga">
⬇ Download Complete Pack
</a>
</div>
<div class="recurso">
<h3>🎨 Graphic Assets</h3>
<p>Icons, backgrounds, and visual resources used in the exercises.</p>
<p class="tamano">Size: 8.2 MB | Format: ZIP</p>
<a href="archivo/assets-graficos.zip" download="Graphic-Assets-DivZone.zip" class="btn-descarga">
⬇ Download Assets
</a>
</div>
</body>
</html>
ZIP advantage: the browser always forces the download of .zip files, even without the download attribute. This is more reliable than PDFs, which some browsers try to open in a new tab.
Variant 4: Text and Word Documents Download
Offer documentation in editable formats so users can adapt the content to their needs.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Download Documents</title>
</head>
<body>
<h1>Download Center</h1>
<h2>Project Documentation</h2>
<ul>
<li>
<a href="archivo/guia-instalacion.docx" download="Installation-Guide.docx">
📝 Installation Guide (Word)
</a>
</li>
<li>
<a href="archivo/requisitos-tecnicos.docx" download="Technical-Requirements.docx">
📝 Technical Requirements (Word)
</a>
</li>
<li>
<a href="archivo/notas-version.txt" download="Release-Notes.txt">
📄 Release Notes (Plain Text)
</a>
</li>
<li>
<a href="archivo/licencia.txt" download="License-Agreement.txt">
⚖️ License Agreement (Plain Text)
</a>
</li>
</ul>
<p style="margin-top: 30px; color: #666; font-size: 14px;">
ℹ️ All documents are updated monthly. Last update: June 2026.
</p>
</body>
</html>
Best Practices and Common Mistakes
| ✅ Best Practice | ❌ Common Mistake |
|---|---|
Use download="friendly-name.pdf" for files with technical names | Leave file names like IMG_20240615_183542.jpg |
| Include the file size next to the download link | Not warning that a link triggers a download (the user expects to navigate) |
| Verify that the file exists on the server before publishing | Point to files that no longer exist (broken link) |
Use .zip for multiple files or very heavy files | Expect all browsers to download PDFs without opening them first |
| Specify the format in the download name | Use download with files from another domain (doesn't always work due to CORS) |
| Offer editable formats (.docx, .txt) in addition to PDF | Offer only proprietary formats without an open alternative |
Frequently Asked Questions (FAQ)
Why doesn't the download attribute work with some files?
The download attribute only works with files hosted on the same origin (same domain, protocol, and port). If you try to use download with a URL from another domain, the browser ignores it for security reasons. For external files, first download them to your server.
Does the download attribute affect SEO?
Not negatively. Google interprets download links as normal links. If the file name and link text are descriptive, you can improve the user experience without harming rankings.
Can I force a PDF download without the browser opening it?
With pure HTML, not always. Many browsers ignore download on PDFs and open them in a new tab. To force a 100% guaranteed download, you need to configure the Content-Disposition: attachment header from the server (using .htaccess in Apache, nginx.conf in Nginx, or server-side code in Node.js/PHP).
Can I track how many times a file was downloaded?
Yes, but not with pure HTML. You need a server-side tracking solution. In Google Analytics, for example, you can set up download events. Another option is for the link to point to a server script that logs the download and then serves the file.