anclajes HTML: Aquí está cómo crear enlaces para una navegación rápida

divulgación: su apoyo ayuda a mantener el sitio funcionando! Ganamos una tarifa de referencia por algunos de los servicios que recomendamos en esta página.

el elemento anchor se utiliza para crear hipervínculos entre un ancla de origen y un ancla de destino. El origen es el texto, la imagen o el botón que enlaza con otro recurso y el destino es el recurso al que el anclaje de origen enlaza.,

Los hipervínculos son una de las tecnologías fundamentales que hacen de la web la supercarretera de la información, y entender cómo usar los elementos de anclaje es una de las primeras cosas que debes dominar al aprender HTML.

el elemento de anclaje

la etiqueta del elemento de anclaje es la letra «a» rodeada por corchetes angulares como este: <a>. Se requieren los atributos de apertura y cierre, y todo el contenido entre las etiquetas constituye la fuente de anclaje.,

si bien los ejemplos anteriores producirán elementos de anclaje, no son de mucha utilidad ya que no hemos incluido ninguna instrucción adicional. En este momento estos elementos de anclaje no se relacionan con nada. Para vincular un anclaje de origen a un anclaje de destino, necesitamos aplicar algunos atributos adicionales al elemento de anclaje.

en este breve tutorial cubriremos los atributos que puede usar para agregar un anclaje de destino a sus hipervínculos, decirle al navegador qué hacer con el enlace y agregar significado semántico a los elementos de anclaje para que los navegadores y rastreadores web usen.,

los atributos de anclaje más importantes

hay tres atributos de anclaje que debe conocer para crear hipervínculos funcionales. Estos atributos son: href, target y download.

especifique un destino de hipervínculo: href

el atributo referencia de hipertexto, o href, se usa para especificar un destino o destino para el elemento anchor. Se usa más comúnmente para definir una URL a la que el elemento anchor debe enlazar.,


In this example, the <a href="http://example.com">anchored text</a>links to the URL <em>www.example.com</em>.

Anhref puede hacer mucho más que simplemente enlazar a otro sitio web.

  • Se puede utilizar para enlazar directamente a cualquier elemento de una página web al que se le haya asignado un id.
  • Se puede usar para enlazar a un recurso usando un protocolo que no sea http.
  • Se puede utilizar para ejecutar un script.

el siguiente HTML incluye ejemplos de estas tres acciones:

en el cuadro de abajo verá que HTML como se representa en el navegador. Pruebe cada enlace para ver qué sucede.,

este primer elemento de anclaje enlaza de nuevo al encabezado de esta sección del tutorial Enlazando a un id que asignamos a ese elemento de encabezado.

Podemos usar el protocolo mailto para crear un enlace que intentará iniciar el programa de correo electrónico predeterminado en su computadora. Vamos a darle una oportunidad! ¡Nos encantaría que te pusieras en contacto con nosotros!

Por último, si hace clic en el enlace de abajo, aparecerá una ventana de alerta de JavaScript de cortesía. Haz clic en el enlace para ver qué sucede.,

el elemento href es bastante fácil de usar, pero podemos obtener mucho más kilometraje de nuestros elementos de anclaje conociendo el atributo target.

especifique una ubicación para abrir el enlace: target

echemos un vistazo al mailto enlace que creamos en el ejemplo anterior. Aquí está ese código de nuevo:


We'd love for you to <a href="mailto:">get in touch</a> with us!

Aunque ese enlace es útil, la forma en que se abre no es ideal., Dependiendo de cómo su computadora y navegador están configurados, es posible que al hacer clic en el enlace creado por ese texto redirigirá la ventana de su navegador lejos de este sitio web a una aplicación de correo electrónico basada en la web como Gmail o Yahoo! Correo. Si bien ciertamente queremos animar a nuestros visitantes a que se pongan en contacto con nosotros, no queremos hacerlo a expensas de enviar a los visitantes fuera de nuestro sitio web.

la respuesta a este enigma es el atributo target emparejado con el valor _blank.,


We'd love for you to <a href="mailto:" target="_blank" rel="noopener">get in touch</a> with us!

cuando agregamos el atributo target y _blank a nuestro enlace le decimos al navegador de visitantes que abra el enlace en una nueva pestaña o ventana del navegador (en blanco). Si representamos ese código en el navegador, cuando un visitante haga clic en el enlace, se abrirá en una nueva pestaña.

nos encantaría que te pusieras en contacto con nosotros!

especifique un recurso Para Descargar: Descargar

Los Enlaces también se utilizan para indicar a un navegador que comience a descargar un archivo., El atributo download se utiliza para identificar un enlace que debe iniciar una descarga y el valor asignado al atributo download es el nombre del archivo a descargar.

el atributo href también entra en juego al configurar un elemento de anclaje que inicia una descarga. Mientras que el atributo download nombra el archivo, el atributo href apunta a la ubicación donde está alojado el archivo.,

Aquí hay un ejemplo de cómo se vería un elemento de anclaje iniciador de descarga:

si el href en el ejemplo anterior apuntaba a un archivo real, cuando la descarga se completó, el archivo descargado se llamaría Example_File.ext dónde .ext sería el formato del archivo que se descargó. No es necesario incluir la extensión de tipo de archivo en el valor asignado al atributo download. La extensión de archivo se identificará automáticamente cuando el navegador descargue el archivo y se agregará automáticamente al nombre del archivo descargado.,

Enlaces Internos y externos

Hay dos tipos de recursos a los que podemos enlazar usando el elemento a: interno y externo. Los enlaces internos son aquellos que apuntan a otras páginas de nuestro sitio web. Los enlaces externos apuntan a páginas web que no forman parte de nuestro sitio web.

crear enlaces internos es importante por varias razones:

  • Los Enlaces Internos se utilizan para crear menús de navegación que ayudan a los visitantes del sitio web a navegar por nuestro sitio web.
  • Los Enlaces Internos se utilizan en el texto del contenido del sitio web para ayudar a los visitantes del sitio web a localizar contenido relacionado.,
  • Los Enlaces Internos también son utilizados por los rastreadores web de motores de búsqueda para localizar las páginas de un sitio web y para compartir autoridad (también conocido como link juice) con las otras páginas de un sitio web.

al escribir Enlaces Internos, asegúrate de no excederte. El link juice de cualquier página web se comparte entre los enlaces de la página. Así que cuantos más enlaces pongas en una página, más diluido se diluirá el jugo pasado a cada enlace. Una buena regla general es no tener más de 100 Enlaces por página, aunque hay excepciones en el caso de sitios web extremadamente grandes y complejos.,

Los Enlaces externos también son importantes por algunas razones diferentes:

  • Los Enlaces externos pueden ser recomendados, requeridos o simplemente mejores prácticas para proporcionar una atribución adecuada a la fuente de una idea o un recurso.
  • Los Enlaces Externos nos permiten referir a los visitantes del sitio web a contenido útil relacionado.
  • cuando otros sitios web publican Enlaces externos que apuntan a nuestro sitio web, estos enlaces conocidos como backlinks permiten que link juice fluya a nuestro sitio web y mejoren la posición de nuestro sitio web en las páginas de resultados de motores de búsqueda (SERP).,

al escribir Enlaces externos, intente evitar enlazar con competidores directos. Usted no quiere ayudar a su clasificación SERP para los Términos de búsqueda que usted está apuntando para su propio sitio web. También es una buena idea usar el atributo target="_blank" al escribir Enlaces externos. Al abrir enlaces externos en una nueva pestaña, mantiene a los visitantes en su sitio durante más tiempo.,

Nunca digas «haga clic aquí»

seguramente has visto y tal vez incluso creado enlaces que se ven algo como esto:

To learn more <a href="http://example.com">click here</a>!

hay al menos tres buenas razones por las que usar texto de elemento de anclaje genérico como «haga clic aquí» es una práctica terrible.

  • Los visitantes del sitio web que dependen de tecnologías de asistencia como los lectores de pantalla tendrán dificultades para descifrar el significado de los enlaces que hacen uso de texto de enlace genérico como «haga clic aquí».,
  • Los visitantes del sitio web que están escaneando una página tendrán que tomar varios segundos adicionales para investigar el texto alrededor del enlace para tener una idea de A qué enlaza el ancla.
  • Los rastreadores web de motores de búsqueda asocian el texto del elemento de anclaje con la URL del enlace. El texto del elemento de anclaje correctamente seleccionado ayuda a los motores de búsqueda a determinar la relevancia de una página web para palabras clave específicas. El texto genérico no le dice a los motores de búsqueda nada sobre la página web enlazada.

el texto del elemento de anclaje Ideal es sucinto e identifica una o varias palabras clave que son relevantes para la página web., Aquí hay una oración que incluye dos ejemplos de texto de enlace correctamente seleccionado:

el primer enlace le dice a los rastreadores web y visitantes del sitio web que el sitio web tiene algo que ver con las palabras clave «motores de búsqueda». El segundo les dice a los visitantes y a los motores de búsqueda que la página encontrada en la URL relativa /seo/ está relacionada con las palabras clave «SEO tutorial».

Absoluta y Relativa Url

había dos enlaces en nuestro último ejemplo: y /seo/. El primero es un ejemplo de una URL absoluta., Las URL absolutas son aquellas que incluyen una descripción completa (absoluta) del destino del enlace. Las URL absolutas incluyen el protocolo (http) y el nombre de dominio completo y la ruta de archivo necesarios para llegar al anclaje de destino.

el segundo es un ejemplo de una URL relativa. Las URL relativas enlazan a una página web describiendo la posición de la página relativa a la posición de la página actual. Al escribir Enlaces Internos que apuntan a otras páginas del mismo sitio web, tenemos la opción de escribir URL relativas en lugar de URL absolutas.,

por ejemplo, si estamos en esta dirección: , y queremos enlazar a la página del producto Azul, podemos usar cualquiera de los siguientes elementos de anclaje:

<a href="/products/blue-product/">Go check out the blue product!</a><a href="../blue-product/">Go check out the blue product!</a>

lo que la primera sintaxis dice Es: «busque en el nivel más bajo del directorio de archivos los productos de archivo y busque productos azules dentro de ese archivo». Lo que la segunda sintaxis dice Es:»busque en la carpeta padre del directorio red-product un directorio con el nombre blue-product., Ambos elementos de anclaje apuntan a la URL:

digamos que queremos enlazar a About Us – una página que existe como descendiente directo de la página de inicio. Así es como podríamos hacer eso:

<a href="/about-us/">Learn more about us.</a>

esa sintaxis dice «vuelve al nivel más bajo del árbol de directorios de archivos y luego busca un directorio titulado about-us».

como ejemplo final, digamos que estamos en esta dirección una vez más: , y que queremos enlazar a una página de subcategoría que existe dentro de la categoría /red-products/.,

<a href="large.php">See all Red Products available in Large!</a>

lo que esa URL relativa hará es decirle al navegador que busque en la carpeta actual un archivo llamado large.php y se resolverá a esta URL:

To summarize, when we write relative URLs we have three options:

  • When we start a relative URL with «/” we tell the browser to look for the specified file or folder in the lowest level of the file directory.
  • If we start a relative URL with «../” we tell the browser back up in the directory tree one level.
  • If we start a relative URL with a file or folder name we tell the browser to look for the specified resources in the current file.

Why Are Relative URLs Used?

Relative URLs are very popular with web developers. It is common for websites to be developed on a staging server with a domain name that is not the same as the eventual permanent domain name. If relative URLs are used, when the site is transferred from the staging server to being live on the web all of the relative URLs will continue to work just fine. However, if absolute URLs are used the development team will have to go through the site fixing all of the URLs.

While the benefit of using relative URLs during the development of a site on a staging server not inconsiderable, it comes at a cost.

While you should know how relative URLs work, many experienced developers and SEO experts recommend sticking to absolute URLs as much as possible.

Other Useful Anchor Attributes

With just the three attributes we’ve covered so far, you can complete every hyperlinking task you will encounter on the web. However, there are additional attributes that can be used to tell a visitor’s web browser and search engines that index our website something about the meaning of the hyperlinks.

Specify the Language of the Anchor Destination: hreflang

This is optional tag can be used to tell a web browser the language of the document to which the anchor is linked. For example, if we were linking to a URL and wanted to tell the browser that the destination anchor was in Spanish we would use the appropriate language code in ISO 639-1 format as the value of the hreflang atributo.

especifique la relación entre origen y destino: rel

el atributo relationship, o rel, se utiliza para describir la relación entre el anclaje de origen y el anclaje de destino. Por ejemplo, podríamos utilizar el siguiente código para identificar el destino como un recurso sobre el autor del documento.,


This artile was written by <a href="https://plus.google.com/+AuthorName" rel="author">Great Author</a>.

hay varios valores diferentes que se pueden usar para describir la relación entre el enlace de origen y el enlace de destino. Estos son algunos de los más comunes:

  • rel="nofollow": Use este atributo si está enlazando a un recurso al que no desea prestar la reputación de su sitio. Por ejemplo, si se enlaza a un sitio de spam como un ejemplo de lo que no debe hacer, querrá usar este valor para evitar contribuir a la visibilidad del motor de búsqueda del sitio.,
  • rel="alternate": si su sitio tiene más de una versión, como una traducción a un idioma diferente, use este valor para identificar el recurso vinculado como una versión alternativa de la página actual.
  • rel="bookmark" : este valor se usa para identificar una formulación de URL que es permanente y se puede usar para marcar.
  • rel="help": identifica un recurso vinculado como un archivo de ayuda para la página actual con este valor.
  • rel="license": utilice este atributo cuando se vincule a una licencia de derechos de autor reconocida.,
  • rel="next": si el documento actual existe en una serie de documentos, utilice este valor al vincular al siguiente documento de la serie.
  • rel="prev": Si el documento existe en una serie de documentos, utilice este valor al vincular al documento anterior en la serie.
  • rel="noreferrer": si desea enlazar a un sitio web externo pero evita que el sitio web de destino sepa quién es el referente, use este valor.,

especifique el tipo de medio de Internet: type

el atributotype es un atributo opcional que se puede usar para identificar el tipo de medio de Internet, o tipo MIME, del documento de destino. Por ejemplo, si se enlaza a un sitio web representado en HTML, puede agregar el atributo type="text/html" para indicar al navegador de un visitante que el enlace apunta a un documento HTML.,

en este momento este atributo no hace mucho de nada, pero la idea es que en el futuro la información contenida en este atributo podría usarse para comunicar de alguna manera a un visitante del sitio web el tipo de contenido al que está a punto de vincularse antes de hacer clic en el enlace.

el valor type debe ser un tipo de medio IANA válido. Algunos de los más comúnmente utilizados son los valores: text/html, text/css, application/javascript y multipart/form-data.,

una red de enlaces

la World Wide Web se describe mejor como una biblioteca masiva de documentos con hipervínculos donde se utilizan elementos de anclaje para crear puentes entre documentos relacionados. En esta definición, los elementos de anclaje ocupan su lugar legítimo como el pegamento que une la web y los puentes que permiten a los usuarios de la web moverse de un documento a otro relacionado.

una forma común de usar enlaces es construir un menú de navegación que establezca la estructura lógica y jerárquica de un sitio web., Si quieres aprender a construir menús de navegación efectivos, lee nuestro tutorial sobre ese tema.

Jon es un escritor independiente, entusiasta de viaje, esposo y padre. Escribe sobre tecnologías web como WordPress, HTML y CSS.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *