Elemento area en HTML

Elemento area en html

El elemento html area define una región en un mapa de imagen, y esa región puede (opcionalmente) asociarse con un super vínculo. Este elemento solo se puede utilizar dentro de un elemento <map>.

Para obtener un ejemplo completo del uso de elementos <area>, consulte la página de elementos <map>.

Etiqueta html area

Clasificaciones de contenidoElemento organizativo o elemento normal.
Contenido permitidoNo hay, es un elemento vacío.
AcrónimoLa etiqueta inicial debe estar presente y la etiqueta final debe omitirse.
Elementos del padrecualquier elemento que acepte contenido normal. Pero el elemento debe estar <area> dentro de un elemento, <map> pero no tiene que ser su padre directo.
Interfaz DOMOHTMLAreaElement

Características

En este elemento html area se pueden utilizar propiedades globales.

alt

Texto alternativo que aparecerá en los navegadores que no pueden mostrar imágenes. El texto debe ser suficiente para representar una elección clara para el usuario como si se mostrará la imagen.

Esta propiedad es necesaria en HTML 4 pero puede ser nula ( ""). Pero en HTML5 esta propiedad es necesaria si el href.

Ejemplo de uso de la propiedad alt con el elemento <area>:

< area  shape = "rect"  coords = "0,0,100,100"  href = "sun.html"  alt = "Sun" >

coords

Un conjunto de valores que especifican las coordenadas de un área.

El número y significado de los valores mencionados en esta propiedad varía según el valor de la propiedad shape:

  • Si el valor de la propiedad es shape igual a rect(rectángulo), entonces el valor de la propiedad coords debe ser dos pares de x, y. El primer par de coordenadas es para la esquina superior izquierda y el segundo par es para la esquina inferior derecha.
  • Si el valor de la propiedad shape es un circle (círculo), entonces el valor de la propiedad coords debe ser una forma x, y, r, donde x, y están las coordenadas del centro del círculo, que es su radio.
  • Si el valor de la propiedad shape es un polígono, entonces el valor de la propiedad coords debe ser una serie de pares de coordenadas x, y como, x1, y2, x2, y2, x3, y3 etc.

HTML 4 utilizado para permitir que los valores sean un píxel o un porcentaje ( %). Pero los valores en HTML5 siempre están en píxeles.

Ejemplo de un <area> en rectángulo y un círculo:

< area  shape = "rect"  coords = "0,0,82,126"  href = "sun.html"  alt = "Sun" > 
< area  shape = "circle"  coords = "90,58,3"  href = "mercur. html "  alt = " Mercurio " >

download

Esta característica, si existe, indica que el desarrollador ha colocado el enlace para descargar un recurso. Consulte la página del elemento para obtener una explicación detallada de la función download.

href

Esta propiedad especifica cuál es la URL de destino y el valor debe ser una URL válida. Esta propiedad o propiedad debería haber estado disponible nohrefen HTML 4, pero esto ha cambiado en HTML5 y es posible omitir esta propiedad si el elemento <area> no es un super vínculo.

hreflang

Esta propiedad se refiere al lenguaje (humano) del enlace al que se hace referencia en este elemento, y esta propiedad no tiene función pero se usa para organizar. Los valores permitidos para esta propiedad se definen en BCP47. Utilice esta función solo si está href disponible.

name

Defina un nombre para la región definida del elemento <area>, esta propiedad está en HTML 4 y está obsoleta.

media

Esta propiedad da una idea de cómo está diseñado el recurso indicado. Puede ser print( orientado a imprimir) o screen(es decir, orientado a pantallas electrónicas). 

Si no se especifica ningún valor para esta propiedad, su valor predeterminado es all. Utilice esta función solo si la función está href presente. Esta función es nueva en HTML5 y no existía antes.

nohref

Esta propiedad se utiliza para indicar que la región definida en el elemento <area> no representa un super vínculo. No está permitido combinar esta función con esta función href.

Nota: esta propiedad está obsoleta en HTML5, y todo lo que se necesita para declarar que el elemento no es un super vínculo es eliminar el href.

rel

Añadida en HTML5, esta propiedad define cuál es la relación del enlace referenciado con el documento actual y toma cualquier valor o valores válidos para definir la relación.

No hay una relación predeterminada si no se especifica ninguna relación a través de esta propiedad, y esta propiedad no se puede usar si no se usa la propiedad href.

shape

Esta propiedad determina con qué forma está asociado el elemento <area>. La especificación HTML5 permite utilizar los siguientes valores:

  • rect: para definir un rectángulo
  • circle: para definir un círculo
  • poly: para definir un polígono
  • default: para indicar el mapa completo.

Sin embargo, muchos navegadores admiten el uso de palabras reservadas circpolygonrectangle con esta característica.

target

Reservado Indica la ubicación predeterminada para mostrar el recurso de destino cuando hace que los enlaces vayan a otra página.

Las siguientes palabras reservadas tienen significados especiales:

  • ‎_self: Muestra el resultado de la ubicación de la página actual. Este es el valor predeterminado si no se especifica ningún otro valor.
  • _blank: Vea la página en una nueva ventana.
  • _parent: Page mostrará el lugar de la página padre a la que pertenece el iframe, y si no hubiera una página padre Vst Zlk este valor es el comportamiento del valor de la _self misma.
  • _top: el ancho de la página es un lugar en la parte superior de una página en la jerarquía. Es decir, la página que es la página principal directa o indirecta de la página actual y no tiene una página principal). Si no hubiera una página padre Vst Zlk este valor es el comportamiento del valor de la _self misma.

type

Este valor especifica el tipo MIME del enlace de destino, y este valor se proporciona para darle al navegador una idea del contenido. Esta propiedad está obsoleta en HTML5.

Formato predeterminado

La mayoría de los navegadores ocultan el elemento <area> estableciendo la propiedad display en none:

area {
  display: none;
}

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
SoportadoSoportadoSoportadoSoportadoSoportado