HTML semántico

Cuando desarrollamos sitios web normalmente no pensamos en usar etiquetas o herramientas que se salen del HTML que todo el mundo conoce. Pero lo que muchos no saben es que el HTML permite algunas cosas semánticas que habitualmente no se utilizan. También lo permite el XHTML, que fue el precursor de esto hace ya algún tiempo, aunque en este caso existen algunas reglas.

Antes de comenzar con lo que se podría hacer en un futuro en el HTML5, voy a poner un ejemplo en XHTML y a explicar brevemente su funcionamiento, ya que es algo distinto si comparamos la versión XHTML de la del HTML:

<ul role="navigation sitemap">
  <li href="/downloads/">Downloads</li>
  <li href="/docs/">Documentation</li>
  <li href="/news/">News</li>
</ul>

Como se puede ver, tampoco es que que haya mucho cambio… simplemente se incluye un atributo nuevo llamado role que permite una serie de parámetros. Y aquí llega lo interesante: la lista de parámetros es el secreto de la semántica, ya que es bastante extensa y permite hacer bastantes cosas.

Voy a destacar aquellos que me parecen más interesantes de cara a aplicaciones y a buscadores ya que, de cara al usuario esto no se verá nunca y no tiene aplicación. En resumen: esto está creado para las máquinas.

Los que habitualmente se usan como link rel=»algo»:

• bookmark: Indica que ese enlace contiene información extendida del contenido actual.
• cite: Indica que el contenido de destino es el origen de la cita actual.
• contents: indica dónde encontrar la tabla de contenidos.
• stylesheet: Indica la hoja de estilos que se ha de utilizar.

Los que podrían usarse dentro de contenedores (div y similares):

• banner: Indica que ese bloque de contenido tiene el nombre del sitio y la título principal.
• complementary: Indica que ese contenido no es el principal, pero lo complementa.
• contentinfo: Ofrece meta-información del contenido de la página.
• definition: Da la definición de una palabra o concepto.
• main: Es el contenido principal de la página.
• navigation: Indica que eso es la navegación principal de la página.
• note: Ese contenido es una anotación, acotación o nota del contenido principal.
• search: Indica que esa zona marca permite realizar búsquedas.

Para acabar, encontramos los elementos más especiales… en este caso habría que ver dónde ubicarlos (pueden ser contenedores o simples span):

• alert: Mensajes importante y normalmente limitados en tiempo.
• article: Sección de la página que forma parte del contenido principal pero que tiene significado independiente.
• heading: La cabecera de la una sección de la página.
• img: Una colección de imágenes que unidas formas una imagen única.
• log: Sección que indica una serie de información antigua en relación con el contenido principal.
• menubar: Menú, habitualmente horizontal, que suele estar siempre visible.
• region: Una sección grande de la página o del sitio que el autor cree lo suficientemente importante para ser incluida en un sumario.
• separator: Separador de secciones o de grupos de «menuitems».
• status: Contiene información interesante, pero no tan importante como un «alert».

La cuestión principal es que esto está pensado para el XHTML… pero, ¿se puede usar en HTML5? La respuesta es sí. Aunque hay que decir que normalmente las etiquetas ya llevan implícitos algunos roles… por ejemplo, un <h1> ya lleva implícito un «heading». O sea, que si se cumples las normas (no sobreeescribir lo que ya se da por implícito y no poner roles a cosas que no se permiten), debería funcionar. Un ejemplo:

<figure role="img" aria-labelledby="fish-caption">
  <pre>
 o           .'`/
     '      /  (
   O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     >< <
      `\  |_\      _.'  '. \
        '-._  _ .-'       '.)
            `\__\
  </pre>
  <figcaption id="fish-caption">
    Joan G. Stark, "fish".
    October 1997. ASCII on electrons. 28×8.
  </figcaption>
</figure>

Para tener esto en cuenta, es importante ver las anotaciones ARIA según lo que nos espera en HTML5, donde vienen detalladas las excepciones de las que os hablaba antes…

Sin duda, bastante interesante esto que aportan los roles, y su actuación sobre los buscadores, ya que ayudan a mejorar las búsquedas de aquellos contenidos que se encuentran en los roles más concretos y a los que se les da más importancia…