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.

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.