Existen varios tipos de hipervínculos que se personalizan con distintos tipos de lenguajes utilizados en la web y a continuación entregaré 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 webs 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 dependerá de los estilos que le otorgue el creador de la plantilla y se pueden personalizar con HTML, CSS, Javascript, etc.
La forma en que se aprecian en los distintos documentos antes mencionado solo dependerá 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 dirija de la siguiente manera:
<a href="url">Texto del hipervínculo</a>
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 cerré “>”. Todos los atributos que te mencionare a continuación los debes agregar de esta forma.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, es el target.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 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>
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
Style es poco utilizado porque se utiliza CSS directo al theme, 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 ejemplos:
><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.Advertencia: Debido a todos los recursos (bots) 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
Esta es 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 un formulario 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), y obviamente para empresas que ofrecen algún servicio de pago.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 aprendicesblogger. En años anteriores se utilizaba para imágenes 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.aprendicesblogger.com/" target="_blank">
<img src="url.jpg"
alt="nombre de la imagen" />
</a>
Enlace a una sección de la página
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>
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 ofrecer enlaces fuera 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, bríndales 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.
Más del Curso básico de HTML:
- Introducción
- Enlaces (estás aquí)
- Tablas
- Listas
- Imágenes
- Formularios (solo la arquitectura con HTML)
- Layout
- Extra: Atributo HTML LazyLoading Nativo