HTML Semántico

Más allá del DIV y el SPAN

Cuando estamos haciendo una web o un componente tendemos a no pensar si lo que estamos mostrando es uno u otro tipo de etiqueta y solemos tirar de los socorridos div y span, sin estilo determinado (cómodo) pero sin semántica asociada (que no está necesariamente mal).

Pero tenemos muchas más opciones.

Tabla periódica

Aria roles

Los roles ARIA proporcionan un significado semántico al contenido, lo que permite a los lectores de pantalla y otras herramientas presentar y apoyar la interacción con el objeto de una manera que es coherente con las expectativas del usuario de ese tipo de objeto.

Los roles ARIA pueden utilizarse para describir elementos que no existen de forma nativa en HTML o que existen pero aún no son totalmente compatibles con el navegador.

Por ejemplo, <ul role="tabpanel"> será leído como un "panel de pestañas" por los lectores de pantalla. Sin embargo, si realmente no se va a utilizar de esta manera, estaremos dando información no válida, con lo que hay que usarlo sólo cuando es necesario e intentar añadir etiquetas semánticas en la medida de lo posible.

<a href="#" role="button">Submit</a> no tendría mucho sentido.

Microdata

Podemos darle muchísima más información semántica si utilizamos microdata semántico. El estándar es Schema.org

Se puede añadir como un objeto JSON o bien en el HTML. Como este es un curso de HTML, vamos a ver cómo hacerlo en el propio código.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "Noticia de interés",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
    ],
  "datePublished": "2022-02-05T08:00:00+08:00",
  "dateModified": "2022-08-05T09:20:00+08:00",
  "author": [{
      "@type": "Person",
      "name": "Jane Doe",
      "url": "https://example.com/profile/janedoe123"
    },{
      "@type": "Person",
      "name": "John Doe",
      "url": "https://example.com/profile/johndoe123"
  }]
}
</script>