NorfiPC
NorfiPC » Códigos » HTML, enlaces

Como usar los enlaces, vínculos o anclajes en HTML



Estructura con sus atributos y propiedades como HREF, TITLE, TARGET _BLANK, REL NOFOLLOW, NOOPENER, NOREFERRER y otros usados en los links o hipervínculos de las páginas web de internet.
Como usar los enlaces, vínculos o anclajes en HTML
Los enlaces, hiperenlaces, vínculos o hipervínculos, también conocidos como anclajes o links, son uno de los elementos más usados en HTML, el código o lenguaje con el que se escriben las páginas de internet.
Enlazan las páginas web. Permiten al usuario cargar una página externa en la red o acceder a otro lugar en la misma página donde se encuentra.
También son usados en ocasiones para ejecutar funciones JavaScript.
En este artículo explicamos cómo usarlos y todo lo que debemos saber, para hacer nuestras páginas más funcionales y seguras.



Estructura de los enlaces o hipervínculos en HTML


Los enlaces o hipervínculos constan del elemento A encerrado entre etiquetas de apertura y cierre, siempre incluyendo el atributo HREF.
Pueden usar un texto como anclaje (donde el usuario hace clic o presionar en un dispositivo móvil) o una imagen.
Un enlace elemental se escribe en HTML de la siguiente forma:
<a href="dirección de destino">Texto o imagen</a>
En la página el navegador muestra el texto del enlace subrayado: Enlace de texto
Al situar el cursor del ratón encima del anclaje, vemos en la barra de estado la dirección URL a la que conduce.
Estructura de un enlace en HTML
Todos los elementos y atributos en HTML5, es obligatorio usarlos en minúsculas.
En esta página a veces los usamos en mayúsculas, solo para hacer énfasis y destacarlos del resto del texto.

Atributos de los enlaces


El elemento A de HTML puede contener varios atributos, para hacerlo más funcional.
Son los siguientes:
href, rel, target, title, media, download, hreflang y type
A continuación explicamos el uso de los principales de ellos.



El atributo HREF en los enlaces


HREF es un atributo obligatorio en los enlaces.
Contiene la dirección URL de la página de destino.
Esta dirección puede ser relativa (cuando se trata de una dirección dentro del mismo dominio) o absoluta (cuando se trata de una dirección de un sitio externo).
Por ejemplo:
Dirección relativa:
<a href="../index.htm"></a>
Dirección absoluta
<a href="https://norfipc.com/index.html"></a>
También se puede usar en HREF el identificador de una sección de la misma página, con el carácter almohadilla, para desplazarse hacia ese lugar exacto.
Por ejemplo:
<a href="#inicio">Desplazarse al inicio</a>
Aunque se emplea poco, también es posible usar en HREF una dirección de correo electrónico.
Al usar el enlace se abre el programa de correo predeterminado.
Por ejemplo:
<a href="mailto:usuario@gmail.com">Enviar correo</a>



El atributo TITLE o descripción en los enlaces


El atributo TITLE permite agregarle una descripción a la imagen de anclaje o texto de enlace.
Es un comentario que se muestra solo al situar el cursor del ratón sobre los enlaces.
Este parámetro agrega valor SEO donde se utiliza.
Se usa de la siguiente forma:
<a href="pagina.htm" title="Descripción">Enlace</a>
No es necesario usarlo en enlaces cuyo texto de anclaje es descriptivo, solo cuando se trata de una palabra o de una imagen.
Por ejemplo: más información sobre HTML (sitúa el ratón encima del enlace anterior).
Generalmente se usa en el TITLE el título de la página a la que conduce el enlace o el texto del encabezado si se trata de un enlace interno.



El atributo TARGET en los enlaces


El atributo TARGET especifica el contexto de navegación o marco de destino del recurso.
TARGET _BLANK permite en los navegadores modernos, abrir el enlace en una nueva pestaña del navegador.
El mismo efecto que cuando damos clic en el enlace con la tecla Control presionada.
Se usa de la siguiente forma:
<a href="pagina.htm" target="_blank">Abrir en otra pestaña</a>
El objetivo de emplearlo es lograr que el lector no abandone la página donde está situado y por lo tanto ganar tiempo de estadía, parámetro muy apreciado para el posicionamiento.



El atributo REL en los enlaces HTML


El atributo REL (tipo de enlace) establece una relación entre la página donde se usa y el recurso referido por el enlace.
Las propiedades más usadas en el atributo REL son: AUTHOR (para indicarle a Google la autoría de una página), NOFOLLOW, NOOPENER y REL NOREFERRER.
Otros menos usados son: alternate, bookmark, external, help, license, next, prev, search y tag.

El atributo REL NOFOLLOW


El atributo REL con la propiedad NOFOLLOW, fue implementado por Google, para indicar que no se debe trasmitir autoridad hacia la página de destino.
Se usa de la siguiente forma:
<a href="http://sitio.com" rel="nofollow">Enlace a sitio externo</a><br>
Es sumamente importante emplearlo en enlaces a sitios externos, que no gozan de nuestra confianza o si no deseamos transmitirle autoridad.
Imprescindible en enlaces o widgets de publicidad.
No usarlo puede causar una penalización de Google a nuestro sitio, por considerar que puede tratarse de un enlace comprado.
Lee más información: Uso del atributo rel Nofollow en las páginas de internet



Los atributos REL NOOPENER y REL NOREFERRER


El atributo REL con la propiedad NOOPENER se usa en HTML5, si empleamos TARGET _BLANK, con el objetivo de abrir la nueva pestaña en otro proceso del navegador.
Es importantísimo porque agrega seguridad y rendimiento a la página.
A continuación lo explicamos más detalladamente.

Importancia de REL NOOPENER para la seguridad

El atributo TARGET _BLANK es una vulnerabilidad de la seguridad, cuando el enlace conduce a páginas del mismo sitio con contenido generado por usuarios o a páginas externas sobre las que no tenemos control.
La página que se abre en una pestaña o ventana nueva, tiene acceso al objeto "window" por medio de la función de JavaScript "window.opener" y puede trasladar la página a otra URL usando "window.opener.location = newURL".
Por ejemplo, si esta nueva página incluye un script malicioso, después de abrirla y ejecutarla, este script puede tomar control de la página anterior o de referencia.
Puede hacer que muestre un mensaje oculto (spam) o incluso redireccionar a otra página externa (phishing), con la misma apariencia que la original, pero incluyendo acciones adicionales como requerir un login.
El usuario no se percata porque el foco se traslada a la nueva pestaña, mientras cambia el contenido de la original.
Funcionamiento de un script en una página externa maliciosa enlazada con TARGET _BLANK.
Página externa maliciosa enlazada con TARGET _BLANK
Más información con ejemplos: About rel=noopener
Además de esta cuestión de seguridad, NOOPENER mejora el rendimiento al obligar que la nueva pestaña se abra en un nuevo proceso.
Resumiendo:
En enlaces que usan TARGET _BLANK y conducen a sitios externos, SIEMPRE debemos usar el atributo REL NOOPENER.
De no usar este atributo recibiremos una advertencia en la sección "Best Practices" de la herramienta de auditoria Lighthouse o en "Auditar", de las Herramientas de desarrolladores del navegador Google Chrome.

Como usar REL NOOPENER en los enlaces


NOOPENER hasta el momento solo lo admite e interpreta los navegadores Google Chrome (desde la versión 49) y Opera (desde la versión 36).
Se usa de la siguiente forma:
<a href="http://sitio.com" target="_blank" rel="noopener">Enlace a sitio externo</a>
Para usar la misma función en el resto de los navegadores, debemos emplear REL NOREFERRER.
NOREFERRER deshabilita el Referer HTTP header y funciones JavaScript que hacen saltar molestos popups.

Como usar REL NOFOLLOW, NOOPENER y NOREFERRER en los enlaces


No es posible usar más de un atributo REL en una etiqueta HTML.
Por ese motivo debemos de usar cuando sea necesario, las tres propiedades anteriores de la siguiente forma:
<a href="http://sitio.com" target="_blank" rel="nofollow noopener noreferrer">Enlace a sitio externo</a>
Un enlace de ejemplo: Uso de noopener noreferrer y el SEO

El atributo download (descargar) en los enlaces


Atributo usado para descargar un archivo.
Al usar el enlace, el archivo especificado en la etiqueta HREF es descargado al requipo.
El atributo "download" debe contener el nombre que deseamos darle a dicho archivo (no tiene que ser el nombre original).
Por ejemplo con el siguiente enlace se descarga el logo de nuestro sitio.
<a href="../img/logos/logo-norfipc-500.png" download="Logo NorfiPC.png">Descargar imagen</a>
Descargar imagen
La forma en que se descarga depende del navegador usado.

Enlaces para ejecutar JavaScript, ejemplos


Los enlaces o anclajes también son empleado para ejecutar diferentes acciones o tareas, empleando JavaScript. De esa forma también funcionan los Bookmarklets.
Para eso en el atributo HREF en vez de una dirección URL se emplea comúnmente: javascript:FUNCION;
Dos ejemplos:
- El siguiente enlace abre un cuadro de alerta que muestra el título de esta página: Ver título
<a href="javascript:alert(document.title)">Ver título</a>
- El siguiente enlace permite compartir esta página en Google+, en otra pestaña del navegador: Compartir en Google+
<a href="javascript:void(window.open('https://plus.google.com/share?url='+encodeURIComponent(location)));">Compartir en Google+</a>
Void impide salir de la página actual.
Lee más información detallada: Como crear Bookmarklets con JavaScript para usar en el navegador

Páginas relacionadas



Comparte esta página




Sígueme en las redes sociales


Sígueme en Google Plus Sígueme en Facebook Sígueme en Twitter Sígueme en Pinterest





 
Inicio | Mapa del sitio | Sobre mí | RSS | Buscar