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…

4 comentarios en “HTML semántico”

  1. A ver si yo he entendido bien, quieres decir que, con el role podemos decir los elementos de un div es la navegación principal de la página usando el role=”navigation”.

    En html5 ya tenemos por ejemplo el elemento nav, no serían compatibles, no?? es decir, o marcamos el role o decimos que es un nav, cierto??

    Pero, realmente, que sería mas correcto??

    Por otro lado, he visto que hay muchos roles para muchas cosas, pero veo un problema en muchos de ellos. Imaginate que estamos trabajando con un CMS, y que los contenidos son mantenidos por personas no técnicas, tendrian estas personas que conocerse estos roles para que realmente fuera útil, no??

    Es decir, si un usuario quiere meter una cita en una noticia que está publicando, o sabe que existe el role=”cite” o no tenemos nada que hacer.

    Creo que este es el gran problemas de este tipo de etiquetas.

  2. Los tags tipo “nav” ya tienen ese “rl” predefinido… esto de ponerle “role” es para sobreescribir los existentes o ponerlo en tags que no lo tienen.

    Por ejemplo, el “dv” no tiene un rol definido… simplemente es un contenedor… si le pones role=”navigation” se convertiría en lo que en HTML5 es un “nav”…

  3. Hola Durky… ¿crees que todo esto del HTML semantico tiene (o tendrá pronto) una afectacion al SEO, sobre todo en temas de link juice o link sculpting?

    Es decir, que un link en “nav” valga menos que otro que esté en un “article”…

    Yo creo que sí, y que si no pasa ya, no tardaremos en verlo. Se podría hacer algun experimento…

    Un saludo!

Deja un comentario