Cómo hacer hipervínculos HTML usando el atributo HREF en etiquetas

Un sitio web es una colección de páginas web. Y estas páginas deben estar vinculadas o conectadas por algo. Y para hacerlo, necesitamos usar una etiqueta proporcionada por HTML: la aetiqueta.

Esta etiqueta define un hipervínculo, que se utiliza para vincular de una página a otra. Y el atributo más importante del aelemento es el hrefatributo, que indica el destino del enlace.

En esta guía, le mostraré cómo crear hipervínculos HTML utilizando el hrefatributo de la aetiqueta.

  • ¿Qué es un enlace?
  • Cómo crear enlaces internos
  • Navegar a páginas del mismo nivel
  • Navegar a páginas ubicadas en otra carpeta
  • Navegar desde una página ubicada en una carpeta hasta la raíz
  • Cómo crear enlaces externos
  • Cómo crear enlaces de anclaje
  • Navegar en la misma página
  • Navegar en otra página
  • Conclusión

¿Qué es un enlace?

Un enlace es un texto en el que se puede hacer clic y que le permite navegar de una página a otra o a una parte diferente de la misma página.

En el desarrollo web, hay varias formas de crear enlaces, pero la más común es usando la aetiqueta y el hrefatributo. En este último es donde especificamos la dirección de destino del enlace.

La aetiqueta nos ayuda a crear tres tipos principales de enlaces: un enlace interno, un enlace externo y un enlace de anclaje. Dicho esto, ahora podemos profundizar en cómo crear un enlace interno en la siguiente sección.

Cómo crear enlaces internos

Cuando se trata de crear un sitio web, tiene sentido tener una conexión entre páginas. Y siempre que estos enlaces nos permitan navegar de la página A a la página B, se llama enlace interno (ya que siempre está en el mismo nombre de dominio o en el mismo sitio web). Entonces, un enlace interno es un enlace que permite navegar a otra página de un sitio web.

Ahora, considerando que nuestra carpeta está estructurada de la siguiente manera:

├── folder1 | └── page2.html ├── page1.html ├── index.html 

Aquí tenemos tres casos de uso y, para cada uno, crearemos un ejemplo.

Navegar a páginas del mismo nivel

  • index.html
Browse to Page 1 

Como puede ver, la página page1.htmlestá en el mismo nivel, por lo tanto, la ruta del hrefatributo es solo el nombre de la página.

Navegar a páginas ubicadas en otra carpeta

  • page1.html
Browse to Page 2 

Aquí, tenemos un caso de uso diferente ya que la página que queremos visitar ahora no está en el mismo nivel. Y para poder navegar a esa página, debemos especificar la ruta completa del archivo, incluida la carpeta.

¡Excelente! Ahora profundicemos en el último caso de uso.

Navegar desde una página ubicada en una carpeta hasta la raíz

  • page2.html
Browse to the Home Page 

Ahora, aquí para navegar a la index.htmlpágina, primero debemos subir un nivel antes de poder navegar a esa página.

Ahora hemos cubierto los enlaces internos, así que sigamos adelante e introduzcamos cómo navegar a enlaces externos.

Cómo crear enlaces externos

Siempre es útil tener la capacidad de navegar a sitios web externos.

Browse to Google 

Como puede ver aquí, para navegar a Google, tenemos que especificar su URL al hrefatributo.

Los enlaces externos e internos se utilizan para navegar de la página A a la página B. Sin embargo, a veces queremos permanecer en la misma página y navegar a una parte específica. Y para hacerlo, tenemos que usar algo llamado enlace de ancla, profundicemos en él en la siguiente sección.

Cómo crear enlaces de anclaje

Un enlace de anclaje es un poco más específico: nos permite navegar del punto A al punto B mientras permanecemos en la misma página. También se puede utilizar para ir a una parte de otra página.

Navegar en la misma página

Go to the anchor 

Comparado con los demás, este es un poco diferente. De hecho lo es, pero sigue funcionando de la misma manera.

Aquí, en lugar de un enlace de página, tenemos una referencia a un elemento. Cuando hagamos clic en el enlace, buscará un elemento con el mismo nombre sin el hashtag ( about). Si encuentra esa identificación, busca esa parte.

Navegar en otra página

Go to the anchor 

Esto es bastante similar al ejemplo anterior, excepto que tenemos que definir la página en la que queremos navegar y agregarle el ancla.

Conclusión

El hrefes el atributo más importante de la aetiqueta. Nos permite navegar entre páginas o solo una parte específica de una página. Con suerte, esta guía le ayudará a crear un sitio web con muchos enlaces.

Gracias por leer.

¡No dude en comunicarse conmigo!

TWITTER BLOG NEWSLETTER GITHUB LINKEDIN CODEPEN DEV

Foto de JJ Ying en Unsplash