Vínculos en HTML

Los vínculos son una parte vital de HTML y del concepto mismo de la web. Internet es considerada una red debido a cómo los vínculos conectan partes o documentos separados, basados en la idea de una simple referencia sumada a la interactividad. Como resultado, un simple click te lleva desde el documento referente al mencionado en el vínculo.

Un vínculo HTML puede ser básicamente considerado como una referencia a otro recurso. Esta referencia establece una relación implícita entre el documento y el recurso vinculado. Los vínculos pueden ser clasificados como visuales (ubicados dentro del contenido del documento) u ocultos (definiendo información relacional generalizada).

El tag HTML a

El tag HTML a puede ser usado para insertar vínculos dentro del contenido de un documento. Esto puede ayudar a los autores a recomendar otros recursos relacionados con el tópico actual, al cual los usuarios pueden, en la mayoría de los casos, acceder simplemente haciendo un click en el contenido vinculado. El contenido vinculado no es otra cosa que el contenido del tag HTML a (o sea, el pedazo de código ubicado entre los tags de apertura y cierre). Nota que los vínculos son usualmente graficados de un modo diferente por los navegadores, lo que ayuda a los usuarios a reconocerlos.

Existen muchas maneras de construir un vínculo, pero básicamente debe constar de, al menos, el contenido y la dirección del recurso (definida mediante el atributo "href"). En el ejemplo siguiente definiremos un vínculo básico:

Código	Visualización
El tag HTML a explicado.	El tag HTML a explicado.

Para aprender más acerca de cómo ubicar y organizar recursos, refiérete a nuestro tutorial "Organizando un sitio web".

En el ejemplo anterior, creamos un vínculo simple con texto por contenido, pero en realidad puede vincularse casi cualquier tipo de contenido usando el tag HTML a. En el siguiente ejemplo haremos un vínculo con una porción de contenido que incluye una imagen y texto.

Código	Visualización
tag HTML a	tag HTML a

Nota el tag de cierre " />" usado en los tags vacíos con el objeto de lograr compatibilidad con el estándar de código XHTML(lenguaje de marcas hipertextual extensible).

Al usar texto como contenido de un vínculo (texto ancla) hay otra cosa por considerar: el texto debería describir brevemente (tal como debería un tag HTML title) el contenido del recurso vinculado. Esto queda a consideración de cada autor, pero el uso de vínculos descriptivos puede proveer con información a usuarios y motores de búsqueda (muy importante en la promoción de un sitio).

Otra cosa por considerar es que al hacer un vínculo hacia un directorio (no a un archivo, por ejemplo, http://www.htmlquick.com/es) deberías siempre agregar una barra al final de la URL (por ejemplo, http://www.htmlquick.com/es/). Aún cuando este problema es resuelto por la mayoría de los navegadores o servidores, es una buena práctica que sumará a la correctitud de tu código.

El atributo target

El atributo target permite a los autores decidir dónde el recurso vinculado mediante el tag HTML a debe ser mostrado (por ejemplo, puede ser mostrado en una nueva ventana del navegador, en un marco específico si se trata de una página de marcos, o simplemente en la misma ventana). Esto puede resultar útil algunas veces, pero también hace al documento incompatible con el estándar de código XHTML estricto. Si realmente deseas usarlo deberás optar por un DTD (declaración de tipo de documento) transicional (en el tag HTML !DOCTYPE).

En el siguiente ejemplo, mostramos el código para dos vínculos: el primero será abierto en una nueva ventana y el segundo en un marco llamado "main".

URL
URL

Para aprender más acerca del atributo target, refiérete al tag HTML a y a la referencia del tipo frame-target.

Información extra

Existen muchos atributos disponibles para los tags de vínculos que pueden proveer información crucial que algunas veces (dependiendo del navegador) pueden permanecer ocultas, pero que seguirán proporcionando mucha información para otro tipo de visitantes como los motores de búsqueda. Estos atributos pueden ser utilizados de manera independiente o conjunta, de acuerdo con cada caso.

En el siguiente ejemplo definiremos un vínculo que se verá exactamente como el del primer ejemplo, pero agregará cierta información que puede resultar muy útil para los motores de búsqueda.

Código	Visualización
Aprende más acerca del tag HTML a.	Aprende más acerca del tag HTML a.

De esta manera, no solo hemos provisto un vínculo a nuestros usuarios que los ayudará en el aprendizaje de dicho tag, sino que además hemos agregado información no visual acerca del recurso vinculado: el tipo de contenido (ver tipos MIME(extensiones de correo de internet multipropósito)), el lenguaje (ver códigos de lenguaje), la codificación de caracteres usada (ver codificación de caracteres (character encodings)), y la relación entre este documento y aquel vinculado.

Para aprender más acerca de las formas de proveer información extra en los vínculos, refiérete al tag HTML a y al tag HTML link.

Bookmarks (vínculos dentro de la página)

Los marcadores funcionan de igual manera que los vínculos comunes, pero lo hacen dentro de la página. Son usados para referirse a un documento y más específicamente a una parte del mismo.

Para emplazar un marcador solo necesitas insertar un tag HTML a con un atributo id o name (usa "id" para XHTML estricto o ambos "id" y "name" con el mismo valor para compatibilidad). Ejemplo:

Código	Visualización
Aquí emplazaremos nuestro primer marcador, de modo que mas tarde podamos referirnos a el con un vínculo.	Aquí emplazaremos nuestro primer marcador, de modo que mas tarde podamos referirnos a el con un vínculo.

Una vez que el marcador está dispuesto, puedes referirte al mismo contruyendo un vínculo (con el tag HTML a) y usando el símbolo "#" seguido por el nombre del marcador como URI para el artibuto "href". Recuerda que puedes referirte a un marcador como te puedes referir a un vínculo, usando una URI relativa (por ejemplo, #bookmark1 o links.html#bookmark1) o la URL completa (por ejemplo, http://www.htmlquick.com/es/tutorials/links.html#bookmark1). Posiblemente has notado que también puedes hacer un vínculo a un marcador en otra página, lo cual te llevará primero a la página y luego a la parte del documento donde se encuentra el marcador.

En el siguiente ejemplo haremos un vínculo a un marcador previamente definido en esta página con el título "El tag HTML a" (con el nombre de "the-html-a-tag"), para que puedas ver como funciona.

Código	Visualización
El tag HTML a en el tutorial de vínculos	El tag HTML a en el tutorial de vínculos

Vínculos a e-mails

Los vínculos a e-mails son una variante de los vínculos comunes fácil de construir y son útiles para apuntar a direcciones de correo electrónico. La acción usual llevada a cabo por los navegadores en estos casos es la de abrir el programa cliente de correo electrónico presente en el sistema (en la máquina del visitante) y preparar automáticamente un correo electrónico con el campo de la dirección automáticamente rellenado. Esto puede resultar útil para acortar el proceso a aquellos visitantes que utilizan dichos clientes, pero como podrás notar, los visitantes que no tienen estos clientes instalados en la computadora o no tienen su cuenta de e-mail configurada en ellos, encontrarán al vínculo poco útil.

De todos modos, este tipo de vínculos tiene un significado especial: apunta y describe una dirección de correo electrónico específica, lo cual resulta semánticamente diferente a un texto plano, y como la dirección puede ser copiada y pegada en cualquier sistema de correo electrónico (por ejemplo, aplicaciones web de e-mail), nuestra recomendación es de usarlos siempre que sea posible.

Estos vínculos también son construidos con el tag HTML a con una pequeña variante: el atributo "href" debe dar la dirección de e-mail después del texto "mailto:". En el siguiente ejemplo haremos un vínculo a la dirección de correo del webmaster de este sitio:

Código	Visualización
Webmaster de este sitio	Webmaster de este sitio

Advertencia: De acuerdo con el estándar HTML, los vínculos a correo electrónico solo aceptan una dirección de correo electrónico como contenido del atributo "href", dado que el contenido de este atributo puede ser únicamente una URL o un esquema de URL mailto. Esto excluye cualquier otra información que es usualmente agregada a vínculos de e-mail como direcciones adicionales, asuntos, contenidos, etc.