Tutorial con información detallada acerca de la naturaleza y el uso de los vínculos HTML (lenguaje de marcas hipertextual). No sólo mostrará la sintaxis básica de los vínculos, sino que también abarcará varias características que son usualmente omitidas y pueden proveer mucha información oculta para diferentes intérpretes (por ejemplo, motores de búsqueda).
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 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 <a href="https://www.htmlquick.com/es/reference/tags/a.html">tag HTML a</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 |
|---|---|
| <a href="https://www.htmlquick.com/es/reference/tags/a.html"> <img src="https://www.htmlquick.com/es/img/links/button.jpg" width="88" height="31" alt="HTMLquick.com logo" /><br /> tag HTML a </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).
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".
Para aprender más acerca del atributo target, refiérete al tag HTML a y a la referencia del tipo frame-target.
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 <a href="https://www.htmlquick.com/es/reference/tags/a.html" type="text/html" hreflang="es" charset="utf-8" rel="help">tag HTML a</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.
Este tipo de vínculo ofrece información relacional generalizada sobre el documento, que usualmente no es mostrada en los navegadores (aunque podría ser mostrada, por ejemplo, como información en una barra de herramientas), pero que puede proveer rica información para otros intérpretes como los motores de búsqueda. Por ejemplo, el tag HTML link puede hacer referencia a un documento que actúa como índice para este documento o apuntar a un recurso que puede ser usado como una lista de clases de hojas de estilos.
En el ejemplo siguiente se definen seis tags que proveen esta información relacional: Un documento actuando como índico, el documento previo y próximo en una secuencia, un documento proporcionando declaraciones de derechos de copia, una versión alternativa del documento diseñada para impresión y un archivo de hojas de estilos conteniendo clases.