Elemento a

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento a representa un vínculo, si el atributo href está presente, y un marcador de posiciñón para un vícnulo en otro caso. Los vínculos son la parte más escencial de HTML y una de las razones principales por las que ha nacido. Éstos permiten a los autores enlazar un trozo de contenido (generalmente texto o imágenes) con un recurso externo, el cual puede ser otro documento, una imagen, o cualquier otro tipo de recurso. El atributo href es el encargado de especificar, mediante un URI, la ubicación del recurso enlazado.

Los navegadores habitualmente proporcionan los mecanismos para seguir un vínculo hasta el recurso al que apunta, generalmente haciendo un click sobre el texto dentro del elemento a.

Los vínculos pueden ser utilizados, no solo para enlazar otros documentos, sino también para referenciar a una parte específica de su contenido. Para establecer este tipo de vínculos, el documento enlazado debe tener un elemento o sección que presente un valor en su atributo id. Luego, los vínculos que quieran referisrse a esta sección deberán anexar a la URI del documneto un signo numeral ("#") y el valor del atributo id de dicha sección. Cuando un vínculo de este tipo es seguido, los navegadores se dirigen a esa parte del documento luego de que éste se haya cargado.

En HTML5, la noción de marcador se ha adaptado para permitir que cualquier elemento con el atributo id definido, actúe como marcador. Esta es una actualización muy conveniente para los autores, que en otras versiones del estándar solo podían establecer marcadores con el elemento a.

La especificación de HTML5 ahora permite que a encierre bloques enteros de contenido (con elementos como p, section y article, anteriormente considerados "de nivel de bloque"), siempre que no presenten ningún elemento interactivo como botones u otros vínculos.

Tradicionalmente, el elemento a podía ser usado para definir un área en un mapa de imagen del lado cliente. HTML5 considera obsoleto a este uso del elemento. El elemento area debería utilizarse en su lugar.

Ejemplos

En nuestro primer ejemplo, crearemos un vínculo básico que apunte a la página principal de HTMLQuick.com. Para lograr esto, usaremos el atributo href con el URL de este sitio ("http://www.htmlquick.com/"). El contenido del elemento será el texto visible, sobre el cual podemos hacer click para seguir el vínculo.

<p>Hola, disfruta de estos <a href="http://www.htmlquick.com/">tutoriales sobre HTML</a> en HTMLQuick.com</p>

Hola, disfruta de estos tutoriales sobre HTML en HTMLQuick.com

Ahora, es tiempo de agregar un vínculo que apunte a un marcador en esta misma página. Apuntaremos el vínculo al título "Descripción", ubicado casi al comienzo del documento. Ese título ya tiene un atributo id con el valor "description" en él.

Entonces, construiremos el vínculo exactamente como en el ejemplo anterior pero con el URI de este documento (que es la cadena vacía, ya que utilizamos un URI relativo) seguido de un signo numeral ("#") y el id del elemento enlazado ("description"). En la mayoría de los navegadores verás como, al hacer click en este vínculo, el navegador se dirigirá a la descripción de este elemento (a).

<p>Quieres volver a la sección de la <a href="#description">descripción del elemento a</a>?</p>

Quieres volver a la sección de la descripción del elemento a?

La idea en el último ejemplo también puede usarse para crear un enlace a un marcador en otro documento. El navegador seguirá automáticamente el vínculo al documento enlazado y una vez allí, se desplazará a la correspondiente sección de éste.

Atributos

Atributos específicos

href

La dirección (representada por un URI) del recurso enlazado. Este atributo es el corazón del vínculo, e indica a los navegadores a dónde deben dirigirse cuando el vínculo es activado.

El elemento a puede ser declarado sin el atributo href. En tales casos, el elemento representa un marcador de posición donde un vínculo podría haber sido colocado en otro caso, si hubiera sido relevante. Este puede ser el caso de los menus de navegación, donde el vínculo que apunta a la página actual es omitido.

Ejemplo

<p>Vínculo a una página en este sitio: <a href="../../tutorials/links.html">tutorial acerca de vínculos</a></p>
<p>Vínculo a un sitio externo: <a href="http://www.w3.org/">El consorcio de la World Wide Web</a></p>

Vínculo a una página en este sitio: tutorial acerca de vínculos

Vínculo a un sitio externo: El consorcio de la World Wide Web

target

Un valor que especifica dónde debería abrirse el recurso enlazado. Este valor puede ser un nombre de contexto de navegación (como el valor del atributo name de un iframe) o cualquier a de los siguientes valores (insensibles a mayúsculas/minúsculas):

  • _blank: el vínculo se abrirá en una nueva ventana.
  • _parent: el vínculo se abrirá en el contexto padre inmediato.
  • _self: el vínculo se abrirá en el mismo contexto que contiene al vínculo.
  • _top: el vínculo se abrirá en el más alto contexto de navegación (el contexto más exterior que contiene al vínculo).

El atributo target fue desaprobado en versiones previas de HTML, pero ha sido reincorporado en HTML5 ya que se vuelve útil en combinación con el elemento iframe.

Ejemplo

<a href="http://www.htmlquick.com/" target="_blank">Abre HTMLQuick.com en una nueva ventana</a>

download

Un valor booleano que indica si el recurso enlazado debería ser descargado a la máquina del usuario o abrirse en el navegador. Si se encuentra presente, el navegador descargará el recurso enlazado cuando el vínculo sea activado. Adicionalmente, los autores pueden especificar como valor del atributo, un nombre sugerido con el cual guardar el archivo en disco.

Al seleccionar un valor para este atributo, los autores debe ser conscientes de que la mayoría de los sistemas de archivo tienen restricciones que previenen el uso de ciertos caracteres en los nombres de archivo.

Ejemplo

<p><a href="/" download="htmquick.html">Descárgate la página inicial de HTMLQuick</a></p>

ping

Una lista de URLs separados por espacios, a los que el navegador debería hacer ping (pedir o navegar) cuando el vínculo es activado. Este atributo es útil cuando se necesita recolectar informción estadística acerca de los vínculos.

Los navegadores pueden ignorar completamente a este atributo bajo petición del usuario. Los autores no deberían confiar completamente en los resultados obtenidos mediante este método para auditar hipervínculos.

Ejemplo

<a href="/articulos/energias-limpias.html" ping="/auditar.php?pagina=articulo-energias-limpias&vinculo=5">Artículo sobre energías limpias</a>

rel

Una lista no ordenada de tipos de vínculos únicos, separados por espacios, que indican el significado que el recurso enlazado tiene para el documento actual (el que contiene al vínculo). Este atributo puede contener los siguientes valores:

  • alternate: una representación alternativa del documento actual.
  • author: un enlace al autor del documento o artículo actual.
  • bookmark: un enlace permanente a la sección más inmediata que contiene al vínculo.
  • external: el recurso enlazado no es parte del mismo sitio que el documento actual.
  • help: un vínculo a ayuda contextual.
  • license: una descripción de una licencia de copyright que cubre al contenido principal del documento actual.
  • next: el próximo documento en una serie de documentos.
  • nofollow: el autor o editor original del documento actual no respalda al documento enlazado.
  • noopener: indica que cualquier contexto de navegación creado al seguir el vínculo no debe reconocer a su padre.
  • noreferrer: indica al navegador no enviar información acerca del remitente (documento actual) cuando el vínculo es activado.
  • opener: fuerza al navegador a enviar información acerca del padre del nuevo contexto de navegación creado por el elemento. Este valor es útil, por ejemplo, para prevenir la conducta por defecto de los vínculos que se abren en nuevos contextos de navegación (valor _blank en su atributo taget).
  • prev: el documento previo en una serie de documentos.
  • search: un enlace a un recurso que puede ser utilizado para buscar en el documento actual y sus páginas relacionadas.
  • tag: una etiqueta, identificada por el documento enlazado, que aplica al documento actual.

Ejemplo

<a rel="prev" href="articulo1.html">Leer artículo anterior</a>
<a rel="next" href="articulo3.html">Leer artículo siguiente</a>
<a rel="license" href="copyright.html">Copyrights del artículo</a>
<a rel="alternate" href="version-ingles.html" hreflang="en">Versión en inglés</a>

hreflang

Una etiqueta de lenguaje que identifica al lenguaje que se espera que utilice el documento enlazado.

Ejemplo

<a hreflang="en" href="version-ingles.html">Versión en inglés</a>

type

El tipo de contenido (o Tipo de medio de Internet) que se espera que tenga el recurso enlazado. El valor por defecto es "all" (todos).

Ejemplo

<a href="logo.gif" type="image/gif">Mira nuestro logo</a>
<a href="articulo.html" type="text/html">Lee el artículo</a>

referrerpolicy

Establece la política de origen utilizada en el procesamiento de los atributos del elemento, lo que involucra qué información es enviada acerca del remitente en una petición de otro recurso. Puede contener cualquiera de los siguientes valores:

  • no-referrer: Ninguna información acerca del remitente es enviada en todas las peticiones.
  • no-referrer-when-downgrade: Una URL completa es enviada únicamente en las peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • same-origin: Una URL completa es enviada únicamente en las peticiones hechas en el mismo origen.
  • origin: Una URL compuesta por protocolo, servidor y puerto es enviada en todas las peticiones.
  • strict-origin: Una URL compuesta por protocolo, servidor y puerto es enviada únicamente en las peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • origin-when-cross-origin: Una URL completa en las peticiones hechas en el mismo origen y una URL compuesta por protocolo, servidor y puerto es enviada en peticiones de distintos orígenes.
  • strict-origin-when-cross-origin: Una URL completa en las peticiones hechas en el mismo origen y una URL compuesta por protocolo, servidor y puerto es enviada en peticiones de distintos orígenes, únicamente en peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • unsafe-url: Una URL completa es enviada en todas las peticiones.

Nota: Cuando la cadena vacía es especificada, se asume el valor no-referrer.

Ejemplo

<a rel="license" src="https://creativecommons.org/publicdomain/zero/1.0/" referrerpolicy="unsafe-url">Este contenido pertenece al dominio público</a>

charset

La codificación de caracteres utilizada por el recurso enlazado.

Este atributo se ha vuelto obsoleto en HTML5 y su uso ya no es válido. Se alienta a los autores a usar los encabezados Content-Type de HTTP para proveer información acerca del conjunto de caracteres en documentos y otros recursos.

Ejemplo

<a charset="utf-8" href="http://www.htmlquick.com/">Tutoriales sobre HTML</a>

coords

Un conjunto de coordenadas que definen tamaño y posición de una figura en un mapa de imagen. Este atributo es utilizado junto al atributo shape, y las coordenadas que contiene (que siempre van separadas por comas) dependen del tipo de forma que se defina. La siguiente lista indica qué información debe proveer este atributo en función del valor de shape:

  • rect: dos esquinas opuestas de rectángulo "izquierda-x, arriba-y, derecha-x, abajo-y".
  • circle: el centro y el radio del círculo "centro-x, centro-y, radio". Si el radio se mide en porcentajes, éste se calcula relativo al menor tamaño del objeto asociado.
  • poly: una por una, las coordenadas de los vértices del polígono "x1, y1, x2, y2, ..., xN, yN". Si definen un polígono abierto, el navegador debería cerrarlo agregando un segmento entre el primer vértice y el último.

El uso de este atributo en el elemento a se ha vuelto obsoleto en HTML5 y, por lo tanto, ya no es válido. Las áreas de un mapa de imagen sólo pueden ser definidas con el elemento area.

Ejemplo

<a href="documento1.html" alt="Primer documento" shape="circle" coords="50, 50, 30"></a>
<a href="documento2.html" alt="Segundo documento" shape="rect" coords="10, 10, 90, 90"></a>
<a href="documento3.html" alt="Tercer documenot" shape="poly" coords="10, 10, 10, 40, 15, 40"></a>

name

Un nombre para el elemento.

Este atributo se usaba en versiones anteriores de HTML como un identificador para el elemento y para definir marcadores en el documento. En HTML5 su uso se ha vuelto obsoleto y los autores deberían reemplazarlo con el atributo id.

Ejemplo

<h1><a name="primer-titulo">Conocimiento</a></h1>

rev

El significado que el documento actual (el que contiene al vínculo) tiene para el recurso enlazado.

Este atributo se ha vuelto obsoleto en HTML5 y su uso ya no es válido. Se alienta a los autores a reemplazarlo con el atributo rel.

Ejemplo

<a rev="index" href="articulo1.html">Artículo 1</a>
<a rev="index" href="articulo2.html">Artículo 2</a>
<a rev="index" href="articulo3.html">Artículo 3</a>

shape

La forma de la figura usada para definir un área en un mapa de imagen. Los valores que este atributo puede tomar son los siguientes (insensibles a mayúsculas/minúsculas):

  • default: el área entera del mapa.
  • circle: una región circular.
  • rect: una región rectangular.
  • poly: el área dentro de un polígono.

El uso de este atributo en el elemento a se ha vuelto obsoleto en HTML5 y, por lo tanto, ya no es válido. Las áreas de un mapa de imagen sólo pueden ser definidas con el elemento area.

Ejemplo

<a href="pagina1.html" alt="Página 1" shape="poly" coords="0, 0, 20, 20, 20, 0"></a>
<a href="pagina2.html" alt="Página 2" shape="circle" coords="80, 40, 30"></a>
<a href="pagina3.html" alt="Página 3" shape="rect" coords="100, 100, 110, 110"></a>

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.