Curso de HTML / Enlaces HTML: rutas, fragmentos, correo y descargas

Un enlace HTML se crea con a y su destino se escribe en href. Puede abrir otra página, apuntar a una sección mediante su identificador, iniciar un correo o proponer la descarga de un archivo. El texto visible debe indicar el destino o la acción de forma comprensible antes de abrirlo.

Crear un enlace con un destino real

El primer ejemplo conecta con el artículo en inglés sobre listas de este sitio. La dirección es el destino y “HTML lists tutorial” es el texto visible; no son dos versiones del mismo dato.

<a href="https://www.codingfactory.net/en/15489">HTML lists tutorial</a>

La explicación en español se encuentra en las listas ol, ul y dl. Un a sin href no se comporta como un enlace de navegación normal. Escribir href="#" para simular un destino puede mover la página al principio: si una acción no consiste en navegar, considera un botón con el comportamiento adecuado.

Resolver rutas desde la página de origen

Una URL absoluta incluye el origen, como https://…. Una ruta relativa se interpreta desde la ubicación del documento que contiene el enlace. Para esta práctica crea exactamente la siguiente estructura; sus archivos de presentación y contacto son ejemplos locales, no rutas existentes de Coding Factory.

site/

  contact.html

  lessons/

    index.html

    about.html

Escribe los siguientes enlaces dentro de lessons/index.html:

<a href="https://www.codingfactory.net/en/15489">Full URL</a>

<a href="about.html">About page in this folder</a>

<a href="../contact.html">Contact page one folder up</a>

<a href="/en/15489">HTML lists on this site</a>

about.html busca un archivo en la carpeta actual; ../contact.html sube un nivel. Una ruta que empieza por / comienza desde la raíz del sitio. Con file://, esa raíz no equivale a la de un alojamiento web, por lo que conviene volver a comprobar los enlaces al publicar.

Navegar a un fragmento del documento

Asigna al destino un id único y utiliza # seguido del mismo valor. El fragmento debe coincidir exactamente con el identificador:

<a href="#contact">Go to contact details</a>



<h2 id="contact">Contact</h2>

<p>Contact information goes here.</p>

Para un destino en otro archivo, añade el fragmento a su ruta, como about.html#contact. Comprueba tanto que el archivo existe como que contiene ese ID. No repitas un identificador en una página ni supongas que el texto de un encabezado crea automáticamente el ID que necesitas.

Correo, pestañas nuevas y descargas

Un enlace mailto: solicita al programa de correo configurado que prepare un mensaje. No envía el correo automáticamente, y puede no funcionar de la manera esperada si no existe un manejador configurado.

<a href="mailto:hello@example.com">Send an email</a>

target="_blank" solicita otro contexto de navegación; las preferencias del navegador pueden determinar si aparece una pestaña o una ventana. En los enlaces externos de este sitio se añaden rel="noopener noreferrer". El ejemplo siguiente abre la documentación externa de MDN:

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a"

   target="_blank" rel="noopener noreferrer">MDN's a element reference</a>

El atributo download propone descargar el recurso. Este ejemplo utiliza una imagen del mismo origen:

<a href="/wp-content/uploads/html-image-sample-lake-tree-1600-v1.webp" download>Download the example image</a>

No permite obligar a descargar cualquier URL externa. Se aplica a recursos del mismo origen y a URL blob: o data:; la respuesta del servidor y las preferencias del navegador también pueden afectar al resultado. La referencia de enlaces de MDN detalla esas condiciones.

Probar tres documentos completos

Guarda cada bloque en el archivo indicado y conserva la estructura de carpetas anterior. El primer archivo es site/lessons/index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Path practice home</title>
</head>
<body>
  <h1>Path practice home</h1>
  <nav aria-label="Practice menu">
    <a href="about.html">About</a>
    <a href="../contact.html">Contact</a>
  </nav>
</body>
</html>

El segundo es site/lessons/about.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>About</title>
</head>
<body>
  <h1>About</h1>
  <nav aria-label="Practice menu">
    <a href="index.html">Practice home</a>
    <a href="../contact.html">Contact</a>
  </nav>
</body>
</html>

El tercero es site/contact.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact</title>
</head>
<body>
  <h1>Contact</h1>
  <nav aria-label="Practice menu">
    <a href="lessons/index.html">Practice home</a>
    <a href="lessons/about.html">About</a>
  </nav>
</body>
</html>

Abre el primero y visita las otras dos páginas. Desde contacto, los destinos empiezan por lessons/, porque el archivo de origen está una carpeta más arriba. Compara el recorrido con la barra de direcciones y utiliza el historial para volver.

Cambia temporalmente un nombre en un href, comprueba el fallo y restáuralo. Si algo no abre, resuelve la ruta desde la carpeta del documento de origen antes de adivinar otro nombre. Revisa también las mayúsculas, especialmente después de desplegar en un servidor. El proyecto de un sitio de varias páginas aplica estas comprobaciones a un menú común.

Antes de compartir los archivos, prueba cada enlace desde su ubicación real. Verifica los fragmentos, identifica los enlaces externos que abren otro contexto y no prometas un envío de correo o una descarga forzada cuando el comportamiento depende del entorno del visitante.