comparte el articulo 

Diseñar un blog con HTML5 – Parte 2

Actualizado el 18/11/2013 < > 0 Comentarios

Resumen: HTML5 ha definido una serie de elementos para estructurar de manera lógica y con mejor semántica el contenido de nuestros blogs, a continuación los explicamos.

Una vez que el DOCTYPE ha sido establecido, es tiempo de estructurar el contenido que mostraremos en nuestro blog. Para este paso, no queremos simplemente volver a acomodar el código existente, vamos a utilizar algunos de los nuevos elementos estructurales que han sido definidos con la especificación de HTML5.

Uso de nuevos elementos estructurales

La mayoría de los blogs siguen ciertos patrones básicos de estructuración, los cuales se encuentran muy bien definidos y por lo tanto son fáciles de comprender. El encabezado es establecido en la parte superior del sitio, generalmente utilizando un elemento div con un id similar a “header” para relacionar de manera sencilla, en la parte inferior encontramos al footer definido casi de la misma forma, algunos artículos se despliegan en la parte principal y estos son envueltos con un elemento generalmente llamado “contenido” o “main”. Finalmente a los lados se muestran algunos elementos de navegación, una o varias sidebar (barras laterales), las cuales se utilizan para mostrar información y widgets deseados.

La mayoría de los sitios que alojan un blog, tienen una estructura similar a la que acabamos de exponer, lo que va variando es el nombre o id que se la da al elemento encargado de envolver el contenido correspondiente. Algunos utilizan nombres como “branding”, “info”, “menu”, “contenedor” o alguna otra variante dependiente del idioma del desarrollador del sitio, para definir los mismos elementos.

A pesar de que algunos desarrolladores añaden distintas funcionalidades a cada parte de la estructura, al final, todos hacen uso de los mismos divs genéricos para establecer el etiquetado. Como HTML4 sólo proporciono el elemento div para establecer este tipo de secciones contenedoras, HTML5 se dio a la tarea de proporcionar elementos que nos ayuden a distinguir estas áreas lógicas, y es por esto que se crearon etiquetas como header, nav, footer, section, article, entre otras.

Como se puede apreciar en la imagen, la migración consiste simplemente en reemplazar todos los elementos div, que anteriormente eran diferenciados con una clase, por las nuevas etiquetas. Cada una de estás etiquetas tiene una función semántica definida, por ejemplo, en nuestra barra lateral decidimos utilizar el elemento nav, ya que esta barra contendrá un buscador y ofrecerá enlaces para una navegación a través del sitio, pero también pudimos haber utilizado el elemento aside el cual es utilizado para representar una sección de una página que contiene información de manera tangencial relacionada al elemento que se encuentra a su lado, sin embargo como este elemento no representa al contenido de navegación, nav fue la mejor opción a escoger.

Contenido principal

En HTML 5 se puede marcar específicamente todo el contenido secundario de una página, como lo son los elementos de navegación, los avisos de copyright, los datos de la empresa, entre otros, por lo que parece extraño que no se puede marcar específicamente la parte más importante de la página, el contenido principal.

Pero ¿Cuál sería el propósito de marcar específicamente ésta parte? Si necesita estilo, lo adecuado sería utilizar un div. Cualquier tecnología de asistencia, como un lector de pantalla, puede encontrar el contenido principal, ya que es la primera parte dentro de una página que no es un encabezado, pie de página o la navegación.

Como se puede apreciar en la imagen de la sección anterior, a diferencia del resto de la estructura, el contenido principal sigue siendo envuelto en un elemento div, muchos recomiendan utilizar un elemento section para esto, ya que éste representa un documento genérico o una sección de aplicación, el cual contiene una agrupación temática de contenido, por lo general con una encabezado y posiblemente con un pie de página.

Sin embargo, la especificación de HTML5 establece muy claramente que el elemento section no es un contenedor genérico de otros elementos. Cuando se necesita un elemento sólo con fines de dar estilo o como una conveniencia para el scripting, se recomienda a los desarrolladores utilizar el elemento div en su lugar.

Publicado el 18/11/2013, última actualización 18/11/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras