HTML5 Series: Estructura y secciones de los documentos

Balu2 Agosto 2011 - 10:26pm 0 comentarios
Enviar por Email Imprimir

doctype_htmlCó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.

HTML4 Estructura por Divs

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.

HTML5 Estructura de documentos

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:

© 2011 MiEmpresa.com

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.

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.

por
Balú
el

Recomendado: HTML5 Series: ¿Qué es HTML5? Un poco de historia...

Más información | W3: Sections

Dejar comentario

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más