Elemento area

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 area define una sección en un mapa de imagen. Los mapas de imagen permiten a los autores definir secciones en una imagen y, opcionalmente, convertirlas en hipervínculos que apuntan a otros recursos. En otras palabras, los mapas de imagen hacen posbile la creación de un vínculo a partir de una o más secciones de la imagen (img) a la que se encuentran asociados.

Existen cuatro tipos de figuras que pueden ser definidas para cada área del mapa de imagen, declarando cualquiera de los valores listados a continuación en el atributo shape. El atributo coords debe proveer las coordenadas de la forma de manera específica para cada tipo de area.

  • default: todo el área del mapa. El atributo coords no es necesario.
  • rect: una región rectangular. El atributo coords debe proveer dos esquinas opuestas "izquierda-x, arriba-y, derecha-x, abajo-y".
  • circle: una región circular. El atributo coords debe proveer el centro y el radio "centro-x, centro-y, radio". Si el radio se mide en porcentajes, es calculado como relativo al tamaño menor del objeto asociado.
  • poly: el área encerrada dentro de un polígono. El atributo coords debe proveer, una a una, las coordenadas de los vértices "x1, y1, x2, y2, ..., xn, yn". Si éstas definen un polígono abierto, el navegador debería cerrarlo agregando un segmento entre el primer vértice y el último.

En versiones previas del estándar, los autores también podían definir las áreas de un mapa de imagen con el elemento a. En HTML5 sólo el elemento area provee esta funcionalidad.

El elemento area solo puede tener un elemento map como padre. No puede ser declarado como hijo de ningún otro elemento.

En HTML5, el atributo alt es obligatorio cuando el atributo href está presente y debe ser omitido en caso contrario. También es requerido que se especifiquen las coordenadas para la forma (en el atributo coords) si no se ha optado por la forma "default".

Ejemplos

En el siguiente ejemplo, crearemos un mapa de imagen y lo asociaremos a la imagen. Dentro de éste, insertaremos dos áreas (area), una circular y la otra rectangular, que cubrirán las figuras que vemos en la imagen (un círuclo y un trozo de texto). Esto permitirá al usuario seguir el vínculo al hacer clic sólo en las áreas deseadas de la imagen, y no en la imagen entera.

Junto a este texto, también encontrarás una imagen con el esquema de las áreas que serán especificadas en el siguiente ejemplo. Éstas aparecen visibiles en esta imagen para una mejor comprensión.

<map name="image-map-1">
  <area href="../../tutorials.html" alt="Tutoriales HTML" shape="circle" coords="67,73,47">
  <area href="../../tutorials.html" alt="Tutoriales HTML" shape="rect" coords="60,54,142,99">
</map>
<img src="../../../images/image-map-1-es.png" usemap="#image-map-1" alt="Mapa de imagen de ejemplo">
Tutoriales HTML Tutoriales HTML Mapa de imagen de ejemplo

Un par de cosas para notar en este ejemplo: primero, que los valores en los atributos shape y coords de los elementos area describen exactamente las áreas necesarias; y segundo, que los valores del atributo name en el elemento map y del atributo usemap en la imagen, son coincidentes (excepto por el signo numeral requerido).

Atributos

Atributos específicos

alt

Una versión textual equivalente al contenido/propósito de este elemento.

Este atributo provee alternativas textuales útiles que pueden resultar vitales para personas con discapacidades o tecnologías precarias. Usar el atributo alt siempre que sea posible es una buena práctica para mejorar la accesibilidad.

En HTML5, este atributo es requerido si el atributo href está presente y debe ser omitido en caso contrario. Los autores deberían proveerlo con una corta pero precisa descripción del propósito del elemento, excepto cuando existe otra area que apunta al mismo recurso con el atributo alt correctamente definido.

Ejemplo

<area href="documento1.html" alt="Primer documento" shape="circle" coords="40, 40, 30">

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: todo el área del mapa.
  • rect: una región rectangular.
  • circle: una región circular.
  • poly: el área encerrada dentro de un polígono.

Ejemplo

<area href="documento1.html" alt="Primer documento" shape="circle" coords="40, 40, 30">
<area href="documento2.html" alt="Segundo documento" shape="rect" coords="10, 80, 90, 170">
<area href="documento3.html" alt="Tercer documento" shape="poly" coords="10, 180, 10, 210, 15, 195">

coords

Las coordenadas que definen el tamaño y la posición de una forma en un mapa de imagen. Se utiliza en conjunto con el atributo shape, y las coordenadas que deben proveer dependen del tipo de forma. En cualquier caso, los valores van siempre separados por una coma:

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

Este atributo debe ser únicamente especificado cuando el elemento area se encuentra definiendo un rectángulo, un círculo o un polígono. Cuando el atributo shape no está presente o toma el valor default, este atributo debe omitirse.

Ejemplo

<area href="documento1.html" alt="Primer documento" shape="circle" coords="40, 40, 30">
<area href="documento2.html" alt="Segundo documento" shape="rect" coords="10, 80, 90, 170">
<area href="documento3.html" alt="Tercer documento" shape="poly" coords="10, 180, 10, 210, 15, 195">

href

La dirección (representada por un URI) para el recurso enlazado. Este es el atributo que convierte al área en un hipervínculo y su ausencia hace que el elemento defina un "área inherte" en el mapa de imagen.

Ejemplo

<area alt="Primer documento" shape="circle" coords="50, 50, 30">

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

<area href="document1.html" target="_blank" alt="First document (opens in new window)" shape="rect" coords="10, 80, 90, 170">

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 está 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

<map name="image-map-1">
  <area href="../../tutorials.html" alt="Tutoriales HTML" shape="circle" coords="67,73,47" download="tutoriales-html.html">
  <area href="../../tutorials.html" alt="Tutoriales HTML" shape="rect" coords="60,54,142,99" download="tutoriales-html.html">
</map>
<img src="../../../images/image-map-1-es.png" usemap="#image-map-1" alt="Mapa de imagen de ejemplo">
Tutoriales HTML Tutoriales HTML Mapa de imagen de ejemplo

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

<area href="/articulos/energias-limpias.html" alt="Artículo sobre energías limpias" shape="circle" coords="50,50,20" ping="/auditar.php?pagina=articulo-energias-limpias&enlace=5">

rel

Una lista de tipos de vínculos, 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: el enlace permanente para la sección más próxima que contiene a este elemento.
  • external: el documento referenciado 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 original del documento actual no respalda al documento enlazado.
  • noreferrer: el navegador no debería enviar un remitente si el vínculos es seguido.
  • noopener: cualquier contexto de navegación creado al seguir el vínculo se desvinculará de aquel que lo ha creado.
  • 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 la dirección provista) que se aplica al documento actual.

Ejemplo

<area rel="next" href="documento2.html" alt="Segundo documento" shape="circle" coords="40, 40, 30">
<area rel="copyright" href="copyright.html" alt="Información de Copyright" shape="rect" coords="10, 80, 90, 170">
<area rel="alternate" href="en/documento1.html" alt="Primer documento (versión en inglés)" shape="poly" coords="10, 180, 10, 210, 15, 195">

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 este atributo toma a la cadena vacía, se asume el valor no-referrer.

Ejemplo

<area rel="license" src="https://creativecommons.org/publicdomain/zero/1.0/" referrerpolicy="unsafe-url">

hreflang

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

Este atributo se ha vuelto obsoleto en HTML5 debido al escaso uso por parte de usuarios y navegadores. Su uso ya no es válido.

Ejemplo

<area hreflang="en-UK" href="en/documento1.html" alt="Primer documento (versión en inglés)" shape="rect" coords="10, 80, 90, 170">

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).

Este atributo se ha vuelto obsoleto en HTML5 debido al escaso uso por parte de usuarios y navegadores. Su uso ya no es válido.

Ejemplo

<area href="articulo.html" type="text/html" alt="Artículo principal" shape="circle" coords="40, 40, 30">
<area href="foto.jpg" type="image/jpeg" alt="Foto del autor" shape="rect" coords="10, 80, 90, 170">

nohref

Un valor booleano que indica si este área establece un hipervínculo. La presencia de este atributo en el elemento indica que el área no define un vínculo.

Este atributo se ha vuelto obsoleto en HTML5 y, por lo tanto, su uso ya no es válido. Los autores pueden definir áreas sin hipervínculos con solo omitir la declaración del atributo href.

Ejemplo

<area nohref shape="rect" coords="10, 80, 90, 170">

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.