Los nuevos elementos estructurales de HTML5

Chris Mills, Bruce Lawson. 21 de diciembre de 2010. Publicado en: wsc, html5, article, section, elementos, cross browser, ie fix, web abierta

Introducción

HTML5 pone dos cosas nuevas sobre la mesa: APIs nuevas que añaden nuevas características esenciales para el modelo de desarrollo web con estándares abiertos y nuevos elementos estructurales que definen características específicas para páginas web con una semántica mucho más precisa que la disponible en HTML 4. Encontrarás más artículos que cubren muchas de las nuevas APIs buscando los artículos de Dev.Opera marcados con la etiqueta HTML5.

Este artículo, por su parte, se centra en el segundo punto: veremos brevemente cómo se han elegido los nuevos elementos semánticos, cuáles son las principales novedades y cómo utilizarlos, cómo funcionan los encabezamientos de HTML5 y el soporte de los navegadores para estos nuevos elementos, incluyendo cómo puede añadirse soporte a navegadores antiguos.

Presentando los elementos estructurales de HTML5

HTML 4 ya tiene un montón de elementos semánticos que permiten definir con claridad las diferentes partes de una página web, como formularios, listas, párrafos, tablas, etc. Pero tiene sus deficiencias. Todavía dependemos mucho de elementos <div> y <span> con diferentes identificadores y atributos de clase para definir varias características, tales como menús de navegación, encabezados, pies de página, contenido principal, cajas de alerta, barras laterales, etc. Algo como <div id="cabecera"> funciona si nos referimos a que desarrolladores y diseñadores saben para qué sirve y son capaces de usar CSS y JavaScript para aplicar estilos y comportamiento personalizados para hacer que esto resulte comprensible para los usuarios finales.

Pero podría ser mucho mejor. Todavía hay problemas con esta manera de trabajar:

• Las personas podemos diferenciar los contenidos, pero las máquinas no: el navegador no ve los diferentes divs como cabecera, pie de página, etc. Los ve como divs diferentes. ¿No sería más útil si los navegadores y lectores de pantalla fuesen capaces de identificar explícitamente, pongamos por caso, el menú de navegación para que un usuario con discapacidad visual pueda encontrarlo más fácilmente, o las diferentes entradas de un blog para que pudieran ser fácilmente sindicadas en un canal RSS sin necesidad de programación adicional?

• Incluso si se usa código adicional para resolver algunos de estos problemas, sólo puede hacerse de forma fiable para los sitios web propios, puesto que desarrolladores web diferentes usan nombres de clase e identificadores diferentes, especialmente si tenemos en cuenta una audiencia internacional: diferentes desarrolladores web de países diferentes utilizan idiomas diferentes para escribir sus nombres de clase e identificadores

Por tanto, tiene mucho sentido definir un conjunto consistente de elementos para que todos podamos utilizar para esos bloques estructurales comunes que aparecen en tantos sitios web. Los elementos de HTML5 nuevos que vamos a cubrir en este artículo son:

• <header> (cabecera): Se utiliza para contener la cabecera de un sitio.

• <footer> (pie de página): Contiene el pie de página de un sitio.

• <nav>: Contiene la funcionalidad de navegación para la página.

• <article> (artículo): Contiene una pieza independiente de contenido, que tendría sentido sindicar como elemento RSS como, por ejemplo, una noticia.

• <section> (sección): Se utiliza bien para agrupar artículos en diferentes temas, bien para definir las diferentes secciones de un solo artículo.

• <time> (hora): se usa para marcar tiempos y fechas.

• <aside> (aparte): Define un bloque de contenido relacionado con el contenido principal que lo rodea, pero que no es esencial para el flujo del mismo.

• <hgroup> (heading group, o grupo de encabezados): Se utiliza para incluir más de un encabezado si quieres que cuente como un único encabezado en la estructura de encabezado de la página.

• <figure> y <figcaption> (figura y cita de figura): Se usan para encapsular una figura como un único elemento y contener el título de la figura, respectivamente.

¿Cómo se decidieron los nombres de los elementos?

Durante la creación de HTML5, el editor, Ian Hickson, usó las herramientas de Google para extraer datos de más de mil millones de páginas web, repasando los ID y nombres de clase más comúnmente utilizados en el mundo real en la web. Puede verse una de esas encuestas publicada en Google Code: Web Authoring Statistics: Classes. Para resumir una larga historia, los nombres de elementos que veremos en este artículo se tomaron de los 20 identificadores y nombres de clase más populares encontrados en las investigaciones de Hickson.

¿Por qué no hay un elemento <content>?

Si bien esta puede parecer una omisión flagrante, en realidad no lo es. El contenido principal será el bloque de nivel más alto de contenido diferente de <header>, <nav> o <footer> y, dependiendo de las circunstancias particulares, podría tener más sentido para marcar el contenido usando un <article> , un <section>, o incluso un <div>. Bruce Lawson llama a esto "El algoritmo Scooby Doo", pero para saber por qué, tendrás que preguntarle en Twitter, o en una conferencia.

Una página HTML5 de ejemplo

Hasta ahora hemos repasado un poco de historia y hemos visto qué nuevos elementos se ofrecen. Pasemos a ver un ejemplo para ver exactamente cómo utilizarlos en el contexto de una página real. Echad un vistazo a mi página A history of Pop Will Eat Itself —una historia y discografía de una de mis bandas inglesas favoritas de los 80 y los 90 (si te gusta la música alternativa, por favor, escúchales). He tomado el marcado original de la página de la Wikipedia de Pop Will Eat Itself, lo he limpiado, y lo he convertido en HTML5. Echemos un vistazo más de cerca a lo que hice.

Mantén la página de ejemplo abierta en otra pestaña del navegador mientras lees el artículo: la consultarás de nuevo.

Algunas meta-diferencias

Lo primero que notarás es que el ‘doctype’ es mucho más sencillo que en versiones anteriores de HTML:

<!DOCTYPE html>

Los creadores de HTML5 eligieron la cadena de doctype más corta posible: después de todo, ¿por qué debemos esperar que tú, el desarrollador, recuerdes una cadena enormemente larga con múltiples URLs, cuando en realidad el doctype sólo está para poner el navegador en modo de estándares (por oposición al modo ‘quirks’)?

A continuación, quiero llamar la atención sobre la aparente "laxitud de requisitos sintácticos" de HTML5. He puesto comillas a todos mis valores de atributo y he escrito todos los elementos en minúsculas, pero eso es porque estoy acostumbrado a escribir utilizando las reglas de XHTML. Pero puede que te sorprenda descubrir que en HTML5 puedes ignorar esas reglas, si quieres. De hecho, ni siquiera tienes que molestarte en incluir los elementos <head>, <body> o <html>, y aún así validar.

Esto se debe a que el navegador da siempre por supuestos esos elementos. Si creas una página HTML5 de muestra sin esos elementos, la cargas en un navegador, y compruebas el código fuente de la página cargada, verás que el navegador los inserta automáticamente. También puedes usar el Live DOM Viewer de Ian Hickson para ver el estado de la DOM.

Otra cosa a mencionar es que la especificación HTML5 define estrictamente cómo manejar el marcado mal formado (por ejemplo, elementos mal anidados o sin cerrar), definiendo por primera vez un algoritmo de análisis. Esto significa que incluso si cometes un error en parte del marcado, el DOM será consistente en todos los navegadores que soporten HTML5.

¿Quiere decir eso que ya no hace falta preocuparse por la validación y las mejores prácticas?¡DESDE LUEGO QUE NO! La validación sigue siendo una herramienta muy útil para hacer páginas tan buenas como sea posible. Aunque el DOM sea consistente en todos los navegadores puede que, para comenzar, no se comporte como querías, dando lugar a dolores de cabeza con el CSS y JavaScript. Y como verás a medida que explores más HTML5, sigue habiendo muy buenas razones para asegurarse de declarar características documento como <html> de salida. Por ejemplo, permite declarar el idioma del documento en el elemento <html> para fines de internacionalización y accesibilidad, y ciertas tecnologías relacionadas también lo requieren. Un buen ejemplo es AppCache.

Para validar los documentos de HTML5, puede utilizar el validador del W3C, que valida HTML5, así como una amplia gama de variedades de lenguajes de marcas. Si quieres un validador específico de HTML5 (y WAI-ARIA y MathML) puedes usar validator.nu.

Como último punto de esta sección, quiero llamar la atención sobre esta línea:

<meta charset="utf-8" />

Es necesario declarar el juego de caracteres del documento dentro de los primeros 512 bytes de este, para protegerse contra un grave problema de seguridad. A menos que tengas una muy buena razón para no hacerlo, debes utilizar UTF-8.

<header>

La cabecera del documento tiene este aspecto:

<header>
  <hgroup>
    <h1>A history of Pop Will Eat Itself</h1>
    <h2>Introducing the legendary Grebo Gurus!</h2>
  </hgroup>
</header>

El propósito del elemento <header> es envolver la parte del contenido que forma la cabecera de la página, generalmente con un logotipo o gráfico de la compañía, el título de página principal, etc.

<hgroup>

Notarás que en el código anterior, el único contenido de la cabecera es un elemento <hgroup>, que rodea dos encabezados. Lo que pretendo es especificar el encabezado de nivel superior del documento, más un subtítulo o ‘tagline’. Quiero que sólo cuente el nivel superior de encabezado en la jerarquía de encabezados del documento y eso es exactamente lo que hace <hgroup>: que un grupo de encabezados cuente como un único encabezado a efectos de la estructura del documento. Hay más información acerca del funcionamiento de encabezados en la siguiente sección: Esquemas HTML5 y el algoritmo de encabezados de HTML5.

<footer>

Si vas al final del documento verás el siguiente código:

<footer>
  <h2 id="copyright">Copyright and attribution</h2>
</footer>

<footer> debería usarse para contener el contenido de pie de página del sitio: si te fijas en la parte inferior de tus sitios favoritos, verá que los pies de página se utilizan para poner una variedad de cosas, desde los avisos de copyright y datos de contacto a las declaraciones de accesibilidad, pasando por información de licencias y varios otros enlaces secundarios.

<nav>

Subiendo de nuevo por el documento encontrarás esta estructura:

<nav>
  <h2>Contents</h2>
   <ul>
      <li><a href="#Intro">Introduction</a></li>
      <li><a href="#History">History</a>
      <!-- other navigation links... -->
    </ul>
</nav>

El elemento <nav> sirve para marcar los enlaces de navegación u otras estructuras (por ejemplo, un formulario de búsqueda) que te llevan a diferentes páginas del sitio actual, o a diferentes áreas de la página actual. Otros enlaces, como los enlaces patrocinados, no cuentan. Por supuesto, puedes incluir los encabezados y otros elementos de estructura dentro de <nav>, pero no es obligatorio.

<aside>

Justo por debajo del encabezado del documento tenemos lo siguiente:

<aside>
  <table>
    <!-- lots of quick facts inside here -->
  </table>
</aside>

El elemento <aside> sirve para marcar fragmentos de contenido relacionados con el contenido principal, pero que no encajan directamente en el flujo principal. Por ejemplo, en este caso tenemos un montón de datos breves y estadísticas sobre la banda, que no funcionarían bien metidos con calzador en el contenido principal. Otros candidatos adecuados para los elementos <aside> serían listas de enlaces a contenidos externos relacionados, información adicional, citas y/o barras laterales.

<figure> y <figcaption>

El dúo de <figure> y <figcaption> se creó para resolver un conjunto muy específico de problemas. Para empezar, ¿no es siempre un tanto semánticamente dudoso e impuro marcar una imagen y su título como dos párrafos, o un par de una lista de definiciones, o alguna cosa por el estilo? Y, en segundo lugar, ¿qué hacer cuando se quiere una figura consistente en una imagen, o dos imágenes, o dos imágenes y un texto? <figure> nos sirve para envolver todo el contenido que se quiera incluir en una sola figura, ya sea texto, imágenes, SVG, vídeos, o cualquier otra cosa. Después se anida <figcaption> dentro del elemento <figure>, con el texto descriptivo de la figura. La figura que incluyo en el ejemplo es simple, para empezar:

<figure>
 <img src="pwei.png" alt="Old poppies logo" />
 <figcaption>
   The old poppies logo, circa 1987.
   <a href="http://www.flickr.com/photos/bobcatrock/317261648/">Original picture on 
   Flickr</a>, taken by bobcatrock.
 </figcaption>
</figure>

<time>

El elemento <time> permite definir un valor de fecha y hora sin ambigüedad, legible a la vez por personas y máquinas. Por ejemplo, he marcado las fechas de lanzamiento de singles de la banda así:

<time datetime="1989-03-13">1989</time>

El texto entre las etiquetas de apertura y cierre pueden ser el que quieras, según corresponda a la audiencia del sitio. Si quisieses, también podías ponerlo así:

<time datetime="1989-03-13">13th March 1989</time>
<time datetime="1989-03-13">March 13 1989</time>
<time datetime="1989-03-13">My nineteenth birthday</time>

Por su parte, la fecha dentro de los atributos de fecha y hora es un estándar ISO legible por ordenador (puedes consultar W3C Tip: Use international date format (ISO) para obtener más información), con lo que se obtiene lo mejor de ambos mundos. También se puede agregar la hora al final de la norma ISO, de esta forma:

<time datetime="1989-03-13T13:00">One o'clock in the afternoon, on the 13th of March 1989</time>

También puede agregarse un ajuste de zona horaria. Así, por ejemplo, para convertir el último ejemplo en hora del Pacífico, podría hacer esto:

<time datetime="1989-03-13T13:00Z-08:00">One o'clock in the afternoon, 
on the 13th of March 1989</time>

<article> y <section>

Ahora nos fijaremos en los que probablemente sean los dos elementos más incomprendidos de HTML5: <article> y <section>. La primera vez que te los encuentras la diferencia puede parecer confusa, pero en realidad la cosa no está tan mal.

Básicamente, el elemento <article> es para piezas de contenido independientes que tendrían sentido fuera del contexto de la página actual, y podrían sindicarse perfectamente. Eso incluiría las entradas de un blog, un vídeo con su transcripción, una noticia, o una parte de una historia por capítulos.

El elemento <section>, por su lado, sirve para dividir el contenido de una página en diferentes funciones o áreas temáticas, o dividir un artículo o historia en secciones diferentes. Así, por ejemplo, en mi historia de PWEI, la estructura tiene este aspecto:

<article>
  <section id="Intro">
    <h2>Introduction</h2>
  </section>
  <section id="History">
    <h2>History</h2>
  </section>
  <section id="Discography">
    <h2>Discography</h2>
  </section>
</article>

Pero también podrías tener una estructura como:

<section id="rock">
  <h2>Rock bands</h2>
  <!-- multiple article elements could go in here -->
</section>
<section id="jazz">
  <h2>Jazz bands</h2>
  <!-- multiple article elements could go in here -->
</section>
<section id="hip-hop">
  <h2>Hip hop bands</h2>
  <!-- multiple article elements could go in here -->
</section>

¿Cómo afecta eso a <div>?

Así, con todos estos fantásticos nuevos elementos para usar en nuestras páginas, los días del humilde <div> están contados, ¿verdad? NO. De hecho, el <div> todavía tiene un uso perfectamente válido. Debe usarse cuando no hay otro elemento más adecuado para agrupar un área de contenido, y ese suele ser el caso cuando se usa un elemento para agrupar contenido únicamente para aplicar estilos o efectos visuales. El ejemplo en mi historia de los PWEI es el <div id="wrapper"> que he puesto alrededor de todo el contenido. La única razón por la que está ahí es para poder usar CSS para centrar el contenido en el navegador:

#wrapper {
  background-color: #ffffff;
  width: 800px;
  margin: 0 auto;
}

<mark>

El elemento <mark> sirve para destacar términos de relevancia actual o para destacar partes de contenidol sobre las que se quiere llamar la atención, pero cuyo significado semántico no se quiere cambiar. Es como cuando usted lees un artículo impreso y subrayas las partes que te parecen importantes con rotulador. Así, por ejemplo, es posible que quieras utilizar este elemento para el marcado de líneas en un wiki que deben ser objeto de atención editorial, o para resaltar las ocurrencias de un término de búsqueda que el usuario ha buscado en una página, y luego darles un estilo apropiado en su CSS.

El atributo hidden

El atributo hidden (oculto), cuando se aplica a cualquier elemento, lo oculta por completo de cualquier forma de presentación, independientemente del medio, y debe utilizarse si se tiene la intención de mostrar el contenido más tarde (por ejemplo, usando JavaScript para eliminar el atributo), pero no quieres mostrarlo ahora. No debe ser utilizado para ocultar contenido como las pestañas ocultas de una interfaz con pestañas, ya que eso, en realidad, no es más que una forma diferente de presentar contenido en un espacio más pequeño, en lugar de ocultar el contenido completo.

Esquemas HTML5 y el algoritmo de encabezados de HTML5

Antes de continuar con nuestro viaje hacia el dominio de HTML5, hay otra diferencia importante que debemos tratar entre HTML5 y las versiones anteriores de la especificación. En HTML tenemos que el concepto del esquema del documento, que es básicamente un desglose del documento en sus diferentes encabezados, y su jerarquía relativa, exactamente igual que cuando se escribe un documento en un procesador de textos y ponemos la vista de esquema. En efecto, he creado, básicamente, un esquema del documento de este documento anidando listas para crear la tabla de contenidos al comienzo de este artículo. El esquema de documento de este artículo tiene un aspecto como el siguiente:

- Los nuevos elementos estructurales de HTML5
  - Introducción
  - Presentando los elementos estructurales de HTML5
    - ¿Cómo se decidieron los nombres de los elementos?
    - ¿Por qué no hay un elemento <content>?
  - Una página HTML5 de ejemplo
    - Algunas meta-diferencias
    - <header>
    - <hgroup>
    - <footer>
    - <nav>
    - <aside>
    - <figure> y <figcaption>
    - <time>
    - <article> y <section>
      - ¿Cómo afecta eso a <div>?
  - Esquemas HTML5 y el algoritmo de encabezados de HTML5
  - Cómo  hacer que funcione en navegadores antiguos
  - Resumen

Así que "Los nuevos elementos estructurales de HTML5" es un <h1>, "Presentando los elementos estructurales de HTML5" es un <h2> y así sucesivamente. En HTML4 estamos acostumbrados al hecho de que hay seis niveles posibles de encabezado, y el nivel de título lo dicta el elemento utilizado efectivamente, lo que significa que es perfectamente posible acabar con una jerarquía de encabezados completamente rota si utilizas niveles de encabezado equivocados, o incluso si algunos de sus contenidos se sindican a otro gestor de contenidos.

HTML5 resuelve este problema generando la jerarquía de encabezados basándose en la relación de anidación de las diferentes secciones del documentos. Se crea una nueva sección del documento cada vez que se utiliza lo que se llama contenido de seccionado: los elementos <article>, <section>, <nav> y <aside>. Así, por ejemplo, si se toma el ejemplo siguiente:

<h1>My title</h1>

<div>
  <h2>My subtitle</h2>
</div> 

HTML 4 cuenta esto como un encabezado de primer nivel seguido de uno de segundo nivel, pero HTML5 lo cuenta como dos encabezados de primer nivel. ¿Por qué? Porque <div> no es un elemento de seccionado, y por tanto no crea una nueva sección en la jerarquía. Para remediar esto, habría que cambiar el <div> a un elemento de seccionado:

<h1>My title</h1>

<section>
<h2>My subtitle</h2>
</section>

Véase el segundo ejemplo de esquema en vivo.

Ningún navegador implementa actualmente el algoritmo de esquemas de HTML5, pero ya te puedes hacer una idea de cómo funciona mediante la extensión de Opera HTML5 Outliner, el on-line HTML5 outliner de Geoffrey Sneddon, o el outliner HTML5 de Google. Prueba a ejecutar los ejemplos anteriores a través de una de estas herramientas si no me crees. En el futuro no tendrás que molestarse con una jerarquía de h1, h2, h3, etc, ya que independientemente de los elementos de encabezado usados realmente, el algoritmo seguirá llegando a la misma jerarquía a partir de la anidación de las secciones del documento. Pero de momento deberías seguir preocupándote, ya que ningún navegador (ni lector de pantalla) lo soporta todavía.

La gran pregunta, ahora mismo, es "¿por qué molestarse con todo esto"? Bueno, esta nueva forma de elaborar el esquema del documento y su jerarquía de encabezados tiene dos ventajas principales sobre la antigua:

1. Puedes tener tantos niveles de encabezado como quieras: no estás limitado a seis.
2. Si transplantas el contenido a otro CMS, y esto hace que los niveles de h1, h2, h3, etc vayan mal, el algoritmo seguirá llegando a una jerarquía correcta.

Cómo hacer que funcione en navegadores antiguos

Los navegadores antiguos: eternamente la ruina de nuestra existencia cuando intentamos familiarizarnos con el uso de los juguetes nuevos de la web… De hecho, el problema aquí son todos los navegadores: ningún navegador actual reconoce y soporta estos nuevos elementos estructurales HTML5 como tales. Pero no temas, aún así puedes hacer que funcionen en todos los navegadores de hoy con un mínimo esfuerzo.

En primer lugar, si pones un elemento desconocido en una página web, por defecto el navegador lo tratará simplemente como un <span>, es decir, un elemento en línea anónimo. La mayoría de elementos HTML5 que hemos analizado en este artículo deberían comportarse como elementos de bloque y, por tanto, la manera más fácil de hacer que se comporten correctamente en navegadores antiguos es establecerles display: block; en el CSS:

article, section, aside, hgroup, nav,  header, footer, figure, figcaption {
 display: block;
}

Esto resuelve todos los problemas en todos los navegadores excepto uno. ¿Adivinas cuál? Sí, increíble, verdad, que IE resulte ser más difícil que los demás navegadores, y se niegue a aplicar estilo a elementos que no reconoce… La solución para IE es ilógica pero, afortunadamente, bastante simple. Para cada elemento de HTML5 que uses es necesario insertar una línea de código JavaScript en la cabecera del documento, de esta forma:

<script>
  document.createElement('article');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('hgroup');
  document.createElement('nav');
  document.createElement('header');
  document.createElement('footer');
  document.createElement('figure');
  document.createElement('figcaption');
</script>

Por arte de magia IE ahora aplicará los estilos a los elementos. Es doloroso tener que usar JavaScript para hacer que funcione el CSS, pero bueno, al menos tenemos un camino a seguir. ¿Por qué funciona esto exactamente? Nadie con quien haya hablado lo sabe realmente. Y también hay un problema con que los estilos TODAVÍA no llegan a la impresora al imprimir documentos HTML5 desde IE.

Resumen

Esto cierra nuestra discusión sobre los nuevos elementos estructurales de HTML5. Si quieres más ayuda tenemos mucho más que ofrecer en dev.opera.com, y también deberías consultar a los doctores de HTML5.

Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial - Compartir bajo la misma licencia 3.0 No adaptada.

: :