Como anteriormente, hoy vamos a seguir hablando sobre la web semántica en la nueva especificación del lenguaje HTML. Si ya hemos hablado sobre elementos estructurales y los microformatos y algunos nuevos elementos de texto, hoy vamos a profundizar aún más en las diferentes categorías de contenido que se especifican en HTML5.

Modelos de Contenido

En versiones anteriores de la especificación, los elementos se dividían en dos categorías: inline y block. En la nueva especificación del lenguaje, se usa una jerarquía mucho más amplia dividiéndose estos en un mayor número de categorías

Los elementos inline ahora tienen un modelo de contenido llamado "text-level semantics" o semántica a nivel de texto en la lengua del imperio. Muchos de los antiguos elementos block se encuentran ahora bajo la denominación de "grouping content" o contenidos de agrupación. Estos son las listas, los divs y los párrafos entre otros.

Los formularios cuentan con su propio modelo de contenidos. Los elementos img, audio, video y canvas pertenecen a la categoría "embedded content" o contenido empotrado --no contenido embebido, no seáis bestias hombre--.

Los nuevos elementos estructurales forman un nuevo modelo de contenido denominado "sectioning content" o contenido de sección.

Contenido de Sección

Podemos definir un esquema de documento HTML utilizando los elementos h1 a h6:

Genbeta Dev
Editores
Sigue todos los posts de nuestros editores en Genbeta Dev
 

  

     
   
Txema Rodriguez
Apasionado por la tecnología trabaja en Madrid...
Jorge Ruvira
Ingeniero Técnico de informática de sistemas por la...
Carlos Paramio
Tiene 33 años y vive en la ciudad de Algeciras Cádiz...
Los editores son todos unos frikis del quince

Esto genera la siguiente esquema:

Genbeta Dev
 |_ Editores
      |_ Txema Rodriguez
      |_ Jorge Ruvira
      |_ Carlos PAramio

Esto funciona bien, todo contenido que aparece después de un elemento hX está asociado a dicho elemento. Pero, ¿que pasa con el elemento small?. Debe ser asociado con todo el documento, pero el navegador no tiene forma de saber eso. No existe una manera de definir que el elemento small debe asociarse al documento completo y no al encabezado "Carlos Paramio".

El nuevo contenido de sección de HTML5 nos ofrece la posibilidad explícita de marcar donde empieza y donde acaba un contenido específico:

Genbeta Dev

    
Editores
    
Sigue todos los posts de nuestros editores en Genbeta Dev
    
Txema Rodriguez
    
Apasionado por la tecnología trabaja en Madrid...
    
Jorge Ruvira
    
Ingeniero Técnico de informática de sistemas por la...
    
Carlos Paramio
    
Tiene 33 años y vive en la ciudad de Algeciras Cádiz...

Los editores son todos unos frikis del quince

Ahora está claro que el elemento small pertenece al encabezado "Genbeta Dev" y no a "Carlos Paramio". Podemos ser mucho más semánticos si queremos:

Como puedes apreciar, el contenido de sección nos ofrece muchas más posibilidades de lo que nunca antes había sido posible en HTML. Además, en HTML5 cada trozo de contenido de sección dispone de su propio esquema autónomo lo que significa que podemos utilizar siempre un encabezado de tipo h1 sin preocuparnos de en que nivel de encabezado nos encontramos:

En versiones anteriores de la especificación esto hubiera producido un esquema de documento HTML impreciso:

Genbeta Dev
Autores
Txema Rodriguez
Jorge Ruvira
Carlos Paramio

Sin embargo en HTML5 el esquema es completamente preciso:

Genbeta Dev
  |_ Autores
       |_ Txema Rodriguez
       |_ Jorge Ruvira
       |_ Carlos Paramio

hgroup

En ocasiones querremos utilizar un elemento de titulo o cabecera pero no querremos que altere el esquema del documento. Para ello podemos usar el elemento hgroup que sirve precisamente para eso:

    
Genbeta Dev
    
Pasión por el Software

En este caso el h2 es un slogan del primer h1 y no se tiene en cuenta para el esquema del documento. Dento de un elemento hgroup, solo el primer encabezado contribuye a construir el esquema del documento y no tiene por qué ser necesariamente un h1 puede ser cualquier otro nivel.

Los elementos fieldset, blockquote y td no son tenidos en cuenta para nada en el algoritmo de esquematizado del documento. Por ello, estos elementos son llamados "sectioning roots" y puede decirse que son invisible o inocuos al esquema del documento.

Conclusión

Los cambios introducidos por la nueva especificación del lenguaje proveen a los diseñadores y diseñadoras de una poderosa herramienta con la que comenzar a escribir documentos web más lógicos y semánticos. Está en nuestras manos el utilizar dichas herramientas de forma inteligente para crear contenido de calidad y mejorar la forma en la que escribimos y entendemos la web.

Con esta introducción a la web semántica en HTML5 III damos por finalizada la serie Introducción a HTML5. Seguiremos con la serie Introducción a CSS3 y publicaremos por supuesto artículos más específicos y avanzados sobre HTML5 y las nuevas posibilidades que ofrece.

En Genbeta Dev | Introducción a HTML5, Introducción a CSS3