Esta etiqueta <area> se utiliza en un documento HTML para asignar una parte de una imagen para que el usuario final pueda hacer clic en ella. Se utiliza para dirigir al usuario a diferentes enlaces después de que el usuario haga clic en las partes asignadas de la imagen. Se utiliza como una etiqueta secundaria de la etiqueta <map> . No tiene una etiqueta de cierre y, por lo tanto, es una etiqueta vacía para HTML, pero en el caso de XHTML, debe cerrarla correctamente. HTML5 tiene algunos atributos nuevos.
Sintaxis:
<area>
Atributos: esta etiqueta acepta muchos atributos como se describe a continuación.
- forma : la forma que se va a mapear en la imagen puede ser un «rect», un «círculo» o un «poli».
- coords : Las coordenadas de la forma.
- href : Thehref es el enlace al que se dirigirá al usuario después de hacer clic en la parte asignada de la imagen.
- alt : texto alternativo para un área en la que se puede hacer clic en un mapa de imagen.
- descargar : destino de descarga cuando se hace clic en el hipervínculo.
- target : Contexto en el que abrir el recurso de enlace.
- hreflang : idioma de la URL de destino.
- medios : URL optimizada para medios o dispositivos.
- rel : Relación entre URL y documento.
- type : Tipo de medio de URL
Ejemplo: La etiqueta <area> en html.
html
<!DOCTYPE html> <html> <body> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png" alt="" width="300" height="119" class="aligncenter size-medium wp-image-910965" usemap="#shapemap" /> <map name="shapemap"> <!-- area tag contained image. --> <area shape="poly" coords="59,31,28,83,91,83" href= "https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png" alt="Triangle"> <area shape="circle" coords="155,56,26" href= "https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png" alt="Circle"> <area shape="rect" coords="224,30,276,82" href= "https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png" alt="Square"> </map> </body> </html>
Producción:
- Antes de hacer clic en un área específica en la que se puede hacer clic
- Después de hacer clic en el área específica en la que se puede hacer clic
Nota: Esta etiqueta <area> siempre está anidada en la etiqueta <map>.
Navegadores compatibles:
- Google Chrome
- Borde 12 y superior
- explorador de Internet
- Mozilla Firefox 1 y superior
- Ópera
- Safari