Vínculos en HTML

Este tutorial explica la naturaleza y el comportamiento de los vínculos en HTML. Cubrirá los aspectos más importantes de los vínculos y las diferentes formas en que pueden ser definidos.

Concepto

Los vínculos son una parte vital de HTML y consituyen la razón misma por la cual la WWW existe. Internet es considerada una "red" debido a cómo los vínculos conectan todas estas partes singulares (o documentos) unas con otras.

La función básica de un vínculo es la de hacer una referencia, de un documento HTML a un recurso, que puede ser a su vez otro documento. En otras paralabras, un enlace define una relación entre dos recursos en la web.

El elemento a

El elemento a puede ser utilizado para insertar vínculos dentro del contenido del documento. En general estos vínculos, en conjunto con las funcionalidades de los navegadores, permiten a los usuarios trasladarse de un documento a otro de una manera muy directa.

Los navegadores resaltan el contenido de este elemento (por defecto, mostrándolo en azul y subrayado) y permiten a los usuarios seguir el vínculo con un click.

De entre las muchas formas que los autores tienen para construir un vínculo, la más básica consiste en el elemento a con su contenido (el texto entre las etiquetas de apertura y cierre) y una referencia al recurso apuntado (una URI especificada en el atributo href). En el ejemplo siguiente definiremos un vínculo básico siguiendo este criterio: la etiqueta de apertura con la URI del recurso en el atributo href, el contenido y la etiqueta de cierre.

Para mejorar la accesibilidad, el texto de un vínculo (habitualmente conocido como "anchor text") debe proveer una descripción concisa acerca de los contenidos del recurso enlazado.

<a href="../reference/uri-url.html">Definición de URI y URL</a>

Si te estás preguntando qué es esa "URI", no te preocupes. Por ahora solamente digamos que es una "ruta" para ir desde un recurso a otro. Más tarde, veremos este tema en detalle en el tutorial "Organizando un sitio web".

En el ejemplo anterior creamos un vínculo con una línea de texto como contenido, pero en realidad puedes enlazar casi cualquier cosa con el elemento a, especialmente desde que HTML5 entró en la escena. En el siguiente ejemplo haremos un vínculo con un trozo de documento que incluye una imagen (img) y texto.

<a href="http://www.w3.org/">
  <img src="../../images/w3c-icon.gif">
  El consorcio de la WWW
</a>

Enlazando a fragmentos

Un vínculo también puede ser más específico y enlazar a un fragmento particular de otro documento. Para crear este tipo de vínculos, debes llevar a cabo dos tareas:

  1. Preparar el documento de destino, agregando un atributo id al elemento al que necesitas enlazar. Es un buena práctica crear enlaces dirigidos a secciones de un documento, definidas mediante elementos de seccionamiento como section, article, h1, etc. Cualquiera sea el identificador que uses en este atributo, lo necesitarás en la segunda parte de este proceso.
  2. Crear el vínculo en el documento de origen (con el elemento a) agregando al URI del documento de destino, un símbolo numeral ("#") y el identificador usado en el paso anterior.

Para dejarlo más claro, veamos un ejemplo. Primero, analizaremos la estructura de este sitio web con el fin de hacer un vínculo a una de sus secciones. En cualquiera de sus páginas, encontrarás un buen número de atributos id siendo usados para propósitos de vinculación. De hecho, cada sección en este documento está lista para ser enlazada. En el siguiente código, develaremos la estructura de la primera sección en este documento, llamada "Concepto".

<section id="concept">
  <h2>Concepto</h2>
  ... contenido, ejemplos, etc. ...
</section>

Aquí puedes ver, básicamente, tres cosas: el elemento section estableciendo límites y conteniendo a todos los elementos de la sección; el encabezado h2 definiendo un título para la sección; y el contenido. Tomando ventaja de la presencia del elemento section, establecimos el atributo id allí, para que los vínculos puedan hacer referencia a "esta sección del documento".

Ahora viene la segunda parte donde estableceremos un vínculo que apunte a esa sección. Esto es más bien simple, y consiste básicamente en la creación de un vínculo a esta misma página, agregando el símbolo numeral ("#") y el valor del atributo id de la sección enlazada, al URI en el atributo href. Debido a que estamos enlazando desde y hacia el mismo documento, el URI es la cadena vacía (""). Agregando a éste el símbolo numeral ("#") y el id obtenemos "#concept".

Creemos ese vínculo en un ejemplo y veamos qué hace el navegador por nosotros cuando hacemos click sobre él.

<a href="#concept">Volver a la sección "Concepto"</a>

Como puedes ver, el navegador hace lo mismo que con los enlaces comunes: te lleva al contenido enlazado.

123Next