Un sitio web se compone de varias piezas de información que se encuentran en diferentes secciones y en diferentes páginas dentro del propio sitio.

También puede encontrar información relacionada con ese sitio en páginas que se encuentran en diferentes sitios web.

Todas estas secciones y páginas están vinculadas en HTML mediante el atributo href.

En este artículo, veremos el término Hipervínculo. Luego, aprenderemos sobre las diferentes formas en que puede crear hipervínculos, qué hace href y cómo usar apropiadamente el atributo href para vincular secciones y páginas.

¿Qué son los Hipervínculos?

En HTML, hay varias formas de enlaces. En las imágenes, existe el atributo src para "vincular" la fuente de una imagen.

Para las hojas de estilo, existe la etiqueta de enlace (link) con el atributo href para "enlazar" la fuente de una hoja de estilo.

Para las etiquetas de anclaje (anchor), existe el atributo href para "vincular" la sección o página de referencias. Los enlaces de anclaje también se denominan hipervínculos.

Cuando un usuario sigue un hipervínculo, está navegando a esa página. Los hipervínculos son elementos que hacen referencia a otro documento, de modo que cuando un usuario hace clic en ese elemento, se le dirige al nuevo documento.

Cuándo usar Hipervínculos

Como se indicó anteriormente, es posible que desee vincular varias páginas (dentro de su sitio web o externamente) o secciones en su sitio web.

En este artículo, destacaré tres formas de crear hipervínculos. Es importante conocer estas diferentes formas porque determinan los valores del atributo href.

Muy bien, veamos esas tres formas diferentes ahora.

1. Cuando deseas vincular a secciones de una página

Puede utilizar este método, por ejemplo, al crear una página con una tabla de contenido.

En este caso, es posible que no desee que sus lectores tengan que desplazarse hacia abajo hasta la última sección. Sería bueno si pudieran hacer clic en la tabla de contenido y el navegador los llevaría allí directamente.

Este tipo de vinculación ocurre en el mismo documento y simplemente lleva al lector a diferentes secciones. Aprenderemos cómo crear un hipervínculo para este caso de uso cuando aprendamos sobre el atributo href.

2. Cuando deseas vincular a otra página dentro de un sitio web

En su sitio, es posible que tenga una página de inicio, una página de información, una página de servicios y otros tipos de páginas. Este método ayuda a los usuarios a navegar de una página a otra.

3. Cuando deseas vincular a páginas externas

A veces, es posible que su sitio web no contenga determinada información y que otro sitio web la tenga. En tales casos, es posible que desee hacer referencia al otro sitio web.

Para hacer esto, debe crear un hipervínculo externo que lleve al usuario al otro sitio web.

Estas son las tres formas principales de vincular páginas. Veamos ahora cómo el atributo href puede ayudarlo a habilitarlos.

Cómo utilizar el atributo href

El href es un atributo que se utiliza para hacer referencia a otro documento. Puede encontrarlo en etiquetas de enlace (link) y etiquetas de anclaje.

El atributo href se utiliza en etiquetas de anclaje (a) para crear hipervínculos en sitios web. El valor del atributo contiene la URL a la que apunta el hipervínculo. Puedes usarlo así:

<a href="URL">Hypervínculo</a>

Sin embargo, los valores de la URL pueden ser diferentes dependiendo de lo que esté apuntando. Para las tres formas que vimos anteriormente, veamos cómo puede usar href.

1. Cómo usar href para vincular secciones dentro de un documento

En este caso, el valor será el id del elemento que inicia la sección. Eso significa que tendremos algo como esto:

<a href="#segunda-seccion">Ir a la segunda sección</a>
<!--
  Algunas cosas aquí
 -->
<section id="segunda-seccion">
	<h2>Segunda sección</h2>
</section>

Cuando se hace clic en el hipervínculo "Ir a la segunda sección", el navegador se desplaza hacia abajo hasta la sección con la identificación asociada (id). También cambia la URL en la barra de URL del navegador.

Por ejemplo, si la URL anterior era misitioweb.com, la nueva URL será misitioweb.com#segunda-seccion.

2. Cómo usar href para vincular páginas dentro de un sitio web

Para usar href de esta manera, debe comprender qué son las URL relativas y las URL absolutas.

Las URL relativas son URL cortas que apuntan a un documento en el mismo sitio web. Es más como, desde donde estás, ¿cómo llegas a este otro lugar en el mismo sitio web?

Este contraste, con las URL absolutas. Para estos, no le preocupa dónde se encuentra actualmente: proporciona todos los detalles para llegar a otro lugar como si estuviera comenzando desde el principio.

Para navegar entre páginas que viven en un sitio web, puede usar cualquiera de estas URL, pero comúnmente se usan las URL relativas.

Digamos que está en la página de inicio y desea hacer referencia a la página 'Acerca de'.

A continuación, se explica cómo utilizar el atributo href para hacer eso: 

<a href='/acerca' >Acerca de</a>

Desde la página de inicio (digamos misitioweb.com), el enlace anterior navegará a misitioweb.com/acerca.

Hay algo que vale la pena señalar sobre la barra inclinada (/) antes del enlace. El / le dice al navegador que agregue el enlace a la raíz del sitio (que es el dominio). Entonces, la raíz es misitioweb.com y el enlace se adjunta así: misitioweb.com/acerca.

Si la barra inclinada estaba ausente (<a href='acerca'>), el navegador reemplazaría la ruta actual con /acerca.

Por ejemplo, si actualmente estuviéramos en misitioweb.com/proyectos/generador y tuviéramos los siguientes enlaces:

<a href='acerca'>Acerca 1</a>
<a href='/acerca'>Acerca 2</a>

"Acerca 1" navegará a msitioweb.com/proyectos/acerca (reemplazando la ruta / generador actual) y "Acerca 2" navegará a misitioweb.com/about

3. Cómo usar href para vincular a páginas en otro sitio web

Dado que está en un sitio web diferente, no hay forma de que podamos usar URL relativas. Para esto, necesitamos especificar la fuente absoluta del documento al que hacemos referencia.

Por ejemplo, digamos que estamos en misitioweb.com y queremos hacer referencia a google.com, así es como lo haríamos con href: 

<a href='https://google.com'>Google<a>

Si solo hubiéramos escrito google.com, el navegador lo trataría como una página dentro de un sitio web y, por lo tanto, lo agregaría a misitioweb.com.

Conclusión

En este artículo, hemos visto cómo el atributo href nos permite crear diferentes tipos de enlaces. Estos diversos enlaces muestran las diferentes formas en que se puede hacer referencia a documentos / páginas dentro de un sitio web.

Traducido del artículo de Dillion Megida - HTML Link Code – How to Insert a Link to a Website with HREF