Ir al contenido

Microdata para una geolocalización con HTML5

Seguimos con más ejemplos sobre microdata en HTML5 para aprender a definir nuevas entidades semánticas dentro de nuestros documentos HTML5.

En este caso vamos a ver cómo definir un microdata para una geolocalización. Algo muy útil cuando estemos trabajando con mapas - seguro que ya has probado todos nuestros ejemplos del API de Google Maps -.

Lo que tenemos que saber es que una geolocalización se define por una latitud y una longitud. Por ejemplo, la ciudad de Ávila está en la latitud 40.65599461 y la longitud -4.69373720.

Para ello, Schema.org nos define la entidad GeoCoordinates en http://schema.org/GeoCoordinates.

Así, que lo primero que tenemos para hacer es definir el ámbito de nuestra entidad mediante el atributo itemscope e indicar dónde está definida la entidad mediante el atributo itemtype.

<div itemscope itemtype="[http://schema.org/GeoCoordinates](http://schema.org/GeoCoordinates)">
</div>

Dentro de la entidad GeoCoordinates tenemos principalmente los atributos:

  • latitude, para especificar la latitud.
  • longitude, para especificar la longitud.

Así que asignaremos dichos nombres mediante los atributos itemprop. En este caso volvemos a utilizar un elemento span para dar la información.

<div itemscope itemtype="[http://schema.org/GeoCoordinates](http://schema.org/GeoCoordinates)">
<span itemprop="latitude">40.65599461</span>
<span itemprop="longitude">-4.69373720</span>
</div>

De una forma sencilla hemos dotado de semántica a la información de geolocalización de nuestra página HTML5.

Foto de Víctor Cuervo

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Descarga el código de Microdata para una geolocalización con HTML5

Aprende a utilizar microdata para una geolocalización efectiva en HTML5 y mejora la semántica de tu página, facilitando así su integración con mapas y servicios.

Descargar código