Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Tutoriales HTML > Vínculos en HTML

Bypass main content

Vínculos en HTML

Este tutorial explica profundamente la naturaleza y el uso de vínculos en HTML. No sólo mostrará la sintaxis básica de los vínculos, sino que también revisará varias características que son habitualmente ignoradas y que pueden proveer mucha información invisible para diferentes intérpretes (por ejemplo, motores de búsqueda).

Páginas:12>
Bypass main content

Los vínculos son una parte vital del HTML y todo el concepto de World Wide Web. Internet es considerada una red debido a cómo los vínculos conectan piezas separados de documentos, basándose en la idea de una simple referencia potenciada por la interactividad. Como resultado, un simple click te lleva del documento referente al mencionado en el vínculo.

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

El tag HTML

El elemento 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 al documento actual que los usuarios pueden, generalmente, accesar con un simple click en el contenido vinculado. El contenido vinculado es simplemente el contenido del elemento HTML a (es decir, la pieza de código HTML que está ubicada entre el tag de apertura y el de cierre). Nota que los vínculos son usualmente representados de manera diferente por los navegadores para ayudar a los usuarios a reconocerlos.

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

Código
El <a href="http://www.htmlquick.com/es/reference/tags/a.html">tag HTML a</a> explicado
Vista
el tag HTML a explicado

Nota: para aprender más acerca de como localizar recursos refiérete al tutorial: "Organizando un sitio web".

En el ejemplo anterior creamos un simple vínculo usando texto como contenido, pero puedes vincular prácticamente cualquier cosa usando el elemento HTML a. En el siguiente ejemplo haremos un vínculo con una proción de documento que incluye una imágen y texto.

Código
<a href="http://www.htmlquick.com/es/reference/tags/a.html">
<img src="http://www.htmlquick.com/img/p/link-to-us/banner.jpg" alt="Logo de HTMLQuick.com" width="468" height="60" /><br />
tag HTML a
</a>
Vista

Nota el cierre " />" utilizado en tags vacíos para lograr la compatibilidad con XHTML.

Cuando utilizamos texto como contenido de un vínculo (de ahora en adelante nos referiremos a este texto como, "texto ancla" o "anchor text") exista una cosa a tomar en cuenta: el texto debe describir brevemente (como el elemento HTML title) el contenido del recurso vinculado. Esto es algo librado a la consideración de cada autor, pero la utilización de textos ancla descriptivos pueden proveer valiosa información a los usuarios y motores de búsqueda (muy importante en la promoción de un sitio).

Otra cosa a considerar es que al vincular a un directorio (no a un archivo, por ejemplo, http://www.htmlquick.com) debes agregar siempre una barra al final de la URL (por ejemplo, http://www.htmlquick.com/). Aún cuando la mayoría de los navegadores o servidores resuelven automáticamente este problema, 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 se cargará el recurso vinculado mediante el elemento HTML a (por ejemplo, puede ser cargado en una nueva ventana del navegador, en un "marco" específico si existe un "frameset", o simplemente en la misma ventana). Esto puede resultar útil algunas veces pero también hace al código incompatible con el estándar estricto de XHTML. si realmente quieres utilizarlo tendrás que optar por un "Transitional DTD" (en el tag HTML !DOCTYPE).

En este ejemplo, mostramos el código para dos vínculos: el primero es abierto en una nueva ventana y el segundo en un marco llamado "principal".

Código
<a href="http://www.url.com" target="_blank">URL</a>
<a href="http://www.url.com" target="principal">URL</a>

Para aprender más acerca del atributo "target", revisa la referencia para el elemento HTML a y el tipo frame-target.

Páginas:12>

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona