Saltar al contenido principal

Ejercicio práctico 15: Enlaces de descarga

Descubre cómo crear enlaces de descarga en HTML para ofrecer archivos directamente desde tu sitio web. Aprende con un ejercicio práctico sencillo y útil para proyectos reales.

Actividad​

Crea un enlace que permita descargar un archivo. En una misma carpeta debes tener tu documento HTML y un archivo para descargar. El archivo para descargar puede estar a su vez en una subcarpeta, por ejemplo llamada "archivo". Prueba con un archivo en formato PDF.

Solución interactiva​

Logo DivZone de ad link
Plataforma IAConvierte el código en clientes.Pruébalo gratis

Solución con el código HTML completo​

HTML
<!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>

Variantes del mismo ejercicio​

Variante 1: Nombre de archivo personalizado en la descarga​

El atributo download puede especificar un nombre distinto al que el archivo tiene en el servidor. Ideal para ofrecer archivos con nombres descriptivos y amigables para el usuario.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Descarga con Nombre Personalizado</title>
  </head>
  <body>
    <h1>Recursos Descargables</h1>

    <p>
      <!-- El archivo en el servidor se llama "reporte-2026-q2-final-v3.pdf"
           pero el usuario lo descarga como "Reporte-Financiero-Q2-2026.pdf" -->
      <a
        href="archivo/reporte-2026-q2-final-v3.pdf"
        download="Reporte-Financiero-Q2-2026.pdf"
      >
        📊 Descargar Reporte Financiero Q2 2026
      </a>
    </p>

    <p>
      <a
        href="archivo/foto-temp-IMG_8472.jpg"
        download="Foto-Perfil-Profesional.jpg"
      >
        📸 Descargar Foto de Perfil
      </a>
    </p>

    <p>
      <a
        href="archivo/manual-v4.2-es.pdf"
        download="Manual-de-Usuario-DivZone.pdf"
      >
        📘 Descargar Manual de Usuario
      </a>
    </p>
  </body>
</html>

El valor de download es el nombre con el que el archivo se guarda en la computadora del usuario. Si solo ponés download sin valor, se usa el nombre original del servidor.

Variante 2: Descarga de imágenes​

No solo PDFs — cualquier tipo de archivo puede descargarse con el atributo download. Esto es útil para galerías de fotos, portfolios o bancos de imágenes.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Descargar Imágenes</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>Galería Descargable</h1>
    <p>Hacé clic en las imágenes para descargarlas en alta resolución.</p>

    <div class="galeria">
      <figure>
        <img src="img/paisaje-thumb.jpg" alt="Paisaje montañoso" />
        <figcaption>
          <a href="img/paisaje-hd.jpg" download="Paisaje-Montañoso-HD.jpg" class="descargar">
            ⬇ Descargar HD
          </a>
        </figcaption>
      </figure>

      <figure>
        <img src="img/ciudad-thumb.jpg" alt="Ciudad nocturna" />
        <figcaption>
          <a href="img/ciudad-hd.jpg" download="Ciudad-Nocturna-HD.jpg" class="descargar">
            ⬇ Descargar HD
          </a>
        </figcaption>
      </figure>

      <figure>
        <img src="img/playa-thumb.jpg" alt="Playa paradisíaca" />
        <figcaption>
          <a href="img/playa-hd.jpg" download="Playa-Paradisíaca-HD.jpg" class="descargar">
            ⬇ Descargar HD
          </a>
        </figcaption>
      </figure>
    </div>
  </body>
</html>

Variante 3: Descarga de archivos comprimidos (ZIP)​

Para ofrecer documentos pesados o múltiples archivos juntos, los archivos .zip son la mejor opción. El navegador los descarga automáticamente sin intentar abrirlos.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Descargar Recursos</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>Paquete de Recursos del Curso</h1>
    <p>Descargá todo el material complementario del curso de HTML en un solo archivo.</p>

    <div class="recurso">
      <h3>📦 Pack Completo de Ejercicios</h3>
      <p>Incluye los 20 ejercicios resueltos, imágenes de ejemplo y archivos de audio.</p>
      <p class="tamano">Tamaño: 15.4 MB | Formato: ZIP</p>
      <a href="archivo/ejercicios-html-completo.zip" download="Ejercicios-HTML-DivZone.zip" class="btn-descarga">
        ⬇ Descargar Pack Completo
      </a>
    </div>

    <div class="recurso">
      <h3>🎨 Assets Gráficos</h3>
      <p>Iconos, fondos y recursos visuales utilizados en los ejercicios.</p>
      <p class="tamano">Tamaño: 8.2 MB | Formato: ZIP</p>
      <a href="archivo/assets-graficos.zip" download="Assets-Graficos-DivZone.zip" class="btn-descarga">
        ⬇ Descargar Assets
      </a>
    </div>
  </body>
</html>

Ventaja del ZIP: el navegador siempre fuerza la descarga de archivos .zip, incluso sin el atributo download. Esto es más confiable que los PDFs, que algunos navegadores intentan abrir en una pestaña nueva.

Variante 4: Descarga de documentos de texto y Word​

Ofrecé documentación en formatos editables para que los usuarios puedan adaptar el contenido a sus necesidades.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Descargar Documentos</title>
  </head>
  <body>
    <h1>Centro de Descargas</h1>

    <h2>Documentación del Proyecto</h2>
    <ul>
      <li>
        <a href="archivo/guia-instalacion.docx" download="Guia-de-Instalacion.docx">
          📝 Guía de Instalación (Word)
        </a>
      </li>
      <li>
        <a href="archivo/requisitos-tecnicos.docx" download="Requisitos-Tecnicos.docx">
          📝 Requisitos Técnicos (Word)
        </a>
      </li>
      <li>
        <a href="archivo/notas-version.txt" download="Notas-de-Version.txt">
          📄 Notas de la Versión (Texto plano)
        </a>
      </li>
      <li>
        <a href="archivo/licencia.txt" download="Licencia-de-Uso.txt">
          ⚖️ Licencia de Uso (Texto plano)
        </a>
      </li>
    </ul>

    <p style="margin-top: 30px; color: #666; font-size: 14px;">
      ℹ️ Todos los documentos se actualizan mensualmente. Última actualización: Junio 2026.
    </p>
  </body>
</html>

Buenas y Malas Prácticas​

✅ Buena práctica❌ Mala práctica
Usar download="nombre-amigable.pdf" para archivos con nombres técnicosDejar nombres de archivo como IMG_20240615_183542.jpg
Incluir el tamaño del archivo junto al enlace de descargaNo avisar que un enlace dispara una descarga (el usuario espera navegar)
Verificar que el archivo exista en el servidor antes de publicarApuntar a archivos que ya no existen (enlace roto)
Usar .zip para múltiples archivos o archivos muy pesadosEsperar que todos los navegadores descarguen PDFs sin abrirlos primero
Especificar el formato en el nombre de descargaUsar download con archivos de otro dominio (no siempre funciona por CORS)
Ofrecer formatos editables (.docx, .txt) además de PDFOfrecer solo formatos propietarios sin alternativa abierta

Preguntas Frecuentes (FAQ)​

¿Por qué el atributo download no funciona con algunos archivos?​

El atributo download solo funciona con archivos alojados en el mismo origen (mismo dominio, protocolo y puerto). Si intentás usar download con una URL de otro dominio, el navegador lo ignora por seguridad. Para archivos externos, primero descargalos a tu servidor.

¿El atributo download afecta al SEO?​

No negativamente. Google interpreta los enlaces de descarga como enlaces normales. Si el nombre del archivo y el texto del enlace son descriptivos, podés mejorar la experiencia del usuario sin perjudicar el posicionamiento.

¿Se puede forzar la descarga de un PDF sin que el navegador lo abra?​

Con HTML puro, no siempre. Muchos navegadores ignoran download en PDFs y los abren en una pestaña. Para forzar la descarga 100% garantizada necesitás configurar el header Content-Disposition: attachment desde el servidor (usando .htaccess en Apache, nginx.conf en Nginx, o código en Node.js/PHP).

¿Puedo rastrear cuántas veces se descargó un archivo?​

Sí, pero no con HTML puro. Necesitás una solución de tracking del lado del servidor. En Google Analytics, por ejemplo, podés configurar eventos de descarga. Otra opción es que el enlace apunte a un script del servidor que registre la descarga y luego sirva el archivo.