Un Anchor HTML (ancla HTML) se utiliza para insertar un enlace en un documento. El propio forma parte del código fuente HTML de la página y puede enriquecerse con una amplia gama de información sobre el enlace.
¿Cómo se estructura un enlace?
Lo que exactamente hace un ancla HTML se puede explicar mejor si miramos más de cerca un ejemplo de enlace tal y como aparece en el código fuente HTML de una página:
<a href="www.sistrix.de" target="_blank" title="Die Homepage" rel="nofollow">Der Ankertext</a>En el navegador posteriormente solo se mostrará «el texto ancla» del sitio web. Automáticamente será de color azul, como estamos acostumbrados desde los enlaces.
Echemos un vistazo de cerca a los elementos individuales del HTML-Anchor <a...>.
href=»#»
Si el navegador va a acceder a una página fuera del documento actual, se debe indicar a qué página se va a acceder. Para ello, se añade un Hipertexto de Referencia como ancla, que contiene una dirección del documento que se va a abrir.
Hay una diferencia importante al especificar la dirección: puede contener 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 el documento deseado. Un ejemplo de un camino absoluto sería: https://www.sistrix.es/preguntale-a-sistrix/.
Las rutas relativas, por otro lado, son más cortas y sólo dicen lo que necesita ser añadido 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-optimierung/hallo.html». A continuación, el navegador se desplaza automáticamente a la dirección URL https://www.sistrix.es/preguntale-a-sistrix /optimizacion-onpage/hola.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 objetivo, la página enlazada se abre en la ventana o pestaña del navegador actual. El mismo comportamiento se lograría con el target=»_self», pero es más fácil omitir la etiqueta correspondiente.
El objetivo más utilizado es target=»_blank». Esto le indica al navegador que abra la página de destino en una nueva ventana. Sin embargo, en la mayoría de los navegadores nuevos, esta instrucción se interpreta de tal manera que la página se abre en una nueva pestaña.
Cuando se utiliza target=»_blank» se recomienda utilizar un rel=»noopener» por razones de seguridad. Muchos sistemas de gestión de contenidos como WordPress añaden este atributo automáticamente.
Hay más objetivos, pero no se utilizan en la mayoría de los sitios web.
title=»xyz»
Puedes darle un título a un enlace. Si especifica un título opcional, se mostrará como un Tooltip cuando mueva el ratón sobre el enlace.
rel=»nowfollow»
Esta adjudicación del enlace con rel=»nofollow» es opcional y le indica a Google que no se debe transmitir ninguna confianza a través de este enlace y que Googlebot no debe seguir el enlace.
Links como puntos de salto internos
Los anclas HTML no solo se pueden utilizar para enlazar con otros documentos o páginas, sino que también es posible saltar dentro de un documento HTML a otra sección de la misma página. En este caso, el ancla 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 post hemos insertado el id=»marca de salto» en la etiqueta
del encabezado de esta sección.
Podríamos haber añadido el marcador de salto en un o un . A partir de ahora, puede utilizar una aquí va a la sección «Enlaces como marca de salto interna» para saltar directamente a esta sección de texto. Esto es muy útil si desea crear un índice de contenidos.
También puedes dirigirte a este marcador de salto directamente 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, incluso si no se ha creado ningún #top ID.
Resumen
Puedes utilizar anclajes HTML para permitir que los visitantes de tu sitio, sus navegadores y Google visiten otros sitios web. Además, puedes transferir una gran cantidad de información en el propio texto ancla, pero en la mayoría de los casos solo se utilizan los atributos href, target y más a menudo rel=»nofollow».
Además de estos atributos, hay muchos más que puedes encontrar en la base de conocimiento de Mozilla en https://developer.mozilla.org/de/docs/Web/HTML/Element/a
