Curso HTML 10.6 Microdatos y atributos globales (lang, dir, title)

10.6 Microdatos y atributos globales (lang, dir, title)

1. Introducción a los microdatos

Los microdatos son un mecanismo de HTML5 para marcar contenido semántico directamente en los elementos HTML, de modo que máquinas (buscadores, asistentes, sistemas de IA) comprendan mejor su significado. Se definen mediante tres atributos principales:

• itemscope: define el inicio de un objeto o “item”.
• itemtype: especifica la URL del vocabulario (por ejemplo, schema.org).
• itemprop: identifica las propiedades de ese objeto.

2. Uso básico de microdatos

Ejemplo: un bloque de información sobre un libro con título, autor y precio:

<article itemscope itemtype='http://schema.org/Book'>
  <h2 itemprop='name'>El Quijote</h2>
  <p>Escrito por 
    <span itemprop='author' itemscope itemtype='http://schema.org/Person'>
      <span itemprop='name'>Miguel de Cervantes</span>
    </span>
  </p>
  <p>Precio: <span itemprop='price'>19.99 EUR</span></p>
</article>
  

Comentarios:

• El atributo itemscope envuelve todo el objeto Book.
• itemtype apunta a la definición de Book en schema.org.
• Cada elemento con itemprop define una propiedad legible por máquinas.

3. Profundizando: itemref y itemid

Para separar propiedades en distintas partes del DOM:

<div itemscope itemtype='http://schema.org/Product' itemid='#producto123' itemref='p1 p2'>
  <h3 itemprop='name'>Cámara réflex</h3>
  <meta itemprop='sku' content='CAM12345' />
</div>

<div id='p1'>
  <p>Descripción: <span itemprop='description'>Alta resolución, objetivo 18-55mm.</span></p>
</div>
<div id='p2'>
  <p>Stock: <span itemprop='availability'>En tienda</span></p>
</div>
  

Explicación:

• itemid asigna una URI única al objeto.
• itemref referencia elementos externos por su id.

4. Ventajas y buenas prácticas

• Mejora de snippets enriquecidos en buscadores (rich snippets).
• Mantenimiento de vocabularios estándares (schema.org, Open Graph, Microformatos).
• Evitar sobrecargar de microdatos elementos puramente decorativos.
• Validar con la herramienta de pruebas de datos estructurados de Google.

5. Atributos globales: lang, dir y title

Los atributos globales pueden añadirse a cualquier elemento HTML:

5.1 Atributo lang

Se hereda de ancestros si no está presente. Importante para correctores ortográficos, lectores de pantalla y buscadores.

<html lang='es'>
  <h2>Bienvenido</h2>
  <p lang='en'>This paragraph is in English.</p>
</html>
  

• Uso de subtags: es-ES vs es-MX.
• Para documentos multilingües, indicar lang en cada sección.

5.2 Atributo dir

Controla la dirección del flujo de texto. Fundamental en idiomas como árabe o hebreo (rtl).

<p dir='rtl'>שלום, עולם!</p>
<p dir='auto'>مرحبا Hello 123</p>
  

• ltr (left-to-right), rtl (right-to-left).
• auto detecta la dirección basada en el primer carácter fuerte.
• Hereda a elementos hijos, a menos que se sobrescriba.

5.3 Atributo title

Ofrece una descripción breve que aparece como “tooltip” en navegadores.

<abbr title='Organización de las Naciones Unidas'>ONU</abbr>
<button title='Enviar formulario de contacto'>Enviar</button>
  

• Útil para acrónimos, iconos sin texto y enlaces con significado no explícito.
• No sustituye a un texto accesible; siempre combinar con aria-label si es necesario.

6. Combinando todo en un ejemplo completo

A continuación, un artículo de noticias con microdatos y atributos globales:

<article itemscope itemtype='http://schema.org/NewsArticle' lang='es' dir='ltr'>
  <header>
    <h2 itemprop='headline'>Descubren nueva especie marina</h2>
    <p>Publicado el: 
      <time itemprop='datePublished' datetime='2024-06-01'>1 de junio de 2024</time>
    </p>
  </header>
  <figure>
    <img src='especie.jpg' alt='Ejemplar de la nueva especie' itemprop='image' title='Foto de un ejemplar descubierto' />
    <figcaption itemprop='description'>La criatura mide 2 cm y vive en aguas profundas.</figcaption>
  </figure>
  <section itemprop='articleBody'>
    <p>Investigadores hallaron...</p>
    <p>El ejemplar, llamado 
      <span itemprop='name'>Marina novus</span>, pertenece al género 
      <span itemprop='genre'>Moluscos</span>.</p>
  </section>
  <footer>
    <p>Autor: 
      <span itemprop='author' itemscope itemtype='http://schema.org/Person'>
        <span itemprop='name'>Dr. Ana Pérez</span>
      </span>
    </p>
  </footer>
</article>
  

Este bloque conjuga vocabulario semántico, idioma, dirección de texto y tooltips descriptivos, optimizando la accesibilidad y el SEO.