HTML5: Primeros pasos

Es la tecnología del momento, y probablemente del futuro: HTML5.

En este primer post voy a empezar por lo más básico: algunas de las nuevas etiquetas que han aparecido con el nuevo (futuro) estándar. En concreto, estas nuevas etiquetas han surgido con la idea de dotar de una mayor semántica a la Web. Hace unos años la gente de Google realizó un estudio sobre los “class names” más populares. En el Top-20 aparecieron términos como “footer”, “header” “nav” o “sidebar”. No es, en realidad, nada sorprendente si tenemos en cuenta que muchos sitios web siguen una misma estructura.

Con HTML5 sus creadores han pensado que, en lugar de seguir utilizando etiquetas <div> sin ningún tipo de semántica para definir estas partes de las páginas web, resulta mucho más interesante poder definirlas con etiquetas específicamente pensadas para ellas, que ayuden a identificar sin ninguna duda que el contenido es una cabecera, un pie, una barra lateral, etc. Sin embargo, nos debemos confundir semántica con estructura. Es decir, cuando estemos utilizando una de estas etiquetas, estaremos indicando que lo que contienen es una cabecera, pie, etc, pero no su posición o aspecto en ningún modo.

Veamos estas nuevas etiquetas y el uso recomendado de ellas.

Etiqueta <header>

La etiqueta <header> está pensada para definir, como su nombre indica, cabeceras de elementos. No está restringida sólo a su uso a nivel de página. Es decir, que podemos encontrar etiquetas <header> como cabecera de otros elementos, como podría ser el título de un artículo en un blog o el encabezado en una lista de secciones.

No es una etiqueta obligatoria y su uso más habitual será como primer elemento de la página, conteniendo el título de la página, logos o elementos de navegación comunes a todo el sitio.

<header>

  <h1>Esto es una cabecera.</h1>

</header>

Por otra parte, la etiqueta <header> también puede contener los típicos enlaces navegacionales que se comparten entre todas las páginas web y que, semánticamente hablando, también forman parte de la cabecera del sitio.

Etiqueta <nav>

La etiqueta <nav> está pensada para destacar una sección en la página que contenga enlaces a otras páginas o a la misma, lo cual no significa que cualquier conjunto de enlaces sean candidatos a ir contenidos dentro de una etiqueta <nav>. En la misma especificación se propone un ejemplo de enlaces que no se envuelven en una etiqueta: los enlaces que aparece en el pie de página, apuntando a información legal, copyright, etc; en este caso basta con envolverlos en una etiqueta <footer> (de la que hablaremos más adelante).

Como ocurre con la etiqueta <header>, es posible hacer uso de más de una etiqueta <nav> en una misma página. Otro ejemplo típico de esta posibilidad es una página en la que tengamos enlaces a la navegación a través del sitio en la cabecera (en este caso la etiqueta <nav> muy probablemente irá insertada dentro de una etiqueta <header>), mientras que en el contenido de la página podemos tener una serie de enlaces apuntando a secciones dentro de ese contenido.

<header>

  <h1>Mi sitio web</h1>

  <nav>

    <h2>Enlaces del sitio:</h2>

    <ul>

      <li><a href="default.aspx">Portada</a></li>

      <li><a href="articulos.aspx">Articulos</a></li>

      <li><a href="contacto.aspx">Contacto</a></li>

    </ul>

  </nav>

</header>

En este ejemplo podemos ver las etiquetas <header> y <nav> juntas. La etiqueta <nav> no es más que un contenedor, es decir, no sustituye a las etiquetas <ul> y <ol> a la hora de definir una lista de enlaces. Por otra parte, los enlaces pueden presentarse en otro formato que no sea una lista, si se considera oportuno.

Etiqueta <footer>

La etiqueta <footer> representa un pie para varios tipos elementos de una página y no sólo la página en sí misma. Algunos de estos elementos son elementos <article>, <nav>, <aside>, <section>, <blockquote>, etc. En general, es posible tener un pie en cualquier elemento “sectioning content” y “sectioning root”. Podemos intuir, por tanto, que es posible tener más de un elemento <footer> por página.

En estos elementos <footer> normalmente incluiremos información sobre la sección a la que se asocian; información como quién la escribió, enlaces a documentos relacionados, copyright, etc. (según se define en la especificación).

<body>

  <header>

    <h1>Mi sitio</h1>

  </header>

  <article>

    <h2>Mi articulo>

    <p>Contenido del articulo</p>

    <footer>Pie del articulo</footer>

  </article>

  <footer>

    <h3>Pie de la pagina</h3>

    <p>Informacion de copyright</p>

  </footer>

</body>

En este ejemplo podemos ver juntas etiquetas <footer> como pie de un elemento (en este caso el elemento <article>, que veremos más adelante) y como pie de la página web entera.

Etiqueta <section>

La etiqueta <section> ha sido creada con la idea de representar secciones de contenido relacionado en un documento, normalmente con una cabecera. Esta definición resulta lo suficientemente genérica como para que algunos se hayan aventurado a apuntar a esta etiqueta como el sustituto de la etiqueta <div>.

Sin embargo, en la especificación se nos previene específicamente contra este mal uso, indicándonos una regla para poder discernir cuándo elegir una de las dos. Una traducción “libre” de la documentación sería ésta:

Cuando un elemento se crea para darle estilo o para realizar scripting sobre él, se debe utilizar una etiqueta <div>. En general, la etiqueta <section> es conveniente si va a aparecer explícitamente listada y visible en el documento.

Otra controversia de esta etiqueta es con dos parientes “cercanos”, nuevas etiquetas también, que veremos más adelante: <article> y <aside>. La razón es su similitud semántica, especialmente con la primera de ellas. Sin embargo, en la especificación se define un modo sencillo y directo de diferenciar entre ambas etiquetas:

Se debe utilizar <article> en lugar de <section> cuando tiene sentido la sindicación del contenido del elemento.

Un ejemplo de uso de <section> y <article> combinados podemos verlo en el siguiente punto.

Etiqueta <article>

La etiqueta <article> está diseñada para representar elementos “auto-contenidos”; es decir, son elementos que pueden ser distribuidos o publicados (mediante sindicación) de forma independiente. Los ejemplos más típicos son posts de un blog, comentarios, respuestas de un foro, artículos, etc.

Esta etiqueta permite anidar en su interior otras etiquetas <article> iguales. Tomando los ejemplos anteriores, podríamos definir una entrada de un blog como <article> y hacer lo propio con etiquetas <article> anidadas para cada uno de los comentarios de dicha entrada.

<article>

  <h2>Mi nueva entrada</h2>

  <p>Este es el contenido de la nueva entrada en mi blog</p>

  <section>

    <h3>Comentarios</h3>

    <article>

      <p>Mi comentario a tu entrada</p>

      <footer>

        <p>Por usuario1</p>

      </footer>

    </article>

    <article>

      <p>Otro comentario a tu entrada</p>

      <footer>

        <p>Por usuario2</p>

      </footer>

    </article>

  </section>

</article>

Etiqueta <aside>

La etiqueta <aside> nos permite representar el concepto de “sidebar” o barra lateral. Sin embargo, no debemos pensar que necesariamente estará situada en una posición determinada. Como con todas las etiquetas presentadas en este artículo, su contenido es meramente semántico, no estructural o posicional.

La definición que nos aporta el estándar describe este elemento como una sección del elemento con contenido tangencial al mismo, relacionado pero separado. Entre los ejemplos que podemos encontrar, destacan las clásicas barras laterales que aparecen en muchas páginas web, así como otros menos intuitivos los “pullquotes” (textos destacados dentro de un artículo para enfatizar). En ambos casos es posible su eliminación sin afectar al contenido.

<aside>

  <h1>Datos HTML5</h1>

  <p>Aquí podríamos indicar un hecho relevante sobre HTML5 pero no relacionado con este articulo</p>

<aside>

Conclusiones

Hemos visto algunas de las nuevas etiquetas que se han añadido a HTML5 con la idea de dotar de mayor semántica al lenguaje a la hora de definir los contenidos. Sin embargo, no debemos perder de vista que estas etiquetas sólo aportan semántica; es decir, no nos indican ni la estructura ni la posición ni el orden de los elementos que, con ellas, estamos definiendo. Por tanto, no debemos pensar que sólo existirá un <header> o un <footer> en una página, o que deberán aparecer al principio o al final de la misma, o que los elementos dentro de <aside> deben colocarse en un lateral.

BIBLIOGRAFÍA

• HTML5 for Web Designers, de Jeremy Keith
• Introducing HTML5, de Lawson y Sharp.
• Especificación HTML5 del W3C