div, section y article

Quizás, lo más repetido desde que comenzamos a trabajar con HTML5 es que esta nueva versión nos ofrece la posibilidad de dotar de semántica a los contenidos de una web.
Para ello dos nuevos elementos han aparecido: section y article. Pero, ¿realmente conocemos como y cuando debemos usarlos? Y tenemos claro que lo diferencia del antiguo (y todavía válido) div.

Pues bien, voy a intentar explicar los posibles usos de cada uno y dar los suficientes ejemplos para que lleguéis a comprender mejor las diferencias entre estas etiquetas. 

div 

La etiqueta div sigue funcionando exactamente igual que lo hacía hasta el momento. Lo usaremos para definir bloques sin ningún tipo de significado, normalmente bloques que usaremos para maquetar correctamente la página o para agrupar elementos en principio sin querer dar un significado específico. Este etiqueta era la más usada en HTML 4 y nos servía tanto para representar un artículo como para la cabecera o el pie de la página usando tan solo el atributo id para diferenciarlos sin dar significado ninguno a los contenidos.

article 

Esta etiqueta será usada para representar un contenido específico de nuestra web. Puede representar un artículo, ya sea un artículo de opinión, un entrada en un blog, un comentario en un foro, una noticia, una descarga, o simplemente un contenido estático de una web como el típico quienes somos o a qué nos dedicamos. Para que entendáis mejor esta etiqueta, la usaremos para representar el contenido típico que se publica en una RSS. 

Por lo tanto, este tipo de contenido tiene un alto valor semántico ya que aporta información relevante dentro de nuestro documento. Este elemento debería tener principalmente un título (un header con un h1-h6) y podría tener un footer (con la fecha de publicación, el autor o cualquier otra información adicional) y un cuerpo con el detalle. 

Por ejemplo, en el caso de mostrar un listado de noticias, lo que estaremos listando será un listado de elementos article. 

section 

La etiqueta section es quizás la más difícil de comprender. En principio se usa para representar un bloque de nuestra página que tiene valor semántico, es decir, que aporta un significado a la página. Realmente si tenemos que clasificar por la importancia del significado, el ranking sería: article sería la etiqueta que contiene la información más relevante, section la que contiene información menos relevante, y div que contiene información que no aporta significado ninguno. 

Bien, vamos a intentar poner ejemplos de uso: 

• Listado de noticias: Antes hemos comentado que un listado de noticias será un listado de elementos article, pero, ¿cómo representamos este listado? Pues la mejor forma será con la etiqueta section. Este listado quedaría aproximadamente: 

<section>
<header><h1>Listado de noticias</h1></header>
<article><header><h2>Noticia 1</h2></header></article>
<article><header><h2>Noticia 2</h2></header></article>
<article><header><h2>Noticia 3</h2></header></article>
</section>

• Bloque principal de la página: Imaginaros por ejemplo una portada que tiene una zona destacada en la que se muestra una introducción. Este bloque de contenido podría ser perfectamente un bloque section.
• Separar elementos dentro de un artículo: Cuando se trata de un artículo muy completo podríamos estructurar la información por secciones. Por ejemplo, un articulo separado en Introducción, Desarrollo y Conclusión estaría formado por 3 section, uno para cada bloque. Igualmente podríamos usarlo para agrupar una galería de imágenes asociada al contenido o incluso un listado de enlaces relacionados directamente con el artículo. 

<article>
<header><h1>Artículo</h1></header>
<section><header><h2>Introducción</h2></header> …TEXTO … </section>
<section><header><h2>Desarrollo</h2></header> …TEXTO … </section>
<section><header><h2>Conclusiones</h2></header> …TEXTO … </section>
<section><header><h2>Galería de imágenes</h2></header> …TEXTO … </section>
</article>

Un aspecto importante de la etiqueta section es que debe tener un título. Tal y como hemos comentado en otros artículos de este blog, la etiqueta section crea una sección de manera explícita en el outline del documento, por lo tanto debemos siempre asignarle un encabezado (h1-h6) ya que si no se le aplicará directamente untitle. 

Por lo tanto, una buena forma de identificar cuando es necesario usar una etiqueta section es cuando tengamos la necesidad de aplicar un encabezado. 

Si os dedicáis a investigar un poco por ahí veréis como hay opiniones para todos los gustos. Hay quien dice que el elemento section debería ser quien contiene al article, y otros dicen todo lo contrario, que article es quien debe contener a section. Lo cierto es que la documentación oficial no aclara mucho sobre el tema y lo deja abierto a posibles interpretaciones. Solo el tiempo dirá como lo acaba utilizando la gente, pero desde luego, yo creo que realmente ambos están en lo cierto. La etiqueta section abre un gran abanico de posibilidades y nos permite usarlo de muchas maneras, en algunos casos será el padre de article (como por ejemplo en el caso del listado de noticias) y en otros será el hijo de article (como en el caso del articulo fraccionado en bloques). Por lo tanto, pensad antes de usar una etiqueta u otra que tiene más sentido usar en base a la información que estamos representando. 

Espero en un futuro aportar más ejemplos conforme se me vayan ocurriendo. Si queréis aportar vuestra experiencia no dudéis en comentar lo que queráis.

Header y Footer

Bueno, va siendo hora de seguir repasando alguno de los nuevos elementos introducidos por HTML5.
En este caso le toca el turno a las etiquetas header y footer.

Header

La etiqueta header sirve para mostrar información de cabecera útil para un documento u otras secciones principales. Típicamente se utiliza para agregar encabezados, es decir, h1-h6 que definen el título y subtítulos de la sección, aunque también se puede utilizar para dar información sobre fechas de publicación, versiones del contenido mostrado, o enlaces de navegación dentro del documento (por ejemplo, enlaces a la home, información de contacto, o al mapa web de una página). A pesar del nombre de la etiqueta, ésta no tiene porque ir situado al principio del HTML, sino que puede estar posicionado en cualquier posición dentro de nuestro documento.
Ej:
<header>
<h1>Blog: HTML5 Paso a paso</h1>
<p>Mi nombre es Sergio Raposo Vargas</p>
</header>

Footer

La etiqueta footer representa el pie de un documento o sección. La información que se suele añadir en este bloque es el autor del documento, enlaces a contenido relacionado, información de copyright, avisos legales, etc.
Igualmente podremos agregar al pie información de contacto. Recordar que para ello disponemos de otra etiqueta llamada address. Al igual que en la etiqueta anterior, a pesar de su nombre, este elemento no tiene porque ir al final del documento o sección aunque suele ser lo más normal.
Ej:
<footer>Este documento fue escrito en 2011.</footer>

Elemento address en HTML5

El elemento <address> lo tenemos disponible desde html3, y lo podemos utilizar para indicar información de contacto de un documento, tales como los nombres de los autores y los enlace a sus correspondientes páginas, e-mail de contacto, dirección postal de los mismos, número de teléfonos y así sucesivamente. Pero hay que tener claro que este elemento no lo debemos usar para todos los enlaces o correos de contacto, o dirección postal que introduzcamos en nuestra página, si no que debemos reservarlo tan solo para la información de contacto del documento

En versiones anteriores este elemento afecta a todo el documento, es decir, que tan solo podemos indicar la información de contacto de un autor por página.

El problema de esta estructura es que es posible que necesitemos en una misma página mostrar más de un articulo, por lo que necesitaremos mostrar información de más de un autor, lo que se hace imposible en versiones anteriores.

En html5, tal y como hemos comentado en post anteriores, podemos crear secciones explícitamente con los elementos <article>. Cada sección <article> podrá tener su elemento address particular, ofreciendo información de cada articulo por separado.

Una ventaja más de las secciones de html5.

Para cerrar este tema os muestro un ejemplo de uso de este elemento:

<ADDRESS>
HTML5 PASO A PASO<BR>
Sergio Raposo Vargas<BR>
Sevilla, España<BR>
Tel: +34 954 XX XX XX
</ADDRESS>

Secciones en HTML5: Errores encontrados en html4

Como ya he comentado en este blog varias veces, HTML 5 trae nuevos elementos que nos permiten dar formato a nuestras páginas web con un valor semántico. En este post voy a intentar describir como crear un documento con la estructura más idónea para nuestros contenidos.

¿Qué és el outline de un documento html?
Para comprender bien este post es fundamental saber qué es el outline de un documento html. El outline es lo que se puede llamar el esquema o índice del documento. No es más que la lista de secciones que forma la página web.

Estructura de un documento HTML4
La estructura de un documento, es decir, la estrutura semántica de lo que está entre las etiquetas <body> y </ body>, es fundamental para la presentación de la página al usuario. HTML4 utiliza el concepto de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por una división de HTML (<div>) con elementos de encabezado (<h1>, <h2>, <h3>, <h4>, <h5> o <h6>) dentro de ella, que definen su título. Las relaciones del elemento div junto con un encabezado forman la estructura del documento y forman el outline del documento.
Para ver un ejemplo de como se forma el outline de un documento html veamos el siguiente ejemplo:

<div class="section" id="forest-elephants">
<h1>
Forest elephants</h1>
In this section, we discuss the lesser known forest elephants.
 ...this section continues...
 

<div class="subsection" id="forest-habitat">
<h2>
Habitat</h2>
Forest elephants do not live in trees but among them.
 ...this subsection continues...
 </div>
</div> 

El resultado será:
1. Forest elephants
    1.1 Habitat
Un elemento <div> no implica la creación de una nueva sección. La mera presencia de un encabezado implicará la creación de una nueva sección.
De esta forma, el siguiente ejemplo:

<H1>Forest elephants</H1>
<P>In this section, we discuss the lesser known forest elephants.
...this section continues...
<H2>Habitat</H2>
<P>Forest elephants do not live in trees but among them.
...this subsection continues... 
<H2>Diet</H2>
<H1>Mongolian gerbils</H1>

implica el siguiente esquema:
1. Forest elephants
    1.1 Habitat
    1.2 Diet
2. Mongolian gerbils

Problemas resueltos por HTML5
La definición de un documento con HTML4 implica numerosos problemas, a continuación comentamos los problemas que HTML5 ha intentado resolver respecto a los que teníamos en HTML4

1. El uso de <div> para definir secciones semántica, sin definir valores específicos para los atributos class, hace que automatizar un algoritmo para la generación del esquema sea algo imposible ("¿Es ese <div> parte del esquema de la página, define una sección o una subsección?" O "Es sólo un <div> de presentación, sólo utilizado para dar estilo?").En otras palabras, la especificación HTML 4 es muy imprecisa a la hora de definir una nueva sección. La generación automática de esquemas es importante, especialmente para los software especializados en ayudar a personas discapacitadas, que puedan adaptar la forma en que presentan la información a los usuarios de acuerdo a la estructura del documento. HTML5 elimina la necesidad de utilizar elementos <div> para esquematizar nuestras pátinas html, introduciendo un nuevo elemento, <section>, que es el responsable de quedar este tipo de secciones en los nuevos documentos HTML.
2. La fusión de varios documentos es difícil: la inclusión de un sub-documento en un documento principal significa cambiar el nivel del elemento de encabezados para conseguir mantener el esquema correcto. Esto se soluciona en HTML5 con los nuevos elementos de seccionamiento (<article>, <section>, <nav> y <aside>), que son siempre subsecciones de la sección anterior más cercana, independientemente de que las secciones hayan sido creadas por encabezados internos.
3. Porque cada elemento de encabezado es parte de un esquema, no es posible describir un subtitulo o título secundario (Ej: <h1>Título</h1><h2>Subtítulo</h2> creará el esquema: 1. Título 1.1 Subtítulo) de forma que que el subtítulo dependa directamente del título. HTML 5 introduce el elemento <hgroup> que esconde todos los elementos de encabezado dentro de él bajo una misma entrada del esquema formando tan solo una sección (<hgroup><h1>Título</h1><h2>Subtítulo</h2></hgroup> creará un esquema tal que: 1. Título).
4. En HTML 4, cada sección es parte del esquema del documento. Pero hay documentos que a menudo no son lineales. Un documento puede tener secciones especiales que contienen información que no es parte de él, a pesar de que está relacionado con el flujo principal, como un bloque de publicidad o una caja de explicación. HTML 5 introduce el elemento <aside> permitiendo que dichos tramos no sean parte del esquema principal.
5. Una vez más, en HTML4, ya que cada sección es parte del esquema del documento, no hay manera de tener información de la sección que contenga información relacionada con todo el sitio completo y no con el documento actual, así como los logotipos, los menús, tabla de contenidos, o información de derechos de autor y avisos legales . A tal efecto, HTML 5 introduce tres elementos de secciones específicas: <nav> para las colecciones de enlaces, tales como una tabla de contenido o menús, <foot> y <header> para obtener información relacionada con el sitio.

En términos más generales HTML5 aporta precisión a las características de seccionamiento y encabezado, lo que permite crear esquemas de documentos más predecibles y que pueden ser utilizados por el navegador más fácilmente para mejorar la experiencia del usuario.

Este articulo está basado en el artículo sections and outlines of an HTML5 document del Mozilla Developer Center.

hgroup element: Un agrupador de encabezados (h1-h6)

En este post vamos a tratar uno de los nuevos elementos de html5, el hgroup. Para empezar, siempre viene bien irse a la definición del estándar:

The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.

W3C Specification

Vale, pasemos a describir para que sirve este elemento. Como su definición indica, sirve para agrupar un conjunto de uno o más elementos de encabezado (h1-h6). Es decir, este nuevo elemento nos va a permitir agrupar en un mismo bloque un título y un subtitulo, o eslogan. Dentro de un elemento hgroup tan solo podemos introducir etiquetas de encabezado tales como h1, h2 o h3, de forma que no permite ningún otro tipo de tag en su interior.

Pero ..., porque es interesante este elemento: La respuesta está en la semantica que esta agrupación nos da. Es cierto que hasta ahora, nosotros podríamos usar sin problemas las etiquetas h1-h6, por ejemplo, a la hora de hacer una página en el que se muestra una noticia o articulo (diarios o blog por ejemplo) podríamos tener los siguientes encabezados:

• El título de nuestro sitio web
• El slogan utilizado en la cabecera que describe nuestro sitio web
• El título de la noticia
• El subtitulo de la noticia
• El título de una sección con información adicional en la columna de la derecha.

En este momento, en versiones anteriores teníamos un problema, no eramos capaces de poder agrupar los encabezados, pero podríamos empezar a asignar encabezados de la siguiente forma:

• H1: El título de nuestro sitio web
• H2: El slogan utilizado en la cabecera que describe nuestro sitio web
• H3: El título de la noticia
• H4: El subtitulo de la noticia
• H5: El título de una sección con información adicional en la columna de la derecha.

 Realmente esta asignación de prioridades de encabezado no es del todo correcta, principalmente porque se establece una prioridad de elementos que no es cierta ya que, según este orden, el slogan de la página es más importante que el titular de la noticia mostrada, por lo tanto, una estructura más correcta podría ser:

• H1: El título de nuestro sitio web
• <div>: El slogan utilizado en la cabecera que describe nuestro sitio web
• H2: El título de la noticia
• H3: El subtitulo de la noticia
• H3: El título de una sección con información adicional en la columna de la derecha.

Que pasa en este momento, lo primero es que hemos cambiado el slogan, ya no es un elemento de encabezado, y el titular de la noticia ha pasado a ser el h2 de esta forma elevamos la importancia del titular de la noticia. En nuestro caso hemos cambiado también el titular de nuestra sección de la derecha pasando a ser h3 y estando al mismo nivel que el subtitulo. Otra alternativa sería directamente quitar el título de la sección de la derecha de los encabezados, pasando a ser un elemento más de la web. 

Podemos seguír buscando posibles estructuras de nuestros encabezados, pero habrá una cosa que nunca llegaremos a conseguir, el relacionar los encabezados entre ellos, es decir, un sistema externo como un rastreador no será capaz de establecer asociaciones entre estos elementos, por lo que nunca sabrá que el slogan va asociado el título de nuestro sitio web, o que el subtitulo de la noticia va ligado con el titular.
Para estos casos usaremos hgroups, pudiendo agrupar bloques nuestros encabezados:

<header>

   <hgroup><h1>Título sitio web</h1><h2>Slogan</h2></hgroup>

</header>

<header>

   <hgroup><h1>Titular de la noticia</h1><h2>Subtitulo de la noticia</h2></hgroup>

</header>

<header>

   <hgroup><h1>Titular sección secundaria</h1></hgroup>

</header>

En este caso si estamos ofreciendo información adicional, no solo que elemento es el titular principal y cual secundario, sino que además estamos diciendo que están estrechamente relacionados.
En el ejemplo he usado el elemento header del cual no he comentado nada, pero esto lo dejaremos para otro post en el que explique mejor como usar dicho elemento.

Nueva semántica con HTML 5

Una de las grandes innovaciones de HTML5 ha sido la de introducir semántica en nuestro código html de forma que de nuestra web se pueda extraer más información de la que ofrecemos mediante nuestros contenidos.

Vamos a centrarnos un poco en como trabajábamos hasta ahora, por ejemplo, a la hora de hacer un menú:

<div class="menu">

<ul>
<li><a href="seccion1.html">ir a sección 1</li>
<li><a href="seccion2.html">ir a sección 2</li>
<li><a href="seccion3.html">ir a sección 3</li>
<li><a href="seccion4.html">ir a sección 4</li>
</ul>

</div>
Esto que vemos pinta una lista de enlaces, y será el menú principal de nuestra web. Hasta el momento con html4 no podíamos diferenciar entre estos enlaces que formaban el menú de nuestra web, con un enlace externo relacionado con, por ejemplo, una noticia de nuestro portal.
La idea de html5 es darle semántica a nuestro código, es decir, dar significado al mismo. Por ejemplo, ese trozo de código con html 5 podría ser algo parecido a:

<nav>

<ul>

<li><a href="seccion1.html">ir a sección 1</li>

<li><a href="seccion2.html">ir a sección 2</li>

<li><a href="seccion3.html">ir a sección 3</li>

<li><a href="seccion4.html">ir a sección 4</li>

</ul>

</nav>

De esta forma estamos diciendo, de una forma transparente a los visitantes de nuestro sitio web, que esa lista de enlaces es nuestro menú de navegación.
Ahora la pregunta es, realmente, ¿para qué sirve todo esto?
Evidentemente, el darle significado a las cosas solo tiene sentido si luego hay alguien que es capaz de interpretar ese significado (sino sería como hablarle a los sordos por teléfono). En nuestro caso, los motivos pueden ser desde un mejor posicionamiento SEO (mientras más información le demos a los rastreadores más información podrán sacar de nuestros sitios), hasta una mejor interpretación de los lectores para ciegos u otros tipos de software similares.
La nueva lista de elementos que tenemos en html5 es:

• section
• nav
• article
• aside
• hgroup
• header
• footer
• time
• mark

No es motivo de este post describir estos elementos, para ello ya tendremos tiempo de verlos uno a uno, pero para el que tenga más interés recomiendo el libro "Dive into html5" o el articulo de Alejandro Castillo.

Pero quizás la referencia más amplia que he encontrado de los nuevos elementos de html5 es este link. Más que una lectura un lugar de referencia a la hora de maquetar nuestros contenidos con esta versión de html.
Como siempre pasa, no todo el mundo está de acuerdo con el camino que los creadores de html5 han tenido para darle semántica a los elementos, para ver un poco más afondo esta polémica os aconsejo el articulo de John Allsopp o el comentario sobre el mismo de Julio Loayza en su blog Realidad Aparte.