Hoy vamos a hablar de la etiqueta <area> de HTML, una etiqueta que mola mucho ya que puedes utilizarla para hacer cosas muy chulas (o por lo menos a mi me lo parecen).
Por ejemplo, puedes hacer un mapa o una imagen interactiva.
Y ya deberías saber que todo lo que sea interactivo, mola.
Por cierto, recuerda qye este post forma parte de la serie del diccionario de DropCoding, donde aprendemos este lenguaje desde cero.
¡Y ahora, vamos al lío!
¿Qué es la etiqueta AREA en HTML?
La etiqueta <area> en HTML se utiliza para definir áreas específicas en una imagen donde los usuarios pueden seleccionar o hacer clic.
Por ejemplo, puedes crear diferentes secciones o diferentes áreas en una imagen y cuando el usuario haga clic, se dirigido al enlace que hayamos elegido.
La etiqueta <area> siempre se utiliza dentro de la etiqueta <map> y este mapa se enlaza a través del atributo usemap de una imagen.
EJEMPLO de etiqueta AREA
Supongamos que tenemos una imagen con varios elementos y queremos hacer que sean clicables. Entonces, dentro del elemento <map>, le especificaríamos todas las áreas que queremos hacer.
Le vamos a indicar que cree un área y en shape le vamos a poner la forma que ha de tener esta área.
<img src="imagen.jpg" usemap="#mapa">
<map name="mapa">
<area shape="rect" coords="50,50,100,100" href="enlace.html" alt="Enlace">
</map>
Por ejemplo, en este caso rect viene de rectángulo, que sería un ángulo de toda la vida para hacer cualquier forma cuadrada. Entonces, como es una forma cuadrada, necesitamos dos tipos de coordenadas o mejor dicho, necesitamos dos conjuntos de coordenadas.
Cómo se utiliza la Etiqueta AREA (circle)
En el caso de un área que es un círculo, en el atributo shape tenemos el valor de circle. Esto es para formas que sean redondas.
Y en este caso, las coordenadas funcionan de una forma similar pero al tratarse de un círculo, aquí le vamos a poner el centro de la circunferencia y luego vamos a indicar el ancho del radio.
<img src="imagen.jpg" usemap="#mapa">
<map name="mapa">
<area shape="circle" coords="75,75,50" href="enlace.html" alt="Enlace">
</map>
Conclusión sobre la etiqueta AREA
La etiqueta <area> puede ser muy útil en algunos casos para hacer un mapa interactivo o una imagen interactiva, pero no es una práctica común en diseños web ya que no funciona muy bien en dispositivos móviles.
Es decir, a la hora de adaptar este tipo de diseños o de funcionalidades a pantallas más pequeñas para dispositivos más pequeños, no se adapta correctamente y podemos tener problemas de accesibilidad en este tipo de elementos.
Recuerda que si tienes alguna duda o sugerencia, puedes dejarla en los comentarios.
¡Nos vemos en la próxima lección! ¡Adiós!