Un anchor HTML se utiliza para insertar un enlace en un documento. El propio «anchor» forma parte del código fuente HTML de la página y puede enriquecerse con una serie de datos sobre el enlace.
¿Cómo se estructura un anchor HTML?
La mejor forma de explicar qué hace exactamente un anchor HTML es coger un enlace de ejemplo como el que aparece a continuación y observar cómo aparece en el código fuente HTML de una página:
<a href=“www.sistrix.es“ target=“_blank“ title=“Homepage“ rel=“nofollow“>El texto de anclaje</a>
En el navegador solo el «texto de anclaje» o «anchor text» será visible en la página web. Este se colorea automáticamente de azul, como es habitual en los enlaces.
Veamos ahora los atributos individuales del anchor HTML <a …>
href=““
Si el navegador debe acceder a una página fuera del documento actual, hay que indicarle qué página debe abrir. Para ello se añade un Hhipertexto de Refherencia como anchor, que contiene la dirección del documento que debe abrirse.
Hay que hacer una distinción importante a la hora de indicar la dirección, y es que puede incluir una ruta absoluta o relativa.
Una ruta absoluta contiene la dirección exacta, incluyendo el protocolo, el host, el dominio y todos los directorios hasta llegar al documento deseado. Un ejemplo de una ruta absoluta sería: https://www.sistrix.es/preguntale-a-sistrix/.
Las rutas relativas, en cambio, son más cortas y solo indican la información que hay que añadir a la posición actual (en la página web) para llegar a la nueva dirección.
Para las rutas relativas, un ejemplo sería un usuario que está en https://www.sistrix.es/preguntale-a-sistrix/ y hace clic en un enlace con href=“/onpage/title-tag.html“. El navegador dirige automáticamente al usuario a la URL https://www.sistrix.es/preguntale-a-sistrix /onpage/title-tag.html.
target=““
Esta instrucción es opcional y ofrece la posibilidad de especificar en qué ventana debe abrirse el enlace. Si no se define ningún target, la página enlazada se abre en la ventana o pestaña actual del navegador. El mismo comportamiento se conseguiría con target=“_self“, pero es más fácil omitir la etiqueta.
El target más utilizado es target=“_blank“. Con él se indica al navegador que abra la página de destino en una ventana nueva. En la mayoría de los navegadores esta instrucción se interpreta como «abrir la página en una pestaña nueva».
Cuando se utiliza target=“_blank“ se recomienda utilizar también rel=“noopener“ por razones de seguridad. Muchos sistemas de gestión de contenidos, como WordPress, añaden este atributo automáticamente.
Existen otros targets, pero no suelen utilizarse en la mayoría de los sitios web.
title=““
Un enlace puede tener un título. Si se especifica un título opcional, se mostrará como información adicional al pasar el ratón por encima del enlace.
rel=“nofollow„
Este marcado del enlace con un rel= “nofollow“ es opcional e indica a Google que el enlace no debe considerarse de confianza y que, por tanto, el Googlebot no debe seguirlo.
Enlaces como marcador de salto interno
Los anchors HTML no solo pueden utilizarse para enlazar otros documentos o páginas, sino también para «saltar» a otra sección de la misma página dentro de un documento HTML. En este caso, el anchor HTML se denomina marcador de salto.
Para insertar un marcador de salto en un documento se añade un atributo id a cualquier elemento en la posición deseada del código fuente. Por ejemplo, en este artículo hemos insertado el id=“marcador de salto“ en la etiqueta <h2> del encabezado de esta sección.
También podríamos haber añadido el marcador de salto en un <span > o un <div >. A partir de ahora, puedes ir directamente a esta sección del artículo con un <a href=“#marcador de salto“> Aquí se va a la sección «Enlaces como marcador de salto interno“ </a> para acceder directamente a esta sección del artículo. Esto es muy útil si deseas crear un índice del contenido.
También puedes dirigir el marcador desde otras páginas estableciendo un enlace absoluto a <a href=“https://www.sistrix.es/preguntale-a-sistrix/html-anchor/#marca-de-salto“>.
Un marcador práctico que se ha añadido al repertorio con el estándar HTML5 es href=“#top“. El navegador «salta» automáticamente a la parte superior de la página, aunque no se haya creado el id «#top».
Conclusión
Utilizando anchors HTML puedes dar a los usuarios de tu web, así como a sus navegadores y a Google, la oportunidad de visitar otras páginas. Además, permiten proporcionar mucha información secundaria, aunque normalmente solo se utilizan href, target y, mayormente, rel=“nofollow“.
Además de estos atributos, existen muchos otros que puedes encontrar, por ejemplo, en la base de datos de Mozilla, en el siguiente enlace: https://developer.mozilla.org/de/docs/Web/HTML/Element/a.
