Anclajes y enlaces ancla: La Guía DEFINITIVA
Un hipervínculo o enlace es un elemento que hace referencia a otro y que lo conecta entre sí. Esta conexión entre documentos puede ser interna (mediante anchors) o externa.
En HTML los enlaces que hacen referencia a puntos específicos dentro de la misma página se llaman enlaces ancla y se conecta con un anclaje, es decir, el punto de destino.
En este post te enseñaré como crear anclajes y enlaces anclas en HTML paso a paso.
¡Es muy sencillo!
Cómo hacer una anclaje en HTML
Un anclaje o ancla (también conocido como anchor en inglés) es un elemento que puede rastrear un navegador (como Chrome, Firefox, etc) y dirigir al usuario a este a través de un enlace ancla.
Existen varías formas de hacer un anclaje, pero las más recomendables son las que te voy a presentar a continuación.
Con el atributo id
Este es, sin duda, el método más recomendable en HTML5 y mediante el cual podemos definir un punto de anclaje en cualquier elemento, te dejo algunos ejemplos:
<p id="anclaje-asir">Hola soy un párrafo con un anclaje llamado anclaje asir</p>Como ves este párrafo tiene el id "anclaje-asir" y podremos ir directamente a este texto con un hipervínculo o enlace ancla.
Si estás pensando en el atributo name en enlaces ten en cuenta que ha quedado desfasado y no es recomendable usarlo en HTML5, pero, cambiando dicho atributo por id no tendrás ningún problema, tal que así:
<a name="anclaje-asir">Hola soy un enlace con un atributo name llamado anclaje asir</a> <a id="anclaje-asir">Hola soy un enlace con un anclaje llamado anclaje asir</a>Recuerda que el atributo id y el atributo name no debe compartirse con otros elementos. Me explico mejor: No uses en el mismo documento el atributo id y el atributo name y mucho menos con el mismo valor.
Se que parece una tontería y que no vamos a caer en este error, pero lo cierto es que es un fallo muy común y que genera problemas a la hora de identificar elementos.
La recomendación es clara, puedes usar el atributo id para hacer un anclaje en cualquier elemento: div, p, span, etc.
Lo tenemos claro ¿verdad? Pues con ello ya podremos empezar a construir los enlaces ancla para conectar con estos anclajes, peeero antes veamos cómo NO hacer un anclaje.
Con el atributo name
❌ Este método esta obsoleto en HTML5, el elemento <a> no acepta el atributo name ¡no lo olvides!
No hace falta que te diga más, ¿no? ya o has visto en el punto anterior: El atributo name = caca 💩.
¡Seguimos!
Cómo crear enlaces ancla en HTML5
Ya hemos definido los enlaces ancla, es el turno de hacer los enlaces.
Para crear un enlace ancla simplemente debemos añadir una almohadilla (el símbolo #) seguido del valor del atributo id que definimos con anterioridad.
Por ejemplo, para acceder al anclaje que creamos en el apartado anterior quedaría así:
<a href="#anclaje-asir">Soy un enlace ancla to wapo</a>¿Quieres verlo en acción? Haz clic aquí. 😎
¿Fácil verdad?
Debes saber que los motores de búsqueda (como Google o Bing) son capaces de rastrear enlaces ancla y mostrarlo en las páginas de resultado, por lo que si quieres optimizar la parte SEO puede ser una opción sensacional.
Los anclas también son indispensables de cara a la experiencia del usuario en el sitio web, por ejemplo en landing pages su uso es fundamental.
💡Antes de irme me gustaría comentarte que si decides estudiar ASIR aprenderás conceptos básicos de HTML y lenguajes de marcas, ideal para la administración de sistemas.
Recuerda que si quieres conocer otros artículos similares a Anclajes y enlaces ancla: La Guía DEFINITIVA puedes visitar la categoría Desarrollo Web.
Y si tienes dudas puedes dejarme un comentario 💪 ¡Estaré encantado de ayudarte!