La etiqueta <a> es la forma en que HTML conecta páginas entre sí, convirtiendo texto o imágenes en enlaces que el usuario puede pulsar.
¿Alguna vez te preguntaste cómo funciona ese menú de navegación que ves en casi todos los sitios web? Todo empieza con una sola etiqueta. Y hoy vas a dominarla.
La etiqueta <a>: tu puerta a otros lugares
La etiqueta <a> significa anchor (ancla en inglés). Su trabajo es conectar una cosa con otra. Puede llevar al usuario a otra página, a otro sitio web, o incluso a una sección dentro de la misma página.
Su estructura básica es así:
<a href="https://www.mercadolibre.com.mx">Visita Mercado Libre</a>
El atributo href le dice al navegador a dónde ir. El texto entre las etiquetas es lo que el usuario ve en pantalla. Sin href, el enlace no lleva a ningún lado.
La historia de Rodrigo y su primera tienda en línea
Rodrigo tiene 24 años y vive en Monterrey. Quiere crear un sitio web para vender accesorios para mascotas. Ya aprendió a usar encabezados, párrafos e imágenes. Pero cuando quiso conectar su página de inicio con su catálogo de productos, no sabía cómo.
Escribió esto y no funcionó:
<a>Ver catálogo</a>
El texto apareció, pero no era un enlace. Rodrigo olvidó el atributo href. Lo corrigió así:
<a href="catalogo.html">Ver catálogo</a>
Ahora sí. El usuario hace clic y va directo al catálogo. Rodrigo aprendió que href no es opcional: es el corazón del enlace.
Rutas relativas vs. rutas absolutas
Esta es la diferencia que más confunde a los principiantes. Pero es sencilla cuando la ves con un ejemplo real.
Ruta absoluta es la dirección completa de un sitio web. Incluye https:// al inicio:
<a href="https://www.liverpool.com.mx">Liverpool</a>
Usa rutas absolutas cuando quieras mandar al usuario a otro sitio web diferente al tuyo.
Ruta relativa es la dirección de un archivo dentro de tu propio proyecto. No incluye https://:
<a href="contacto.html">Contáctanos</a>
Esto busca el archivo contacto.html en la misma carpeta donde está tu página actual. Si el archivo está en una subcarpeta, lo escribes así:
<a href="paginas/contacto.html">Contáctanos</a>
¿Cuándo usar cada una? Regla simple: si el destino está en tu proyecto, usa relativa. Si está en otro sitio web, usa absoluta.
El proyecto de Valeria: tres páginas conectadas
Valeria trabaja como diseñadora freelance en Ciudad de México. Está construyendo un portafolio personal con tres páginas: inicio, proyectos y contacto. Tiene esta estructura de archivos:
portafolio/
├── index.html
├── proyectos.html
└── contacto.html
En su archivo index.html, agregó estos enlaces:
<a href="proyectos.html">Mis proyectos</a>
<a href="contacto.html">Contacto</a>
Todo funcionó perfecto. Los tres archivos están en la misma carpeta, así que las rutas relativas son suficientes. Valeria no necesitó escribir https:// para nada.
Ello le ahorró tiempo y evitó errores. Si en el futuro sube su sitio a un servidor, las rutas relativas seguirán funcionando sin ningún cambio.
Abrir un enlace en una pestaña nueva
A veces quieres que el usuario no abandone tu sitio. Por ejemplo, si incluyes un enlace a FEMSA o a Bimbo, probablemente no quieres que tu página desaparezca. Para eso existe el atributo target="_blank":
<a href="https://www.femsa.com" target="_blank">Visita FEMSA</a>
Esto abre el enlace en una pestaña nueva. El usuario ve el sitio externo sin perder el tuyo. Es una práctica muy común en sitios profesionales.
Construir un menú de navegación básico
Un menú de navegación es simplemente una lista de enlaces. Y ya sabes usar listas. Combina <ul> con <a> y tienes tu primer menú:
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="productos.html">Productos</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
La etiqueta <nav> le dice al navegador que este bloque es una zona de navegación. No cambia cómo se ve, pero mejora la accesibilidad y el SEO. Es una buena práctica usarla siempre que crees un menú.
El resultado en pantalla se verá como una lista con viñetas. Con CSS lo puedes transformar en un menú horizontal elegante, pero eso lo veremos más adelante. Por ahora, lo importante es que funcione.
El menú de don Héctor
Don Héctor tiene una ferretería en Puebla. Su hijo Eduardo le está creando un sitio web sencillo con cuatro secciones: inicio, catálogo, precios y contacto. Eduardo leyó sobre menús y construyó esto:
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="catalogo.html">Catálogo</a></li>
<li><a href="precios.html">Precios</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
Colocó este menú en las cuatro páginas. Así el usuario siempre puede moverse entre secciones sin perderse. Don Héctor quedó muy contento. Eduardo aprendió que copiar y pegar el mismo menú en cada página es una solución válida cuando apenas empiezas.
Errores comunes que debes evitar
Hay tres errores que casi todos cometen al principio. Conócelos para no repetirlos.
Error 1: Olvidar el href
<!-- Mal -->
<a>Ver más</a>
<!-- Bien -->
<a href="detalles.html">Ver más</a>
Sin href, el texto aparece en pantalla pero no hace nada al hacer clic.
Error 2: Rutas con espacios o mayúsculas incorrectas
Si tu archivo se llama Contacto.html con mayúscula, el enlace debe ser exactamente así:
<a href="Contacto.html">Contacto</a>
En algunos servidores, contacto.html y Contacto.html son archivos diferentes. Un error de mayúscula rompe el enlace. Usa siempre minúsculas para nombrar tus archivos. Es el estándar más seguro.
Error 3: Usar ruta absoluta para archivos propios
<!-- Mal: esto solo funciona en tu computadora -->
<a href="C:/Usuarios/Eduardo/ferreteria/catalogo.html">Catálogo</a>
<!-- Bien: ruta relativa que funciona en cualquier servidor -->
<a href="catalogo.html">Catálogo</a>
Nunca uses rutas absolutas del sistema de archivos de tu computadora. En cuanto subas el sitio a internet, esos enlaces dejarán de funcionar.
Enlace a una sección dentro de la misma página
Esto es un bonus útil. Puedes crear un enlace que lleve al usuario a una parte específica de tu propia página. Primero, agrega un id al elemento destino:
<h2 id="precios">Nuestros precios</h2>
Luego crea el enlace con # seguido del id:
<a href="#precios">Ver precios</a>
Cuando el usuario hace clic, la página hace scroll automáticamente hasta ese encabezado. Esto es muy útil en páginas largas, como una página de preguntas frecuentes.
Lo que ya puedes hacer
Con lo que aprendiste hoy, puedes conectar páginas, construir menús funcionales y entender la diferencia entre rutas relativas y absolutas. Eso ya es muchísimo.
Recuerda a Rodrigo, a Valeria y a Eduardo. Los tres empezaron exactamente donde estás tú. Y con práctica, construyeron algo que funciona de verdad.
Practica creando tres archivos HTML en la misma carpeta y conéctalos con un menú de navegación. Ese ejercicio vale más que cualquier teoría.