<area> y sus Atributos en HTML5El elemento <area> en HTML5 es utilizado para definir zonas dentro de una imagen en un conjunto clickable de áreas, que en conjunto se conoce como un image map (mapa de imagen). Este elemento debe ser una hijo directo del elemento <map>. El elemento <area> no tiene contenido, es decir, es un elemento vacío que se cierra en sí mismo.
A continuación, se describen detalladamente los atributos del elemento <area>:
alt (Requerido para la accesibilidad):
alt="Descripción de la zona"coords:
shape.coords="x1,y1,x2,y2,..."shape:
rect (rectángulo)circle (círculo)poly (polígono)default (área predeterminada, generalmente toda la imagen)shape="rect"shape="circle"shape="poly"href:
href="http://ejemplo.com"target:
href._self (abre en la misma ventana/tab; valor predeterminado)_blank (abre en una nueva ventana/tab)_parent (abre en el frame padre)_top (abre en la ventana/tab superior)target="_blank"download:
downloadrel:
href.rel="noopener"hreflang:
hreflang="es"type:
type="text/html"<area> en HTML5: Ejemplos SencillosEl elemento <area> se usa en conjunto con el elemento <map>. Veamos algunos ejemplos para ilustrar su uso:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Image Map</title>
</head>
<body>
<img src="imagen.jpg" alt="Demo de Mapa de Imagen" usemap="#mapa-ejemplo">
<map name="mapa-ejemplo">
<area shape="rect" coords="34,44,270,350" alt="Sección Uno" href="http://ejemplo1.com">
<area shape="rect" coords="290,172,333,250" alt="Sección Dos" href="http://ejemplo2.com">
</map>
</body>
</html>En este ejemplo, se define una imagen con un mapa de imagen que contiene dos áreas rectangulares, cada una enlazando a una URL distinta. Las coordenadas indican la ubicación y tamaño de cada área en la imagen.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Image Map Complejo</title>
</head>
<body>
<img src="imagen.jpg" alt="Mapa de Imagen Complejo" usemap="#mapa-complejo">
<map name="mapa-complejo">
<area shape="circle" coords="200,200,50" alt="Centro" href="http://centro.com">
<area shape="poly" coords="50,50,75,150,100,100" alt="Triángulo" href="http://triangulo.com">
</map>
</body>
</html>En este ejemplo, se agregan áreas de forma circular y poligonal al mapa de la imagen. La primera área es un círculo que está centrado en (200, 200) con un radio de 50 píxeles. La segunda área es un triángulo definido por tres puntos.
Estos ejemplos demuestran cómo se puede utilizar el elemento <area> con distintos atributos y formas para crear áreas cliqueables en imágenes dentro de un sitio web.