Enlaces HTML

La codificación URL explicó cómo viajan los caracteres especiales dentro de una dirección. Esta sesión construye la herramienta HTML cotidiana que usa esas direcciones: el elemento ancla a con un href. Los enlaces son cómo los visitantes se mueven entre tus páginas y hacia la web más amplia. Destinos claros y texto clicable claro importan tanto como el markup correcto.

Qué es un enlace

Un hipervínculo es un control que navega a algún sitio al activarse. En HTML envuelves el contenido clicable — normalmente texto, a veces una imagen — en <a>...</a> y fijas href al destino. Sin href no tienes un enlace de navegación normal. El navegador estiliza los enlaces por defecto (a menudo subrayados y de color), pero lo importante es el destino y la redacción.

Respuesta directa

Escribe <a href="URL">clickable text</a>. El href puede ser una dirección web completa como https://www.example.com (absoluta) o una ruta a otro archivo de tu sitio como about.html (relativa). Los visitantes hacen clic en el contenido entre las etiquetas. Prefiere una redacción que describa el destino — «About this site» — frente a frases vacías como «click here».

Enlaces absolutos

Las URL absolutas incluyen un esquema (https:// o http://) y suele haber un host. Úsalas para sitios externos, o siempre que realmente necesites una dirección completa que no dependa de la carpeta actual.

Lectura de la muestra absoluta

• href contiene el destino completo que empieza por https://
• Las palabras Visit Example son lo que el usuario ve y activa
• Los errores tipográficos en el host o el esquema rompen el viaje aunque las etiquetas HTML sean válidas
• Los enlaces absolutos siguen beneficiándose de un texto honesto y descriptivo

Enlaces relativos en tu propio sitio

Las URL relativas apuntan a archivos respecto a la ubicación de la página actual. Son la forma cotidiana de conectar index.html con about.html sin repetir tu nombre de dominio. Aplican las habilidades de Rutas de archivos: carpetas incorrectas producen fallos 404 silenciosos.

Hábitos relativos que ayudan

• Mantén las páginas relacionadas en una estructura de carpetas clara
• Prefiere nombres de archivo con guiones y sin espacios
• Prueba ambos sentidos: inicio → about y about → inicio
• Recuerda que mover un archivo HTML sin actualizar los enlaces relativos rompe la navegación

El texto del enlace es contenido, no decoración

Quienes usan lectores de pantalla a menudo saltan por una lista de enlaces sin oír el párrafo circundante. «Click here» y «read more» repetidos diez veces se vuelven inútiles. Nombra el destino. Puedes sonar amable — solo sé específico.

Absoluto vs relativo — elige según el trabajo

• Sitio externo que no controlas → absoluto https://…
• Otra página de tu proyecto → ruta relativa cuando sea posible
• Los enlaces del mismo sitio escritos como absolutos siguen funcionando, pero los relativos se mantienen portátiles si renombras un dominio o abres archivos en local
  Sesiones posteriores cubren títulos en enlaces, marcadores (#) y enlaces de correo; domina primero a + href.

Enlaces rotos y 404

Si href apunta a un archivo inexistente o a un host mal escrito, el navegador navega a una página de error (a menudo HTTP 404). El HTML alrededor del enlace puede seguir viéndose perfecto. Verifica siempre las rutas igual que las de favicon y hojas de estilo: ortografía, carpetas y si el archivo destino se guardó.

Practica en tu editor

1. Crea index.html y about.html en la misma carpeta.
2. En la página de inicio, añade un enlace relativo a about.html con texto descriptivo.
3. En la página about, añade un enlace relativo de vuelta a index.html.
4. Añade un enlace absoluto a un sitio externo de confianza.
5. Sigue cada enlace en el navegador; luego rompe a propósito una ruta relativa, observa el fallo y corrígelo.
6. Reescribe cualquier texto «click here» como nombre de destino.

Errores fáciles

• Olvidar href de modo que el texto no sea un hipervínculo real
• Usar «click here» o «link» para cada destino
• Rutas relativas rotas tras mover archivos entre carpetas
• Errores tipográficos en https:// o el dominio de URL externas
• Poner espacios en nombres de archivo y luego preguntarse por qué fallan los enlaces relativos
• Anidar contenido interactivo con descuido (mantén los enlaces de principiante simples: texto dentro de a)

Resumen

• Los enlaces usan el elemento a con un destino href
• Las URL absolutas incluyen un esquema como https://
• Las URL relativas apuntan a otros archivos de tu sitio
• Escribe texto de enlace claro y descriptivo para todos — incluida la tecnología de asistencia
• Las rutas rotas fallan en el momento de navegar aunque las etiquetas parezcan válidas