# Cómo insertar enlaces con las HTML hyperlink tags y Con la etiqueta `` en HTML puedes anclar hyperlinks a destinos internos o externos, como URL, medios, archivos u otros elementos en HTML. Esto garantiza una mejor navegabilidad, mayor facilidad de uso, además de propiedades SEO optimizadas. Aparte de ``, también se utiliza la etiqueta ``, así como otros atributos para insertar enlaces. ## ¿Qué son las HTML hyperlink tags? Las HTML hyperlink tags `` y `` se utilizan para anclar enlaces a recursos internos o externos en un documento [HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-html/). Las etiquetas `` permiten integrar hyperlinks a páginas web externas o internas, así como enlaces a archivos, documentos y descargas. Por otro lado, con las etiquetas `` se pueden integrar recursos como hojas de estilo, fuentes e iconos, lo que mejora la funcionalidad, usabilidad y navegabilidad dentro de una página. ## ¿Cuál es la diferencia entre `` y ``? Para integrar hyperlinks o recursos externos, se pueden utilizar las [HTML tags](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-tags/) `` o ``, según el caso. Debes tener en cuenta sus diferencias, ya que cada una de ellas cumple **objetivos y funciones diferentes**: - ``: La etiqueta `` significa “ancla”, ya que se puede utilizar para anclar hyperlinks a URL o imágenes, gráficos y vídeos en páginas HTML. Estos pueden encontrarse dentro de la misma página web o pueden ser recursos externos. - ``: Con la etiqueta ``, puedes integrar recursos externos como hojas de estilo CSS, favicons, documentos o fuentes en documentos HTML. Esto influye en el aspecto y el funcionamiento de una página HTML o bien en el rendimiento de la página mediante precarga o URL preferidas (URL canónicas). La diferencia principal es que `` se utiliza principalmente para **integrar hyperlinks**, mientras que `` se emplea sobre todo para integrar elementos externos como hojas de estilo. La etiqueta `` también suele integrarse dentro del área ``, mientras que la etiqueta `` se utiliza en el área `

`. ## La sintaxis de las HTML hyperlink tags explicada A continuación, te explicamos la sintaxis de las dos HTML hyperlink tags `` y ``. ### Sintaxis de la etiqueta `` en HTML Para utilizar correctamente la etiqueta ``, necesitas elementos adicionales como la apertura `` y el cierre ``: - `href`: con el atributo [HTML href](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/a-href-html/), se define la URL de destino a la que se hace referencia con la etiqueta de enlace HTML. Puede ser una URL absoluta o relativa o un identificador de anclaje para la misma página. - **Etiqueta de enlace HTML de texto o imagen**: la URL de destino se integra como URL relativa o absoluta dentro de las etiquetas `...` y después del atributo `href` para anclar el enlace en el texto HTML. Lo mismo se aplica a las etiquetas de imagen en el caso de las imágenes. Otros atributos opcionales dentro de las etiquetas `` son: - `target`: define dónde debe abrirse una URL de destino, por ejemplo, con `_blank` para una nueva pestaña o ventana, o con `_parent` para un marco principal. - `download`: especifica que los enlaces realicen automáticamente una descarga. - `title`: se utiliza para mostrar títulos o descripciones en relación con los enlaces cuando el cursor se desplaza sobre el área. -`rel`: define la relación entre la página actual y la página enlazada; por ejemplo, `rel=nofollow` puede utilizarse para especificar que los motores de búsqueda no deben buscar un enlace. **Ejemplo:** ```html etiqueta de enlace de texto o de imagen ``` ### Sintaxis de la etiqueta `` en HTML Para integrar la etiqueta `` en HTML pueden utilizarse distintas variantes y [atributos HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/atributos-html/) dependiendo de su finalidad: #### Enlace de hojas de estilo La siguiente sintaxis se utiliza para integrar **hojas de estilo CSS externas** y definir la apariencia de una página web: ```html ``` #### Enlace de favicons Para mostrar **pequeños símbolos o imágenes (favicons) junto a las URL**, se utiliza la siguiente sintaxis: ```html ``` #### Precarga Para mejorar el **rendimiento en la carga de páginas web** se pueden cargar recursos en segundo plano utilizando la función de prefetching. Para ello, se utiliza la siguiente sintaxis: ```html ``` #### URL canónicas o etiquetas Mediante la vinculación de URL canónicas o tags, puedes indicar a los motores de búsqueda **qué URL debe priorizarse** en el caso de que diferentes URL enlacen a la misma página: ```html ``` #### Enlace de URL alternativas Si existen **diferentes versiones de la misma página web**, por ejemplo, en diferentes idiomas, se pueden enlazar de la siguiente manera: ```html ``` Consejo Echa un vistazo a nuestro [Tutorial HTML para principiantes](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/aprende-html-tutorial-para-principiantes/) para aprender aún más sobre el lenguaje de programación. ## ¿Qué fines tienen las HTML hyperlink tags? Los fines más comunes de las HTML hyperlink tags son: - Mejorar la navegación mediante menús integrados y barras de navegación - Enlazar e integrar hyperlinks a URL o recursos internos o externos - Descargar documentos y archivos - Vincular de forma eficiente subpáginas internas relevantes mediante enlaces de anclaje - La accesibilidad y optimización para motores de búsqueda - Mejorar los tiempos de carga y el rendimiento de la página web This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-hyperlink-tag/](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-hyperlink-tag/) for AI/LLM consumption.