Cómo mencionamos en el artículo anterior de esta serie, HTML5 se empezó a trabajar desde el 2004 en un esfuerzo conjunto entre la W3C HTML WG y la WHATWG. El resultado fue la creación de una de las especificaciones que las empresas desarrolladoras de navegadores, cómo Apple, Mozilla, Opera y Microsoft intentan cumplir.
La especificación de HTML5 viene con nuevos elementos que los desarrolladores web pueden usar para describir la estructura de un documento web respetando la semántica estándar. En este artículo vamos a hacer referencia a las secciones de HTML5 y como estructurar un documento...
Estructura
HTML5 introduce un conjunto de nuevos elementos que nos vuelven más sencilla la manera de estructurar páginas web. La mayoría de páginas HTML4 incluyen una variedad de estructuras comunes, como headers, footers y columnas; la mayoría de estas se realizan utilizando divs, con una clase o id descriptivo a su ubicación.
Por ejemplo, en la imagen siguiente podemos observar un layout típico que utiliza divs con atributos id y/o class para estructurarlos. Estos contienen un header, footer y una barra de navegación horizontal debajo del header. El contenido principal contiene un article y el sidebar se encuentra a la derecha.
El uso de los divs se debe a que las versiones actuales de HTML4 carecen de la semántica necesaria para describir estas partes de manera más específica. HTML5 aborda esta carencia mediante la introducción de nuevos elementos para la representación de cada una de estas secciones.
En el ejemplo, los elementos div de la imagen anterior pueden ser reemplazados con los nuevos elementos: header, nav, section, article, aside, y footer.
Secciones
Si el elemento body representa el contenido principal del documento; una sección representa una parte del documento o aplicación. Una sección, en este sentido, es una agrupación temática del contenido, en muchos casos con una cabecera. Por ello, todo el contenido dentro del elemento body es parte de una sección.
Ejemplos de secciones podrían ser los capítulos o las secciones numeradas de una tesis. La portada de un sitio web podría dividirse en secciones: Una para la introducción, otras para los ítems de las noticias y otro para la información de contacto.
En el ejemplo de las imágenes, el marcado del documento podría lucir como sigue:
... ...
Hay varias ventajas de utilizar estos elementos. Por ejemplo, cuando los utilizamos junto a los elementos de encabezamiento (H1 a H6), podemos definir una forma estructurada un grupo de secciones anidadas.
Por ejemplo, la siguiente estructura cuenta con una sección anidada y elementos H1:
Nivel1
Nivel 2
Nivel 3
Noten que para una mejor compatibilidad con los navegadores actuales, hemos usado distintos niveles de encabezamiento (de H2 a H6) apropiado en lugar de sólo etiquetas H1.
header
El elemento header (encabezamiento) representa la cabecera de una sección. Por cierto, las cabeceras pueden contener más que sólo el título, por ejemplo podría incluir subtítulos o información adicional.
El título de encabezado
Artículo del Blog
Insertamos un subtítulo aquí.
footer
El elemento footer representa el pie de la sección a la que se la aplica. Un footer típicamente contiene información adicional sobre la sección en que se encuentra, podría ser el autor, enlaces relacionados al documento, copyright, etc. Por ejemplo:
nav
El elemento nav representa una sección para enlaces de navegación, útil para la navegación de un sitio o de una tabla de contenidos.
aside
El elemento aside (de un lado) se puede usar para estructurar el contenido que está tangencialmente relacionado con el contenido de al lado; es decir, es útil para el marcado de las barras laterales (sidebars).
article
El elemento article representa una sección independiente del documento, página o sitio. Se recomienda utilizarlo en contenidos del tipo noticias o artículos de blogs, publicaciones en los foros o comentarios individuales.
Comentario #2 por Algún usuario
Este es otro gran artículo!
address
El elemento address no es nuevo de HTML5, pero si ha sido ampliado. Antes se solía finalizar los documentos con un texto enmarcado con la etiqueta address, en el cual se incluía la fecha de publicación, el nombre del autor del artículo, su página web y/o información de contacto.
En la actual versión de HTML, el elemento address provee información de contacto de un documento o de una parte del documento. La información provista puede incluir los nombres de los editores del documento, enlaces a sus páginas webs, direcciones de correo para feedback, direcciones postales, números de teléfonos y más. Sin embargo, el elemento address no debe de usarse para todas las direcciones postales ni de correo electrónico que se publican en la web, sólo deben reservarse para proveer información de contacto con respecto al documento.
Recomendado: HTML5 Series: ¿Qué es HTML5? Un poco de historia...
Más información | W3: Sections
Si te gustó este artículo también te gustará...
