¿Qué es HREF en JavaScript? ¡Aprende a crear hipervínculos con JavaScript!

Saber qué es HREF en JavaScript y para qué sirve será importante si tienes una página web y quieres aumentar las visitas, pues aprender a insertar hipervínculos en un documento HTML para enlazar tu web con contenido de páginas internas y externas, te será de gran utilidad. 

Es por eso que, el día de hoy, traemos para ti este artículo en el que te contaremos qué es la etiqueta <a> en JavaScript y cuáles son los atributos de la etiqueta <a> en JavaScript. Además, te contaremos qué significa HREF en JavaScript y cómo crear un enlace correctamente en HTML.

¡Comencemos!

¿Qué es la etiqueta <a> en JavaScript?

La etiqueta <a> en JavaScript (del inglés "anchor", en español "ancla"), es aquella que nos permitirá crear enlaces en HTML, que redirigen al usuario a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo o cualquier otra URL.

Pero, ¿te has preguntado cómo crear enlaces en Javascript? Como seguramente ya lo sabes, Javascript es un lenguaje de programación o secuencias de comandos que permite implementar funciones complejas y diseños interactivos en páginas web. Además, es una de las tecnologías web estándar más importantes actualmente, junto con HTML y CSS.

Es por esto que, al crear una página web, es necesario combinar estos tres lenguajes, ya que con esto se consigue una página mucho más dinámica, atractiva, funcional y bien estructurada. Pero, entonces, ¿cómo crear enlaces con Javascript? Bueno, precisamente esto es posible gracias a la etiqueta <a> en JavaScript, que es parte del lenguaje HTML.

Y, ¿cuál es la función de la etiqueta <a>? Crear enlaces y acciones que harán que nuestra página deje de ser estática y que su contenido sea de flujo, involucrando al usuario al hacer que sea más sencillo para él encontrar lo que busca al navegar por la página. A continuación, te hablaremos un poco más acerca de esta etiqueta y cuáles son sus atributos.

Si quieres saber más sobre cómo desarrollar una página web en JavaScript y convertirte en un experto con este software, te invitamos a revisar el curso online de fundamentos de JavaScript que preparamos para ti.

Fuente: Unsplash

¿Cuáles son los atributos de la etiqueta <a>?

Según la información proporcionada por el sitio colaborativo en español de recursos para desarrolladores creado por Mozilla, la etiqueta <a> en JavaScript tiene los siguientes atributos:

1. Atributo download (HTML5)

Con este atributo de la etiqueta <a> en HTML5, podemos indicar al navegador que, en lugar de abrir una página o redirigir al usuario a un recurso, se inicie una descarga al hacer clic y el usuario pueda seleccionar donde guardar su archivo. Además, si el atributo tiene un valor, este se utiliza como nombre del archivo por defecto, aunque el usuario puede modificarlo para guardarlo con un nombre diferente.

Este atributo es uno de los más importantes y más usados de la etiqueta <a> en JavaScript, puesto que el contenido descargable es muy popular en internet y es 100% recomendable incluirlo en tu sitio web si quieres recibir más visitas y brindar a tus usuarios contenido de calidad con el que puedan interactuar.

Fuente: Unsplash 

2. Atributo href o HREF

Es aquel que contiene la URL o un fragmento de URL al cual se dirige el enlace. El atributo HREF en JavaScript es el que más nos interesa, pero lo conoceremos más a fondo adelante.

3. Atributo hreflang

Este atributo de la etiqueta <a> en HTML fue introducido por Google en diciembre de 2011 y sirve para indicar en lenguaje humano el nombre del recurso al que se enlaza. Además, el atributo hreflang permite que muestres a los mecanismos de búsqueda cuál es la relación entre páginas web en idiomas alternativos, por lo que es únicamente informativo y no tiene ninguna otra funcionalidad incorporada además de esta.

Por ejemplo, si escribes una versión alternativa de tu página web en un idioma diferente al original, se utiliza este atributo para relacionarlas.

Fuente: Unsplash  

4. Atributo referrerpolicy 

Este atributo de la etiqueta <a> en HTML indica la referencia (referer) que se debe enviar cuando la URL es recuperada:

• 'no-referrer' significa sin referencia: el encabezado no será enviado.
• 'no-referrer-when-downgrade' significa sin referencia al bajar de categoría: el encabezado será enviado cuando se navega a un origen (origin) sin HTTPS. 
• 'origin' significa que el "referrer" estará en el origen (origin) de la página, no incluye la información posterior al dominio.
• 'origin-when-cross-origin' significa que la navegación a otros orígenes (origins) será limitada al esquema (scheme), el host y el puerto, mientras que la navegación en el mismo origen (origin) incluirá la trayectoria de referencia (referrer’s path).
• 'unsafe-url' significa que la referencia (referrer) incluirá el origen (origin) y la trayectoria (path), pero no el fragmento, contraseña o nombre de usuario. Esto es inseguro, ya que puede filtrar datos desde una URL segura hacia URLs inseguras.

5. Atributo rel

Este atributo de la etiqueta <a> sirve para especificar la relación del objeto de destino con el objeto de enlace. El valor es una lista separada por espacios de tipos de enlace (link types).

6. Atributo target

Este atributo de la etiqueta <a> especifica en dónde desplegar la URL enlazada, utilizando un nombre (name of), palabra clave (keyword for), contexto de navegación (browsing context):, una pestaña, ventana, o <iframe>. Las siguientes palabras clave (keywords) del atributo target, tienen significado especial:

• _self: carga la URL en el mismo contexto de navegación que el actual. Este es el comportamiento por defecto.
• _blank: carga la URL en un nuevo contexto de navegación. Usualmente es una pestaña, sin embargo, los usuarios pueden configurar los navegadores para utilizar una ventana nueva en lugar de la pestaña.
• _parent: carga la URL en el contexto de navegación padre (parent) del actual. Si no existe el padre, este se comporta del mismo modo que _self.
• _top: carga la URL en el contexto más alto de navegación (el cual es un ancestro del actual, y no tiene padre). Si no hay padre (parent), este se comporta del mismo modo que _self.

Nota: cuando se utiliza el atributo target, considera agregar rel="noopener noreferrer" para evitar el uso de la API window.opener.

7. Atributo type

Este atributo de la etiqueta <a> especifica el tipo de medio (media type) en la forma de MIME type (en-US) para la URL enlazada. Al igual que con el atributo hreflang, esto es únicamente informativo, sin ninguna funcionalidad incorporada.

Fuente: Unsplash  

8. Atributo name

¿Qué significa name en html? Name es otro atributo básico de la etiqueta <a>, que permite definir enlaces dentro de una misma página web. Si una página es muy larga, puede ser útil mostrar enlaces del tipo "volver al inicio de la página".

Este tipo de enlaces son especiales, ya que la URL de la página siempre es la misma para todas las secciones y, por tanto, debe añadirse otra parte a las URL para identificar cada sección.

Por ejemplo, para crear un enlace que se dirija a la página principal de Crehana, deberías escribir lo siguiente en tu documento HTML:

<a href="https://www.crehana.com/home/">Página principal de Crehana</a>

Sin embargo, este atributo ha quedado obsoleto en HTML5, actualmente se utiliza el atributo global id en su lugar. Algunos otros atributos de la etiqueta <a> que han quedado obsoletos en HTML5, son los siguientes:

• charset: este atributo de la etiqueta <a> define la codificación de caracteres (character encoding) de la URL enlazada. Actualmente, para lograr su efecto, se debe utilizar el encabezado HTTP Content-Type: en la URL enlazada.
• coords: este atributo de la etiqueta <a> en HTML4 utiliza una lista de números separada por comas para definir las coordenadas del enlace en la página. Sólo funciona en HTML4.
• rev: este atributo de la etiqueta <a> en HTML4 especifica un enlace inverso; es decir, la relación inversa del atributo rel. Sin embargo, fue desechado por ser muy confuso.
• shape: este atributo de la etiqueta <a> en HTML4 era utilizado para definir una región de enlaces para crear un mapa de imagen. Actualmente, se utiliza el atributo usemap, el elemento <img> y el elemento asociado <map> para definir puntos de acceso (hotspots) en lugar del atributo shape.

¿Qué significa JavaScript:void(0)?

Cuando se revisa código HTML y JavaScript con frecuencia nos encontramos con expresiones del tipo:

<a href="javascript:void(0);">Texto</a> 

Para entender esto, primero debes saber qué significa “javascript:”. En el contexto del atributo href, cuando escribimos javascript:, estamos indicando que, en lugar de llevar a una dirección web, se ejecute el código javascript que vaya indicado a continuación de los dos puntos.

Este tipo de código normalmente lo encontraremos en situaciones como esta:

<a href="javascript://" onclick="imprimir()"> Pulsa aquí para imprimir </a>

¿Qué se está haciendo aquí?

• Se crea el aspecto de un link con el objetivo de “avisar” al usuario de que puede hacer clic sobre ese elemento.
• El link no redirige a ninguna URL.
• Como respuesta al evento click se ejecuta una función JavaScript.

Esta función de JavaScript se utiliza para crear links falsos, es decir, texto o botones dentro de nuestra página con los que el usuario puede interactuar al hacer clic, pero que no redirigen a ningún sitio o página web, sino que cumplen con alguna función, tal como la de imprimir, igual que en el caso mencionado.

Al usar esta función de JavaScript, el navegador mostrará el texto con un color y un cursor especial si se pasa el cursor por encima de él, indicándole al usuario que puede interactuar, tal como funciona con los links o enlaces reales. Sin duda, una función muy útil y sencilla.

Fuente: Unsplash  

¿Qué es Href en JavaScript?

HREF en Javascript es un atributo perteneciente a la etiqueta HTML <a>, siendo el más importante de esta y dado que se utiliza para indicar la URL a la que se dirige el enlace. Gracias a este atributo, cuando un usuario hace clic en un enlace, el navegador se dirige a la URL del recurso, indicado mediante el href en JavaScript, para redirigir al usuario.

Por si aún no lo sabías o te hace falta repasar, los hipervínculos o enlaces en JavaScript pueden redirigir al usuario no solo a páginas web, sino también a imágenes, documentos, elementos descargables, entre otros. Incluso, como lo mencionamos arriba, existe un tipo de enlace conocido como URL relativa, el cual sirve para volver al inicio del sitio web desde cualquier página web interior. 

El HREF en JavaScript de este tipo de enlace, se vería se la siguiente forma:

<a href="/">Volver al inicio</a>

El enlace anterior utiliza una URL relativa con una ruta que apunta directamente a la raíz del servidor. El resultado es que, al hacer clic en este enlace en JavaScript, siempre se vuelve al inicio del sitio web, independientemente de la página en la que se incluya el enlace.

Como puedes comprobar, el HREF en javascript contiene una URL o un fragmento de URL al cual apunta un enlace. Un fragmento de URL es un nombre ( atributo "name") precedido por el símbolo de número (#), el cual especifica una ubicación interna objetivo (un ID de un elemento HTML) dentro del documento en el que se inserta. 

El atributo name en JavaScript puede ser omitido (a partir de HTML5) para crear un enlace de marcador de posición; es decir, un comportamiento que está especificado en HTML5. Un enlace de marcador de posición se parece a un enlace tradicional, pero que no se dirige a ningún lugar.

Por ejemplo, si escribes href="#top" o un fragmento vacío href="#" esto servirá para enlazar a la parte superior de la página actual. 

¿Qué esperas para probar este atributo de la etiqueta <a> al escribir tu próxima página web en JavaScript?

Fuente: Unsplash  

Esperamos que este artículo te haya sido de gran utilidad para comprender mejor qué es href en JavaScript y aclarar tus dudas sobre el funcionamiento de la etiqueta <a> en JavaScript y otras de sus funciones.

No olvides que la práctica hace al maestro y que lo mejor para comprender el funcionamiento de este software y entender al 100% qué es href en JavaScript, debes aplicar estos conocimientos y experimentar con el código. Por eso, te recomendamos que visites nuestra sección de cursos online de desarrollo web y tecnología, donde aprenderás mucho más acerca de los distintos lenguajes de programación que existen y cómo utilizarlos para diseñar páginas web y aplicaciones únicas y atractivas que impresionaran a los usuarios. 

¡Anímate a seguir aprendiendo!