Referencia de etiquetas

Etiqueta map en HTML: mapas de imagen y áreas

La etiqueta <map> define un mapa de imagen: relaciona zonas de una imagen con elementos <area>, que pueden funcionar como enlaces. Úsala, por ejemplo, para que la entrada y la zona de lectura de un plano del aula lleven a sus respectivas explicaciones. La imagen aporta el contexto visual; <map> reúne las regiones y <area> determina cada destino.

Ejemplo mínimo: una entrada enlazada

Descarga el plano del aula en SVG, un dibujo original de 600 × 300 píxeles, y guárdalo como plano-aula.svg junto a tu archivo HTML. Este fragmento va dentro de su <body>; el segundo ejemplo incluye el documento completo.

<img src="plano-aula.svg" width="600" height="300"
     alt="Plano del aula: entrada y zona de lectura"
     usemap="#plano">

<map name="plano">
  <area shape="rect" coords="10,10,150,100"
        href="#entrada" alt="Entrada del aula">
</map>

<h2 id="entrada">Entrada del aula</h2>
<p>Deja libre el acceso para que puedan pasar todas las personas.</p>

Al pulsar el rectángulo «Entrada», el navegador lleva a #entrada, un destino presente debajo de la imagen. La zona de lectura también aparece en el dibujo, pero todavía carece de enlace. Ni <map> ni <area> dibujan los rectángulos: estos forman parte del archivo SVG.

Cómo conectar img, map y area

usemap="#plano" pertenece a <img> y referencia el nombre del mapa. <map name="plano"> lleva ese nombre sin #. El mapa puede aparecer antes o después de la imagen en el mismo documento; en estos ejemplos queda a continuación para facilitar la lectura.

name es el atributo específico de <map>: debe estar presente, tener un valor no vacío, sin espacios ASCII, y no repetirse en otro mapa del mismo árbol del documento. id es global y opcional. Si lo añades, debe coincidir: <map name="plano" id="plano">. Estas reglas están definidas en el estándar de map. Un navegador puede resolver una referencia que solo encuentre id, pero el estándar de referencias internas declara ese caso un error de conformidad: para escribir HTML válido debes incluir name.

<map> necesita apertura y cierre y puede usarse donde se admite contenido de frase, por ejemplo en el cuerpo del documento o dentro de un párrafo. Su contenido es transparente: lo permitido depende del contexto que lo contiene. Esto no autoriza a introducir un encabezado dentro de un párrafo. Las áreas deben tener un <map> antecesor; colocarlas directamente dentro de él evita ambigüedades. <area> es un elemento vacío, sin etiqueta de cierre.

Elemento	Atributos usados y función
`<img>`	`src` carga el archivo; `width` y `height` indican dimensiones; `alt` describe el contexto; `usemap` conecta el mapa.
`<map>`	`name` identifica el conjunto de regiones; `id` y `class` son atributos globales.
`<area>`	`shape` define la forma, `coords` su posición, `href` el destino y `alt` el texto del enlace.

La propiedad CSS width cambia el tamaño mostrado; no es un atributo específico de <map>. La propiedad DOM map.areas permite consultar las áreas con JavaScript, pero no hace falta para crear estos enlaces.

Coordenadas sobre una imagen conocida

Para shape="rect", coords="10,10,150,100" describe dos esquinas: superior izquierda (10, 10) e inferior derecha (150, 100). El origen es la esquina superior izquierda de la imagen y las distancias se miden en píxeles CSS. El rectángulo mide 140 × 90; los dos primeros números deben ser menores que sus correspondientes valores finales. Consulta la guía de area para otras formas.

Las coordenadas no son porcentajes y no se ajustan automáticamente al reducir la imagen con CSS. El modelo de procesamiento de los mapas de imagen conserva las distancias indicadas. El ejemplo siguiente evita el desajuste manteniendo la imagen a 600 × 300 y permitiendo desplazamiento horizontal en pantallas pequeñas.

Caso práctico: dos zonas y enlaces equivalentes

Guarda este documento como aula.html en la misma carpeta que plano-aula.svg y ábrelo en el navegador. Funciona localmente y no necesita JavaScript ni un servicio de mapas.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Plano del aula</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1rem; line-height: 1.5; }
    .visor { overflow-x: auto; border: 1px solid #526274; }
    .visor img { display: block; width: 600px; height: 300px; max-width: none; }
    .visor:focus-visible, a:focus-visible { outline: 3px solid #154dbc; outline-offset: 3px; }
  </style>
</head>
<body>
  <h1>Conoce el aula</h1>
  <p>Elige una zona del plano o utiliza los enlaces de texto.
     Si el plano no cabe, enfoca su región y desplázala horizontalmente.</p>

  <div class="visor" role="region" aria-label="Plano del aula, desplazamiento horizontal"
       tabindex="0">
    <img src="plano-aula.svg" width="600" height="300"
         alt="Plano del aula: entrada a la izquierda y zona de lectura a la derecha"
         usemap="#plano-aula">
    <map name="plano-aula" id="plano-aula">
      <area shape="rect" coords="10,10,150,100"
            href="#entrada" alt="Entrada del aula">
      <area shape="rect" coords="330,30,570,250"
            href="#lectura" alt="Zona de lectura">
    </map>
  </div>

  <ul>
    <li><a href="#entrada">Entrada del aula</a></li>
    <li><a href="#lectura">Zona de lectura</a></li>
  </ul>

  <h2 id="entrada">Entrada del aula</h2>
  <p>Mantén libre el acceso y consulta aquí las indicaciones de llegada.</p>
  <h2 id="lectura">Zona de lectura</h2>
  <p>Este espacio contiene libros para consultar y mesas para leer.</p>
</body>
</html>

Las dos regiones conducen a sus explicaciones. La lista permite llegar a los mismos destinos aunque el plano no cargue. El alt de la imagen presenta el conjunto; cada alt de área enlazada identifica una elección, como explica el tutorial de mapas accesibles de WAI. El rótulo y tabindex de la región permiten identificarla y enfocarla para desplazarla; no cambian la semántica de los enlaces.

Para comprobar el ejemplo:

Pulsa ambas zonas con el ratón y verifica el fragmento de la dirección. Pulsa fuera de los rectángulos: no debe activarse ningún destino.
Recorre la página con Tab y activa cada enlace con Enter. En una ventana estrecha, enfoca el visor y usa las flechas horizontales; comprueba también la lista sin tocar el plano.
Desactiva JavaScript: los enlaces conservan su función. Renombra temporalmente el SVG para provocar un fallo de carga y utiliza los enlaces de texto.
Cambia el CSS de la imagen a width: 300px; height: 150px. El dibujo se reduce, pero las zonas ya no coinciden. Para esta escala concreta, divide todas las coordenadas entre dos; después restaura el tamaño original para continuar.

Si retiras <map> con sus áreas o eliminas usemap, la imagen permanece y pierde los enlaces de sus zonas; la lista sigue funcionando. Cambiar href modifica el destino, mientras que modificar coords desplaza la región activa sin alterar el dibujo.

Errores frecuentes y preguntas

¿Usemap apunta a name o id? A name. Ante un mapa que no funciona, revisa primero usemap="#plano-aula", el nombre sin #, las diferencias de mayúsculas y la presencia de las áreas dentro del mapa. Después confirma que la imagen carga y que las coordenadas corresponden al tamaño mostrado.

¿Es adaptable al cambiar de tamaño? Hace falta controlar la relación entre dimensiones y coordenadas. Puedes mantener el tamaño con desplazamiento, como aquí, recalcular cada región al escalar o elegir una alternativa. Una regla global como img { max-width: 100%; } puede reducir el dibujo sin corregir sus áreas. Si hay recorte, el cálculo también debe contemplarlo.

No omitas el alt de un área enlazada ni uses únicamente «zona azul» para identificarla. No esperes que <map> proporcione calles, geolocalización, zoom o rutas: define regiones sobre una imagen que tú aportas.

Si todo el dibujo lleva al mismo destino, suele bastar un enlace con a alrededor de la imagen sin usemap. Para una navegación que no depende de posiciones, una lista de enlaces es más fácil de mantener. La guía de img explica la imagen y su alternativa textual; <map> organiza las zonas, sin sustituir esas funciones.

Compatibilidad y fuentes

El uso básico de <map> tiene soporte establecido en los navegadores actuales, según la referencia de MDN sobre map, consultada el 3 de octubre de 2026. Esto no garantiza una experiencia idéntica de foco o lectura asistida en todas las combinaciones de navegador y lector de pantalla: prueba los dispositivos de destino y conserva los enlaces equivalentes.

Para las reglas de las regiones y sus textos, consulta también el estándar de area y la referencia de area en MDN. Las fuentes normativas fijan la sintaxis; los ejemplos anteriores permiten comprobar el tamaño, los destinos y la interacción de este plano concreto.