Etiqueta HTML <area>
La etiqueta <area> define las áreas activas de un mapa de imagen. Descripción, atributos y ejemplos de uso.
La etiqueta <area> identifica las áreas activas (coordenadas, forma, tamaño, etc.) del mapa de imagen, definido por la etiqueta <map>. Al hacer clic en el área activa de la imagen, se produce una acción determinada; por ejemplo, navegar a una página con información detallada.
Esta página explica qué hace <area>, cómo funciona el sistema de coordenadas coords, todos los valores de forma (incluidos poly y default), las reglas de accesibilidad que debes seguir y el problema de diseño responsivo que afecta a proyectos reales.
La etiqueta <area> siempre se coloca dentro de la etiqueta <map>. Las áreas activas pueden superponerse; en ese caso, se activa el área que aparece más tarde en el orden del DOM al hacer clic.
Por qué y cuándo usar un mapa de imagen
Un mapa de imagen convierte partes de un único <img> en enlaces independientes en los que se puede hacer clic. Cada <area> se convierte en su propio punto de acceso con su propio href, de modo que una sola imagen puede dirigir a varios destinos — piensa en un diagrama interactivo, un plano de planta o un mapa de regiones.
Conectas una imagen a su mapa con el atributo usemap en el <img>, que apunta al name del mapa (por ejemplo, usemap="#blockmap" coincide con <map name="blockmap">).
Cuándo un mapa de imagen es una buena opción:
- Las regiones en las que se puede hacer clic están genuinamente dentro de una imagen rasterizada (una foto, un diagrama escaneado) y no pueden dividirse fácilmente en elementos separados.
- Las formas son irregulares (el contorno de un país, una zona de clic no rectangular) donde un área
polyencaja de forma natural.
Cuándo usar una alternativa:
- Zonas rectangulares sobre contenido separado → simplemente organiza enlaces
<a>individuales (cada uno envolviendo su propia imagen o bloque con estilos). Esto es más flexible y responsivo por defecto. - Gráficos vectoriales / diagramas escalables → usa SVG en línea con elementos
<a>en su interior. Los puntos de acceso SVG escalan con el diseño, admiten estilos hover/focus y son mucho más accesibles que las formas<area>basadas en píxeles. - Botones superpuestos simples → los enlaces CSS posicionados de forma absoluta sobre la imagen escalan mejor que las
coordsfijas.
La gran desventaja: las coordenadas de <area> se miden en píxeles fijos, por lo que un mapa de imagen no se adapta cuando la imagen se escala con CSS responsivo (consulta la sección sobre limitaciones responsivas y móviles más adelante).
Sintaxis
La etiqueta <area> es vacía, lo que significa que la etiqueta de cierre no es obligatoria. Sin embargo, en XHTML, la etiqueta <area> debe cerrarse (<area />).
Ejemplo de la etiqueta HTML <area>:
Etiqueta HTML <area>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Click on the logo or on one of the logo item to watch it closer:</p>
<img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="block" usemap="#blockmap" />
<map name="blockmap">
<area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
<area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
<area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
<area class="homepage" shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
</map>
</body>
</html>Cómo funciona el sistema de coordenadas coords
Esta es la parte que los desarrolladores suelen entender mal. Todos los valores de coords son desplazamientos en píxeles medidos desde la esquina superior izquierda de la imagen — no de la página ni del viewport. El primer eje (x) aumenta hacia la derecha; el segundo eje (y) aumenta hacia abajo.
El significado de los números depende de shape:
rect—x1,y1,x2,y2: la esquina superior izquierda y luego la esquina inferior derecha.circle—x,y,radius: el punto central y luego el radio (todo en píxeles).poly—x1,y1,x2,y2,...,xn,yn: una lista ordenada de vértices; el navegador los conecta y cierra la forma automáticamente.default— sin coords; el área cubre toda la imagen.
Ejemplo práctico
Para una imagen de 250 de ancho y 150 de alto, un rectángulo que cubre su cuarto superior izquierdo es:
<area shape="rect" coords="0,0,125,75" alt="Top-left quarter" href="/top-left">Léelo así: esquina superior izquierda en (0, 0), esquina inferior derecha en (125, 75). Un círculo centrado en el medio de esa misma imagen con un radio de 40 px sería coords="125,75,40".
Como son píxeles sin procesar, deben coincidir con el tamaño intrínseco (natural) de la imagen, no con el tamaño de visualización escalado por CSS.
Ejemplo de forma polígono (poly)
Usa shape="poly" para cualquier zona de clic no rectangular y no circular — un triángulo, una flecha, el contorno de un país. Lista los vértices en orden; el navegador traza líneas rectas entre puntos consecutivos y cierra el trazado volviendo al primer punto.
<!DOCTYPE html>
<html>
<head>
<title>Polygon image map</title>
</head>
<body>
<p>Click inside the triangle:</p>
<img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"
width="250" height="150" alt="Diagram" usemap="#shapemap" />
<map name="shapemap">
<!-- A triangle: top-center, bottom-left, bottom-right -->
<area shape="poly" coords="125,20,30,130,220,130"
alt="Triangle hotspot linking to the docs" href="https://www.w3docs.com/" />
</map>
</body>
</html>Los tres puntos (125,20), (30,130), (220,130) forman las esquinas del triángulo; no es necesario repetir el primer punto al final — la forma se cierra sola.
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| alt | texto | Especifica un texto alternativo para el área activa. |
| coords | x1,y1,x2,y2 | x,y,radius | x1,y1,...,xn,yn | Especifica las coordenadas del área activa en píxeles desde la esquina superior izquierda de la imagen. Los valores dependen de la forma: rect (esquinas superior izquierda e inferior derecha), circle (centro y radio), poly (vértices del polígono); omitir para default. |
| download | nombre_de_archivo | Indica que al hacer clic en un área específica, el archivo debe descargarse. |
| href | URL | Especifica la referencia para la transición. Omite href para dejar el área inactiva (sin enlace). |
| hreflang | código_de_idioma | Define el idioma del documento referenciado. Se usa únicamente con href. |
| nohref | (ninguno) | Obsoleto. Antes marcaba un área como sin enlace. Eliminado en HTML5 — en su lugar, simplemente omite el atributo href. |
| rel | alternate | author | bookmark | help | license | next | nofollow | noreferrer | prefetch | prev | search | tag | Establece un vínculo entre el documento actual y el documento enlazado. |
| shape | rect | circle | poly | default | Define la forma del área. default hace que el área cubra toda la imagen. |
| target | _blank | _self | _top | _parent | frame_name | Especifica cómo debe abrirse el documento enlazado. frame_name no está soportado en HTML5. |
| type | tipo_de_medio | Especifica el tipo MIME del documento enlazado. |
La etiqueta <area> también admite los Atributos Globales y los Atributos de Evento.
El valor shape="default"
shape="default" define un área sin coordenadas que cubre toda la imagen — cualquier parte no reclamada por un área rect, circle o poly más específica. Es útil como enlace de reserva o destino global de "haz clic en cualquier otro lugar".
<map name="catchall">
<area shape="circle" coords="125,75,40" alt="Center hotspot" href="/center">
<area shape="default" alt="Everywhere else" href="/elsewhere">
</map>Como las áreas más específicas que coinciden antes tienen prioridad, coloca default al final para que solo capture los clics que ninguna otra área gestione.
Accesibilidad
La accesibilidad es la preocupación práctica más importante en los mapas de imagen, porque la imagen en sí no contiene texto. Cada zona de clic es invisible para un lector de pantalla a menos que la etiquetes.
altes obligatorio en cada<area>. La especificación lo exige cuando el área tiene unhref. Hazlo significativo: debe describir adónde lleva el enlace (el destino o la acción del enlace), no la imagen. Por ejemploalt="Ver referencia CSS", noalt="círculo".- Navegación por teclado: los navegadores exponen cada
<area>como un enlace con foco, de modo que los usuarios pueden usarTabpara acceder a cada zona de clic y activarla conEnter. Esto solo funciona si cada área tiene tanto unhrefcomo unaltclaro — un área sinaltse anuncia como un enlace sin etiqueta, lo que supone una barrera seria. - La imagen también necesita su propio
alt. Establecealten el<img>para describir la imagen en su conjunto, de forma independiente a las etiquetas de enlace de cada área. - Para gráficos complejos con muchas regiones, considera si una lista de enlaces
<a>simples o un SVG en línea con enlaces focalizables serviría mejor a los usuarios de tecnologías de asistencia que los puntos de acceso en píxeles.
Limitación responsiva y móvil
Las coordenadas de <area> son valores de píxeles fijos vinculados al tamaño intrínseco de la imagen. No escalan. En el momento en que haces la imagen fluida — por ejemplo con width: 100% o max-width: 100% en CSS — la imagen visible cambia de tamaño pero los puntos de acceso permanecen anclados a la cuadrícula de píxeles original. Las regiones en las que se puede hacer clic se desvían entonces de lo que el usuario ve, y en pantallas móviles pequeñas pueden volverse diminutas y fáciles de pasar por alto.
El HTML simple no ofrece ninguna solución integrada para esto. En la práctica, o bien:
- Evitas los mapas de imagen para diseños responsivos y usas alternativas escalables — enlaces
<a>posicionados con CSS superpuestos, o un SVG en línea cuyos puntos de acceso<a>escalan con el diseño. - O recalculas las coordenadas con JavaScript cada vez que se redimensiona la imagen (una dependencia adicional que mantener).
Si tu diseño debe adaptarse a distintos tamaños de pantalla, prefiere SVG o enlaces posicionados sobre <area> desde el principio.