Apuntes sobre Html2

Rutas y enlaces

¿Qué es una ruta?

Una página HTML no contiene imágenes, hojas de estilo ni otros archivos. Lo que contiene son rutas: direcciones que le indican al navegador dónde encontrar esos recursos. Cuando el navegador carga la página, hace una petición separada por cada recurso que encuentra en esas rutas.

Si la ruta es incorrecta, el recurso no aparece: imagen rota, estilo que no carga, enlace que falla. Entender cómo funcionan las rutas es imprescindible antes de hablar de enlaces.

Rutas absolutas

Una ruta absoluta incluye la dirección completa: protocolo, dominio y ruta al archivo.

<img src="https://www.example.com/images/logo.png" alt="Logo">
<a href="https://www.w3.org">Sitio del W3C</a>

La ruta absoluta es independiente de dónde esté tu archivo HTML: siempre apunta al mismo lugar. Se usa cuando el recurso está en otro servidor, o cuando quieres evitar ambigüedades en estructuras de sitio complejas.

El inconveniente es que si cambias de dominio, todas las rutas absolutas internas hay que actualizarlas. Para recursos dentro de tu propio sitio, las rutas relativas son más robustas.

Rutas relativas

Una ruta relativa indica la ubicación del recurso respecto al archivo HTML actual. El navegador asume que el recurso está en el mismo servidor, y construye la URL completa a partir de ahí.

Hay tres situaciones básicas:

Misma carpeta: basta con el nombre del archivo.

<img src="foto.jpg" alt="Foto">

Subcarpeta: se indica la ruta desde el archivo actual hacia abajo.

<img src="images/foto.jpg" alt="Foto">
<img src="images/verano/playa.jpg" alt="Playa">

Carpeta superior: ../ sube un nivel en el árbol de directorios. Se puede encadenar.

<img src="../images/foto.jpg" alt="Foto">   <!-- sube un nivel -->
<img src="../../images/foto.jpg" alt="Foto"> <!-- sube dos niveles -->

Con esta estructura de ejemplo:

example.com/
├── index.html
├── images/
│   └── apple.png
└── personal/
    └── excursion/
        └── excursion.html

Desde excursion.html hacia apple.png la ruta sería ../../images/apple.png: un ../ sube a personal/, el siguiente sube a la raíz, y luego se entra en images/.

Tres formas de ruta: images/apple.png, /images/apple.png y ./images/apple.png

A primera vista parecen variantes menores, pero el punto de partida es distinto en cada caso:

Forma	Punto de partida	Ejemplo resuelto
images/apple.png	Directorio del archivo HTML actual	Si el HTML está en pages/blog/post.html, busca pages/blog/images/apple.png
./images/apple.png	Directorio del archivo HTML actual (igual que el anterior)	El ./ significa explícitamente "directorio actual". El resultado es idéntico a la forma sin punto
/images/apple.png	Raíz del sitio (el dominio)	Siempre resuelve a example.com/images/apple.png, sin importar donde esté el HTML

La barra inicial es la diferencia clave. Sin ella, la ruta es relativa al documento: si el archivo HTML se mueve, la ruta puede romperse. Con barra inicial, la ruta es relativa al sitio: funciona igual desde cualquier página del dominio, lo que la hace más robusta para recursos compartidos como logos, hojas de estilo o iconos.

Nota: Los servidores Linux distinguen mayúsculas de minúsculas. foto.jpg y Foto.jpg son archivos distintos. Usa siempre minúsculas en los nombres de archivo, sin espacios ni acentos: es la convención universal y evita problemas al subir al servidor.

La etiqueta <a>

Los enlaces son la "H" de HTML: la razón por la que la web es una red de páginas conectadas y no una colección de documentos aislados. La etiqueta <a> (de anchor, ancla) crea esa conexión:

<a href="https://www.w3.org">Sitio del W3C</a>

El atributo href (Hypertext Reference) indica el destino: puede ser una URL absoluta, una ruta relativa, un ancla interna o una instrucción especial como mailto:. Lo que va entre las etiquetas es el contenido clicable: texto, imagen, o ambos.

Para enlazar páginas dentro del mismo sitio se usan rutas relativas:

<a href="index.html">Página principal</a>
<a href="pages/contacto.html">Contacto</a>
<a href="../index.html">Volver arriba</a>

El texto del enlace importa: "haz clic aquí" no dice nada. "Guía de accesibilidad del W3C" sí. Los lectores de pantalla y los motores de búsqueda leen el texto del enlace para entender a dónde lleva.

El atributo title añade un tooltip que aparece al pasar el cursor sobre el enlace. Puede parecer útil para añadir información sin alargar el texto visible, pero tiene limitaciones importantes: no funciona en pantallas táctiles (no hay cursor), y algunos lectores de pantalla no lo anuncian de forma consistente. Úsalo solo para información verdaderamente opcional, y nunca como sustituto de un texto de enlace claro.

<a href="informe.pdf" title="PDF, 2,4 MB">Informe anual 2024</a>

Anclas internas: #id

Un enlace puede apuntar a una sección específica de la misma página, o de otra. El destino se marca con un id en cualquier elemento, y el enlace añade # seguido de ese identificador:

<!-- El enlace -->
<a href="#contacto">Ir a contacto</a>

<!-- El destino, más abajo en la página -->
<h2 id="contacto">Contacto</h2>

Al hacer clic, el navegador desplaza la página hasta el elemento con ese id. El índice de esta misma lección funciona así.

También se puede combinar con una URL para saltar a una sección de otra página:

<a href="manual.html#capitulo2">Capítulo 2</a>

Abrir en nueva pestaña: target

Por defecto, un enlace reemplaza la página actual en la misma pestaña. Con target="_blank" se abre en una nueva:

<a href="https://www.w3.org" target="_blank" rel="noopener noreferrer">
    W3C (abre en nueva pestaña)
</a>

El atributo rel="noopener noreferrer" siempre debe acompañar a target="_blank". Sin él, la página destino podría acceder mediante JavaScript al objeto window de la página original, lo que es un vector de ataque conocido. noopener corta esa conexión. noreferrer además evita que se envíe la cabecera Referer con la petición, ocultando de qué página proviene el usuario.

Úsalo con criterio: abrir pestañas sin que el usuario lo espere puede desorientar. Para enlaces externos es razonable; para navegación interna del sitio, raramente.

El atributo download

Cuando el destino es un archivo descargable, download indica al navegador que lo descargue en lugar de abrirlo. Opcionalmente se puede sugerir un nombre:

<a href="files/manual.pdf" download>Descargar manual</a>
<a href="files/datos.csv" download="informe-2025.csv">Descargar informe</a>

Solo funciona para recursos del mismo origen (mismo dominio). Para archivos externos, el comportamiento depende del servidor y el navegador.

Enlace de correo: mailto:

Un enlace mailto: abre el cliente de correo del usuario con la dirección ya rellenada:

<a href="mailto:contacto@example.com">Escríbenos</a>

Se pueden añadir parámetros en la URL: asunto, CC, BCC y cuerpo:

<a href="mailto:contacto@example.com?subject=Consulta%20sobre%20HTML&cc=soporte@example.com">
    Enviar consulta
</a>

Los espacios en la URL se codifican como %20. El separador entre parámetros es & (o & si escribes HTML estricto).

El inconveniente es que depende de que el usuario tenga un cliente de correo configurado, algo que no siempre es el caso en móviles o equipos compartidos. Para formularios de contacto más robustos, lo habitual es un formulario HTML con procesamiento en el servidor.

Imágenes como enlace

Cualquier contenido puede ir dentro de un <a>, incluidas imágenes. El área clicable es la imagen entera:

<a href="https://www.apache.org">
    <img src="images/apache-logo.png" alt="Sitio de Apache" width="120" height="40">
</a>

El alt de la imagen hace las veces de texto del enlace para lectores de pantalla, así que debe describir el destino, no la imagen en sí. "Logo de Apache" es correcto; si el logo conduce a la página de Apache, "Sitio de Apache" sería aún mejor.

Los navegadores modernos no añaden borde a las imágenes enlazadas, pero si necesitas dar soporte a navegadores muy antiguos, border: none en CSS lo elimina. El atributo HTML border="0" está obsoleto.

Nota: CSS permite controlar completamente el aspecto de los enlaces según su estado: no visitado, visitado, al pasar el cursor, al hacer clic. Lo veremos en detalle en la lección de selectores, cuando ya tengamos las bases de CSS.

role="button" en un enlace

En ocasiones se usa <a> sin href como elemento interactivo controlado por JavaScript, en lugar de un <button>. En ese caso, el atributo role="button" le indica al navegador y a los lectores de pantalla que el elemento debe tratarse como un botón, no como un enlace:

<a role="button" onclick="abrirModal()">Ver detalles</a>

Sin role="button", un lector de pantalla lo anunciaría como "enlace" pero sin destino, lo que confunde al usuario. Con él, lo anuncia como "botón". Dicho esto, si un elemento actúa como botón lo más directo es usar <button>: ya tiene el comportamiento de teclado correcto (activación con Espacio y Enter) sin necesidad de añadir nada más.

Cortesía y derechos de autor

Enlazar a otras páginas es perfectamente legítimo: es la naturaleza de la web, no necesitas permiso para hacerlo. Pero hay matices:

Hotlinking es insertar en tu página imágenes (u otros recursos) que están en el servidor de otro. La imagen aparece en tu sitio, pero el ancho de banda lo paga el dueño original. Es mala práctica y puede ser ilegal dependiendo del contexto. Usa recursos propios o alojados en un CDN con licencia adecuada.

Para imágenes externas, verifica la licencia antes de usarlas. Bancos de imágenes como Unsplash, Pexels o Pixabay ofrecen licencias claras. Creative Commons especifica exactamente qué usos permite cada obra.

Material histórico

Antes de HTML5, los anclas internas se creaban con el atributo name en una etiqueta <a> vacía:

<!-- Método antiguo -->
<a name="seccion1"></a>
<h2>Sección 1</h2>

<!-- Método actual -->
<h2 id="seccion1">Sección 1</h2>

El método con name sigue funcionando en navegadores modernos por compatibilidad, pero está obsoleto. Usar id directamente en el elemento destino es más limpio: no añade un nodo extra al HTML y el mismo id sirve como selector CSS.

Los enlaces FTP (ftp://) eran comunes para distribuir software en los años 90. Hoy los navegadores modernos han eliminado el soporte nativo para FTP; las descargas se sirven por HTTPS.

Tu proyecto

Abre proyecto.html y añade una navegación sencilla con tres anclas internas: las secciones que ya tienes (presentación, cita) y una que crearás más adelante (contacto). Añade también un enlace de correo al final.

<nav>
  <a href="#presentacion">Inicio</a>
  <a href="#proyectos">Proyectos</a>
  <a href="#contacto">Contacto</a>
</nav>

<!-- más abajo, donde empieza tu presentación: -->
<h1 id="presentacion">Laura Suárez</h1>

<!-- al final del body: -->
<p><a href="mailto:laura@ejemplo.com">laura@ejemplo.com</a></p>

Los enlaces del menú no van a ningún sitio todavía, pero la estructura está. Cuando añadas más contenido irás enlazando las secciones.

Recapitulación

• Una página HTML apunta a recursos mediante rutas. Si la ruta es incorrecta, el recurso no carga.
• Las rutas absolutas incluyen dominio completo y funcionan desde cualquier contexto. Las relativas se calculan desde la posición del archivo HTML actual y son más portátiles dentro del mismo sitio.
• ../ sube un nivel en el árbol de directorios. Se encadena: ../../ sube dos niveles.
• La etiqueta <a href="..."> crea un enlace. El texto entre las etiquetas debe describir el destino, no decir "clic aquí". El atributo title añade un tooltip opcional, pero no sustituye a un texto de enlace claro y no funciona en táctil.
• Los anclas internas usan id en el elemento destino y #id en el href del enlace.
• target="_blank" abre en nueva pestaña. Siempre con rel="noopener noreferrer" por seguridad.
• download fuerza la descarga en lugar de abrir el archivo. Solo funciona con recursos del mismo origen.
• mailto: abre el cliente de correo. Admite ?subject=, &cc= y otros parámetros.
• Hotlinking (usar imágenes de otros servidores sin permiso) es mala práctica. Enlazar páginas externas es completamente legítimo.
• El atributo name en <a> para anclas internas es obsoleto; usa id en el elemento destino.

En la próxima lección: imágenes y multimedia: <img>, formatos, texto alternativo, y cómo hacer que las imágenes sean responsivas con CSS.