Logotipo horizontal de Diego C Martín colores invertidos, blanco y naranja para findo negro

Hipervínculos o enlaces y uso de atributos en HTML

Categorías:  Autor: Diego C Martin 
Apuntes de HTML

Qué es un hipervínculo o enlace

El elemento más importante que tiene una página web es el hipervínculo, comúnmente llamado enlace. Estos permiten enlazar el documento actual con otra página para que el usuario pueda moverse entre los distintos apartados de un sitio web.

Esto es lo que hace diferente la página de un libro con la página de un sitio web. Normalmente un libro lo recorremos en forma secuencial, es decir, una detrás de otra de forma ordenada; pero en un sitio web podemos disponer los enlaces que deseemos en las páginas que deseemos, generando así distintas formas o caminos de poder acceder a los contenidos.

Normalmente, el navegador, al encontrar la etiqueta de hipervínculo, muestra un texto subrayado, y al hacer clic con el ratón sobre éste, se cargará el destino indicado en dicho hipervínculo.

Algo bastante útil es fijarnos en que cuando pasamos el ratón por encima de un enlace, el navegador nos muestra la URL de destino del mismo en la esquina inferior izquierda de la pantalla en los dispositivos de escritorio. Esto es muy útil por ejemplo para detectar a tiempo un enlace malicioso.

A este texto visible, normalmente subrayado sobre el que hacemos clic le llamamos texto ancla o anchor text.

Cómo crear un hipervínculo HTML

La etiqueta de hipervínculo es

<a>

y tiene cláusula de apertura y de cierre. La sintaxis completa sería la siguiente:

<a href="destino">Texto visible para hacer clic, llamado texto ancla</a>

Hipervínculo a otra página del mismo sitio

Un hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis:

<a href="pagina2.html">Noticias</a>

Lo que se encuentra entre la apertura y el cierre es el texto que aparece visible al usuario en la página y lo llamamos texto ancla o anchor text. En el ejemplo, la palabra Noticias.

Ten en cuenta que dentro del texto ancla podemos poner cualquier otro elemento o elementos HTML, como por ejemplo una imagen. Esto lo lograríamos poniendo la etiqueta img dónde iría el anchor text ¡Inténtalo!

Uso de atributos en HTML

Lo nuevo que aparece en este elemento es un atributo. Los atributos se incorporan dentro de la cláusula de apertura y tienen un valor que se asigna con el signo = y se expresa normalmente entre comillas.

Se pueden emplear tanto comillas ‘simples’ como “dobles” en los valores de los atributos HTML.

En el ejemplo anterior, el atributo es href y su valor es pagina2.html.

El atributo href sirve para especificar el destino del enlace, es decir, la página que se abrirá tras hacer clic en el mismo.

Enlace de correo electrónico

Un enlace de correo electrónico es aquel cuyo destino es una dirección de email. Cuando el usuario hace clic sobre un enlace de este tipo, se abrirá el gestor de correo electrónico predeterminado en el dispositivo, por ejemplo, Outlook o Thunderbird.

Para crear un enlace de correo agregamos la palabra reservada mailto: delante de la dirección de destino en el atributo href:

<h2>Buzón de sugerencias</h2> 
<a href="mailto:bigboss@diegocmartin.com">Enviar email</a>

Adicionalmente podemos agregar otros campos al mismo enlace para que, por ejemplo, aparezca pre cargado el asunto. Esto se hace agregando ? al final de la dirección de correo y & para separar cada uno de los parámetros:

<a href="mailto:diego1@gmail.com?
  subject=aquí el asunto&cc=diego2@gmail.com&
  bcc=diego3@gmail.com">
  Enviar mail.
</a>

Con el parámetro subject aportamos el asunto y con los parámetros cc y bcc a otros destinatarios en copia y en copia oculta respectivamente.

Recuerda que puedes lograr el envío de emails también mediante un formulario con la etiqueta Form, aunque con HTML sólo generamos la parte visual. Necesitaremos un lenguaje de servidor para hacer los envíos.

Enlace a número de teléfono

Los enlaces a números de teléfono son muy útiles en la actualidad debido a que la mayoría de usuarios conectan desde dispositivos móviles.

Emplear la sintaxis que te muestro a continuación, permite al usuario poder hacer la llamada con tan sólo pulsar el enlace, lo cual es extremadamente útila nivel usabilidad. Y la cosa no acaba ahí, ya que los buscadores como Google también saben que ese enlace es de un teléfono, y por tanto le darán la importancia que se merece.

Para crear un enlace a número de teléfono sólo tienes que agregar las letras tel: delante del número de teléfono, dentro del atributo href.

<a href="tel:123456789">123 456 789</a>

Enlaces dentro de la página

Otra posibilidad que nos brinda el HTML es disponer una referencia dentro de la página para poder posteriormente crear un hipervínculo a dicha referencia.

Es una práctica común cuando queremos desplazarnos dentro de una página muy larga. Actualmente están muy de moda, por ejemplo, para eventos puntuales, los sitios web llamados “one page” que sólo tienen una página y el menú principal nos lleva a los diversos apartados de la misma.

En versiones anteriores de HTML, la sintaxis para definir un ancla era:

<a name="nombreancla"></a> 

En HTML5 esta técnica está en desuso, recurriendo al uso del atributo id.

El tributo id sirve para declarar un identificador único al elemento dónde lo coloquemos y le podemos asignar como valor el nombre que queramos. Así, un id en un h2 quedaría:

No debemos confundir un id con un hipervínculo, un identificador id, se define en una parte de la página a la que queremos acceder a partir de un hipervínculo.

La sintaxis para ir a un ancla desde un hipervínculo es la siguiente:

<a href="#nombreid">Texto del enlace</a>

Vemos que en la propiedad href indicamos el nombre del id precedido de #.

Para escribir el símbolo del numeral o almohadilla con un teclado español, pulsamos la tecla Alt Gr + el número 3 encima de la letra E.

Echa un vistazo al Curso Online de HTML5

Aquí puedes ver algunas clases del Curso de HTML5 gratis.

2 comments on “Hipervínculos o enlaces y uso de atributos en HTML”

Responder a Juan Gomez Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Artículos de la misma categoría

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram