Enlaces en HTML: navegación interna, externa y anclas
📚 Contenido de la guía ⌃
- El mapa mental: de un clic a un destino 🧠➡️🧭
- Anatomía de un enlace HTML: la etiqueta 🧬
- Enlaces externos: cuando salimos de tu sitio 🌍
- Enlaces internos: navegando dentro de tu propio sitio 🏠
- Botón “Volver arriba” con anclas 🔝
- Estilos y estados de los enlaces: hover, visited y focus 🎨
- Buenas prácticas y errores comunes ✅❌
- 1. El texto del enlace importa (mucho)
- 2. No uses enlaces sin href
- 3. ¿Enlace o botón?
- Resumen rápido: qué tipo de enlace usar en cada caso 📌
- Conclusión: los enlaces son la columna vertebral de la web 🚀
Si tuvieras que reducir la web a una sola idea, sería esta: todo está conectado por enlaces.
Cada vez que haces clic en un texto subrayado, un botón “Ver más” o un índice que te lleva a otra sección, estás usando el mismo elemento: la etiqueta <a>.
En esta guía vamos a ver cómo usar bien los enlaces en HTML para:
- Navegar a otras páginas (enlaces externos).
- Movernos dentro de la misma página (anclas internas).
- Crear índices, botones “Volver arriba” y navegación suave.
La idea no es solo memorizar sintaxis, sino entender cuál es el modelo mental detrás de los enlaces:
“Tengo un origen, tengo un destino, y en medio hay un clic.”
El mapa mental: de un clic a un destino 🧠➡️🧭
Cada enlace en HTML responde a tres preguntas muy simples:
- ¿Qué se puede clicar? → el contenido dentro de
<a>...</a>. - ¿A dónde vamos? → el valor del atributo
href. - ¿Cómo se abre? → atributos opcionales como
targetyrel.
<a>.
href apunta a una URL o a un id interno.
Anatomía de un enlace HTML: la etiqueta 🧬
La forma básica de un enlace es:
<a href="https://ejemplo.com">Texto clicable</a>Las piezas importantes son:
<a>: la etiqueta que indica “esto es un enlace”.href: la dirección a la que nos lleva.- Contenido: el texto o iconos que la persona va a ver y clicar.
Ejemplo mínimo:
<a href="https://tucodigocotidiano.yarumaltech.com/">
Visitar TuCódigoCotidiano
</a>💡 Buen hábito: el texto del enlace debería explicar a dónde lleva. Evita cosas como “haz clic aquí” y prefiere “Ver la guía de Flexbox”.
Enlaces externos: cuando salimos de tu sitio 🌍
Un enlace externo es cualquier <a> cuyo href apunta a otro dominio:
<a href="https://developer.mozilla.org/">
Documentación de MDN
</a>Opcionalmente podemos hacer que se abra en otra pestaña:
<a href="https://developer.mozilla.org/"
target="_blank"
rel="noopener noreferrer">
Documentación de MDN (se abre en otra pestaña)
</a>target="_blank": indica que se abra en una pestaña/ventana nueva.rel="noopener noreferrer": mejora la seguridad y el rendimiento evitando que la página nueva pueda manipular la pestaña original.
Ejemplo visual de enlace externo
Abrir documentación de MDN en otra pestaña
El enlace se abre en una pestaña nueva y no puede controlar esta ventana.
Enlaces internos: navegando dentro de tu propio sitio 🏠
Un enlace interno apunta a otra página del mismo sitio. Por ejemplo, desde tu página de inicio hacia una guía específica:
<a href="/guias/introduccion-a-css/">
Leer la guía de CSS
</a>/contacto/→ página de contacto./blog/→ listado de artículos.../index.html→ subir un nivel en la estructura de carpetas.
💡 Consejo SEO: usa enlaces internos para conectar contenidos relacionados. Ayuda a los buscadores y también a tus lectores a descubrir más cosas tuyas.
Las anclas permiten saltar a un punto concreto de la misma página. Funciona así:
- Le das un
ida un elemento (normalmente un encabezado). - Creas un enlace cuyo
hrefempiece por#y apunte a ese id.
Ejemplo de sección de destino:
<h2 id="contacto">Contacto</h2>
<p>Aquí van los datos de contacto...</p>Ejemplo de enlace que salta a esa sección:
Estás viendo solo el 60% del contenido. ¡Únete a la Membresía Premium! para acceder al contenido completo.
Comentarios y Valoraciones
No hay comentarios aún. ¡Sé el primero en opinar!