Etiqueta HTML <area>
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 realiza una determinada acción, por ejemplo, cambiar a una página con información detallada.
La etiqueta <area> siempre se coloca dentro de la etiqueta <map>. Las áreas activas pueden superponerse, en cuyo caso el área que aparece más tarde en el orden del DOM se activa al hacer clic.
Sintaxis
La etiqueta <area> es vacía, lo que significa que no se requiere la etiqueta de cierre. Pero 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="https://es.w3docs.com/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="https://es.w3docs.com/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
<area shape="circle" coords="218,115,25" alt="css" href="https://es.w3docs.com/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
<area shape="circle" coords="195,32,28" alt="php" href="https://es.w3docs.com/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>Atributos
| Attribute | Value | Description |
|---|---|---|
| alt | text | 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. Los valores dependen de la forma: rect (esquinas superior izquierda e inferior derecha), circle (centro y radio) o poly (vértices del polígono). |
| download | filename | Indica que al hacer clic en un área específica, el archivo debe descargarse. |
| href | URL | Especifica la referencia para la transición. |
| hreflang | language_code | Define el idioma del documento referenciado. Se usa solo con href. |
| nohref | (none) | Especifica un área que no contiene una referencia. No es compatible con HTML5. |
| rel | alternate | author | bookmark | help | license | next | nofollow | noreferrer | prefetch | prev | search | tag | Establece un enlace entre el documento actual y los documentos enlazados. |
| shape | rect | circle | poly | Define la forma del área. |
| target | _blank | _self | _top | _parent | frame_name | Especifica cómo se debe abrir el documento enlazado. frame_name no es compatible con HTML5. |
| type | media_type | Especifica el tipo MIME del documento enlazado. |
La etiqueta <area> también admite los atributos globales y los atributos de eventos.
Práctica
¿Cuál es el propósito de la etiqueta HTML area y cuáles son sus atributos?