HTML5: microdatos

Los microdatos son una forma estandarizada de proporcionar semántica adicional en sus páginas web.

Los microdatos le permiten definir sus propios elementos personalizados y comenzar a incorporar propiedades personalizadas en sus páginas web. En un nivel alto, los microdatos consisten en un grupo de pares nombre-valor.

Los grupos se llaman items, y cada par nombre-valor es un property. Los elementos y las propiedades están representados por elementos regulares.

Ejemplo

Para crear un artículo, el itemscope se utiliza el atributo.
Para agregar una propiedad a un elemento, el itemprop El atributo se utiliza en uno de los descendientes del elemento.

Aquí hay dos elementos, cada uno de los cuales tiene la propiedad "nombre":

<html>
   <body>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>
      
   </body>
</html>

Producirá el siguiente resultado:

Las propiedades generalmente tienen valores que son cadenas, pero pueden tener los siguientes tipos de datos:

Atributos globales

Los microdatos presentan cinco atributos globales que estarían disponibles para que cualquier elemento los use y dan contexto a las máquinas sobre sus datos.

No Señor.	Atributo y descripción
1	itemscope Esto se usa para crear un artículo. El atributo itemscope es un atributo booleano que indica que hay microdatos en esta página y aquí es donde comienza.
2	itemtype Este atributo es una URL válida que define el artículo y proporciona el contexto para las propiedades.
3	itemid Este atributo es un identificador global del artículo.
4	itemprop Este atributo define una propiedad del artículo.
5	itemref Este atributo proporciona una lista de elementos adicionales para rastrear para encontrar los pares nombre-valor del elemento.

Propiedades de tipos de datos

Las propiedades generalmente tienen valores que son cadenas como se mencionó en el ejemplo anterior, pero también pueden tener valores que son URL. El siguiente ejemplo tiene una propiedad, "imagen", cuyo valor es una URL:

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>

Las propiedades también pueden tener valores que son fechas, horas o fechas y horas. Esto se logra utilizando eltime elemento y su datetime atributo.

<html>
   <body>
      
      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>
      
   </body>
</html>

Producirá el siguiente resultado:

Las propiedades también pueden ser grupos de pares nombre-valor, colocando el atributo itemscope en el elemento que declara la propiedad.

Soporte de API de microdatos

Si un navegador admite la API de microdatos HTML5, habrá una función getItems () en el objeto de documento global. Si el navegador no admite microdatos, la función getItems () no estará definida.

function supports_microdata_api() {
   return !!document.getItems;
}

Modernizr aún no admite la verificación de la API de microdatos, por lo que deberá usar la función como la que se enumera anteriormente.

El estándar de microdatos HTML5 incluye tanto marcado HTML (principalmente para motores de búsqueda) como un conjunto de funciones DOM (principalmente para navegadores).

Puede incluir marcado de microdatos en sus páginas web y los motores de búsqueda que no comprendan los atributos de microdatos simplemente los ignorarán. Pero si necesita acceder o manipular microdatos a través del DOM, deberá verificar si el navegador es compatible con la API DOM de microdatos.

Definición de vocabulario de microdatos

Para definir el vocabulario de microdatos, necesita una URL de espacio de nombres que apunte a una página web que funcione. Por ejemplo, https://data-vocabulary.org/Person se puede utilizar como espacio de nombres para un vocabulario de microdatos personal con las siguientes propiedades nombradas:

name - Nombre de la persona como una cadena simple
Photo - Una URL a una imagen de la persona.
URL - Un sitio web que pertenece a la persona.

El uso de microdatos sobre propiedades de una persona podría ser el siguiente:

<html>
   <body>
   
      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>
         
            <p>
               <img itemprop = "photo" 
                  src = "http://www.tutorialspoint.com/green/images/logo.png">
            </p>
            
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
      
   </body>
</html>

Producirá el siguiente resultado:

Google admite microdatos como parte de su programa Rich Snippets. Cuando el rastreador web de Google analiza su página y encuentra propiedades de microdatos que se ajustan al vocabulario http://datavocabulary.org/Person, analiza esas propiedades y las almacena junto con el resto de los datos de la página.

Puede probar el ejemplo anterior con la herramienta de prueba Rich Snippets usando http://www.tutorialspoint.com/html5/microdata.htm

Para un mayor desarrollo de los microdatos, siempre puede consultar los microdatos de HTML5 .