Todo lo que necesitas saber sobre los Hipervínculos y como utilizarlos

Todo lo que necesitas saber los Hipervínculos - Portada

¿Qué son los hipervínculos? ¿Para que sirven? son las respuestas que te responderé en esta entrada junto con tips para que obtengas el máximo provecho.

➕Tabla de contenidos
    ❓¿Qué son los hipervínculos?
    ✅¿Cómo crear un hipervínculo utilizando HTML?
          🔰Atributos para un enlace
                ➖Target
                ➖Download
                ➖hreflang y type
                ➖Style
    🔅Tipos de hipervínculos
          ✉Enlace para enviar E-mail
          📱Enlace hacia un número telefónico
          💹Enlace en una imagen
          🔗Enlace a una sección de la página
    🔦Tips de uso para los links
    😎Conclusión

Conocidos comúnmente como links, enlaces en español, son útiles a la hora de mantener el interés vivo por un tema en especifico o al menos esa es la forma en que recomiendo utilizarlos. Existen varios tipos de hipervínculos que se personalizan con distintos tipos de lenguajes utilizados en la web y a continuación otorgare varios consejos para los utilices sabiamente.

¿Qué son los hipervínculos?

Antes de lanzarse a la piscina e ir directo al grano deben entender bien el concepto de hipervínculo o hiperenlace que en sencillas palabras es un elemento que conecta un documento hacia otro, como pueden ser páginas web, correos electrónicos, los muy utilizados ahora documentos de office en linea y en fin muchos más.

Esta propiedad de saltar de un lugar a otro es fundamental en este mundo llamado "internet" ya que nos ayuda a enriquecer nuestro contenido, como también a posicionarnos mejor dentro de los buscadores como google. Estos vínculos los podemos apreciar en la mayoría de las web con color y subrayados, además de apreciar que la flecha del cursor cambia a una mano cuando la posicionamos sobre ella, de la siguiente forma: Hola soy un Hipervínculo.

La forma en que se aprecian en los distintos documentos antes mencionado solo dependera de los estilos que le otorgue el creador de la plantilla y se pueden personalizar con HTML, CSS, Javascript, etc.

¿Cómo crear un hipervínculo utilizando HTML?

Crear un vínculo en estos tiempos es sencillo dependiendo de la plataforma que utilices, es muy intuitivo, tan solo en un par de clics podrás generar estos saltos, pero son tan solo atajos que se crean para no escribir el código completo y generalmente no ofrecen todas las posibilidades de personalización que existen.

La etiqueta HTML que se utiliza para este fin es <a>aquí el texto del enlace </a> junto con el atributo "href" que es donde escribimos la url donde queremos que se diriga de la siguiente manera:
<a href="url">Texto del hipervínculo</a>
Esta escritura crearía un enlace con su característica por defecto, es decir, al dar clic "en la misma ventana" se cargaría la url del link.

Atributos para un enlace

El atributo por defecto es "href", pero existen muchos más que permiten hacer cosas muy interesantes. La forma correcta de agregar un atributo es cuando abrimos la etiqueta "a", si te fijas en el ejemplo anterior luego de "<a" y antes de cerrar escribí href que era el atributo y luego cerre ">".

Todos los atributos que te mencionare a continuación los debes agregar de esta forma, de todos modos agregare ejemplos para que te guíes.

Target

Uno de los más utilizados cuando creamos alguna cita o enlazamos contenido complementario al texto, con el fin de que el lector pueda ver la referencia sin tener que abandonar nuestra web. Este atributo dispone de las siguientes opciones:

_self = Es la opción por defecto, abre la url en la misma ventana.
_blank = Abre la url en una nueva ventana

Ejemplo de uso
<a href="url" target="_blank">Abre el enlace en otra ventana</a>

Download

San HTML 🙌 en su versión 5 no otorga este nuevo atributo que como su nombre lo indica permite descargar el documento enlazado. Para que funcione correctamente debes enlazar url con el descriptor correcto, por ejemplo href="miarchivo.mp3", en el caso de que el enlace se diriga a un MP3, así puedes agregar word con extensión .doc, imagenes (.jpg, .png, etc.), videos (.mp4, .mkv, etc), entre muchos más.

Ejemplo de uso
<a download="nombredelarchivo" href="miarchivo.mp3">dame clic para descargar</a>
Es recomendable utilizar este atributo solo con archivos de tamaño pequeño para no saturar tu hosting, sobre todo si es compartido.

hreflang y type

Atributo hreflang que indica el lenguaje humano del recurso al que se enlaza. Este es únicamente informativo, sin ninguna funcionalidad incorporada. Los valores que pueden agregar aquí están determinados por este documento.

Type especifica el tipo de medio (media type) en la forma de MIME type para la URL enlazada. Esto es únicamente informativo, sin ninguna funcionalidad incorporada.

Ejemplo de uso
<a href="url" hreflang="en">documento enlazado en Ingles</a>

<a href="url" type="audio/mp3">documento enlazado es un MP3</a>

Style

Ya casi obsoleto porque se utiliza CSS, aunque de mucha ayuda si necesitamos realizar cambios simples sin tener que escribir dentro del código de la web y aplicarlo solo a un enlace. 

Podemos cambiar el color del texto, darle un fondo, eliminar la decoración, aumentar el tamaño, en fin son muchas te dejo algunos ejemplo (en el curso de CSS profundizare más):
<a href="url" style="color: red;">Enlace color rojo</a>

<a href="url" style="background: blue;">Enlace fondo azul</a>

<a href="url" style="text-decoration: none;">Enlace sin subrayar ni colores</a>

<a href="url" style="font-size: 25px;">Enlace con otro tamaño</a>

<a href="url" style="font-size: 25px; background: blue; color: red;">Enlace con varios estilos</a>

Tipos de hipervínculos

Gracias a el atributo href se desprenden los tipos de enlaces que podemos crear y cumplen obviamente con diversas características que se pueden combinar con los atributos anteriormente mencionados.

Debido a todos los recursos que circulan por la web, puede no ser seguro utilizar alguno de los siguientes hipervínculos como los de contacto. Te recomiendo utilizar el reCaptcha de google para proteger tus datos.

Enlace para enviar E-mail

Una simple versión de contacto con tus lectores a través de un vínculo. Sus principales beneficios son: no enviar al lector a otra página con unformulario de contacto, utilizar la app preferida del lector para enviar e-mail y lo podemos agregar en cualquier lugar de un texto. 

Ejemplo de uso
<a href="mailto:contacto@aprendicesweb.com">Enviar correo a AprendicesWEB</a>

Enlace hacia un número telefónico

Ofrecer enlaces a números de teléfono es muy útil para los ususarios que observan documentos de internet desde computadoras portátiles conectadas a teléfonos o desde teléfonos celulares (móviles).

Ejemplo de uso
<a href="tel:+56912345678">+56912345678</a>

Enlace en una imagen

Este ejemplo utiliza una imagen que enlaza a la página de inicio de AprendicesWEB. En años anteriores se utilizaba para imagenes como botones de descarga o darle más atractivo visual a los enlaces, pero en la actualidad CSS es la mejor opción para eso.

Ejemplo de uso
<a href="https://www.aprendicesweb.com/" target="_blank">
  <img src="url.jpg"
       alt="nombre de la imagen" />
</a>

Enlace a una sección de la página

Muy utilizado ahora en las tablas de contenidos como la que se encuentra al inicio de esta entrada. Para configurar este enlace utilizamos el símbolo hashtag "#" y debemos crear un "id" con el mismo nombre en la sección hacia donde queremos dirigir el enlace.

Ejemplo de uso
<a href="#iraltitulo">algún titulo de tu texto</a>

<h2 id="iraltitulo">algún titulo de tu texto<h2>
Te dejo el siguiente articulo con la principales etiquetas HTML que se utilizan en los sitios WEB y puedes agregar tus id.

Tips de uso para los links

#1 No satures tu texto de hipervínculos: La cantidad de tiempo que el usuario esta en tu web es importante para tu posicionamiento, por lo que, no es bueno hacer salir mucho de tu página.

#2 Enlaza tus artículos relevantes: Si tu texto habla de colores de gatitos y tienes otro post que habla sobre comida para gatitos, es bueno enlazar estas dos entradas ya que tienen algo en común y ayuda al SEO. Intenta que el entrelazamiento no sea forzado en tu texto.

#3 Enlaces sociales: En la actualidad mucho tráfico proviene de las redes sociales, entonces, brindales a tus lectores vínculos para compartir tus post como este.

#4 Entrelazamiento cuántico 😆: Hazte de webs amigas que enlaces tu página y te ayuden con las visitas y el posicionamiento web.

#5 Elimina comentarios con enlaces a otros sitios web: De vez en cuando, recibirás comentarios como "en mi web 'suenlacequí' este tema es mejor. Visitanos" que son considerados como Spam y están en beneficio solo de una parte.

Conclusión

Utilizando sabiamente todo lo expuesto en esta entrada tendrás un plus en el SEO de tu web y además a medida que estés escribiendo post, determinaras en mejor medida donde agregar los hipervínculos.

Con esto termino la segunda parte del curso de HTML, nos leemos en otra entrada.

Comentarios

Estas cordialmente invitado a compartir tu ideas y comentarios.