Cómo estructurar adecuadamente una página web en HTML5 (Parte II, incluyendo CSS)

Lo prometido es deuda, así que aquí va la segunda entrega de esta mini guía de los principios básicos del HTML5, dedicada esta vez al uso conjunto de este lenguaje y las hojas de estilo.

Como decíamos hace un par de semanas -repito, por si no queréis revisar el anterior artículo– el cuerpo (body) de una página web, bien estructurada en HTML5, consta de las siguientes partes: cabecera <header>, pie <footer>, dirección <address>, navegación <nav>, sección <section>, artículo <article>, apartado <aside> y grupo de encabezados <hgroup>.

Pues bien, en lo que a las hojas de estilo atañe, estas etiquetas se pueden formatear como las antiguas divisiones <div>, pero sin necesidad de escribir por delante la almohadilla (#) a la hora de declararlas. Es decir:

  • Así sí: header { }
  • Así no: #header { }

No obstante, aquí no acaban las explicaciones, pues existen algunas consideraciones que debemos tener presentes:

1.
Si repetimos alguna de las etiquetas para referirnos a partes diferentes de la estructura de la web, como por ejemplo el header o el  footer general y los propios de cada artículo, habrá igualmente que duplicarlas diferenciándolas en el estilo, para que no se produzca un desbarajuste.

CSS

/* Cabecera general */
header#top    { padding:20px 20px; background-color:#9CC; }

/* Cabecera de artículo */
header#article    { margin:0 5px; padding:5px 10px; border-radius:25px 0px; background-color:#BFE6C3; font: 110% Georgia, "Times New Roman", Times, serif; }

HTML

<!-- [Cabecera general] -->
<header id="top">...</header>

<!-- [Cabecera de artículo] -->
<header id="article">...</header>

2.
Si queremos centrar todo el contenido de la página, hay que crear el elemento contenedor de todo porque, extrañamente, no se ha definido una etiqueta específica para esto. Dejo expuesto un ejemplo, aunque la forma de hacerlo no ha variado respecto a la versión previa de HTML.

CSS

/* Elemento contenedor */
#warp    { width:900px; margin:0px auto; }

HTML

<!-- [Elemento contenedor] -->
<div id="warp">...</div>

3.
De resto, tanto a las clases (class), como a los encabezados (h1…h6), a los párrafos (p), a las tablas (table, tr, td), etc. se les pueden aplicar estilos como se hacía hasta ahora y combinarlos con las nuevas etiquetas. Por ejemplo, imaginad que la tónica del diseño de la página es disponer los artículos uno debajo de otro, pero que, en una sección determinada, han de colocarse alineados de izquierda a derecha.

CSS

/* Artículos: Elementos comunes */
article    { margin:0 0 15px; padding:5px 0 0; border-radius:25px 0px; background-color:#FFF; } 

/* Párrafos de los artículos, también común */
article p    { margin:5px 10px; } 

/* Sección de disposición horizontal: Defino el siguiente elemento para conseguir que los artículos con esta id se alineen uno al lado del otro. */
article#hz    { width:48%; float:left; } 

/* Sección de disposición horizontal: Establezco el margen necesario para separar los artículos con la id="hz". Esta clase se debe aplicar a partir del 2º artículo de la sección. */
article.space    { margin-left:4%; }

HTML

<!-- [Primer artículo de la sección de disposición horizontal] -->
<article id="hz">...</article> 

<!-- [Segundo artículo de la sección de disposición horizontal] -->
<article class="space" id="hz">...</article>

Por cierto, si os habéis fijado en el ejemplo anterior, hay una propiedad extraña hasta el HTML5: border-radius. Es una de las novedades introducidas y sirve para redondear -sin necesidad de recurrir a imágenes de fondo- las esquinas de las cajas en las que quedan encapsulados los distintos elementos de la página web. El mayor problema de esta novedad -y de todas las introducidas- es la falta de compatibilidad con los distintos navegadores web. Alguien con el último Chrome o FireFox no tendrá problemas de visualización, pero con un iE8… ¡Uf! En fin, para comprobar la compatibilidad de los navegadores con el HTML5, html5test.com está bastante bien.

Existen problemas de compatibilidad conocidos con ciertos navegadores.
Click en la imagen para ampliar.

Aparte, encontraréis mucha más información sobre la propiedad border-radius en el artículo: Border-radius: create rounded corners with CSS! [en inglés]

Sobre todo lo más, podéis ampliar horizontes en w3.org [también en inglés] y para ver un ejemplo de lo que se puede hacer con el CSS aplicado a los tags del HTML5, os dejo la versión formateada (y comentada) de la página web creada en el primer artículo: Ejemplo de HTML5 con CSS.

Actualización 21/02/2012: Para mejorar la compatibilidad del HTML5 con Internet Explorer 8 y otros navegadores antiguos, revisad esta nueva entrada del blog: Solución al problema de compatibilidad entre HTML5 y los viejos navegadores (iE7, iE8, FF3)

6 respuestas a «Cómo estructurar adecuadamente una página web en HTML5 (Parte II, incluyendo CSS)»

  1. HOla excelente y muy facil de entender todo!

    Solo unas preguntas…….entonces no funciona en todos los navegadores?? o depende de que proyecto valla a realizar, por ejemplo una estacion de radio…le iria bien con html5?

    saludos!!

    1. ¡Buenas! Funciona en todos los navegadores -modernos- que soportan HTML5: Chrome, FireFox, Opera, Safari… los incluidos en los tablets y smartphones y también Internet Explorer 9. El problema principal lo dan los antiguos navegadores de Windows (del iE8 para atrás). Lo que normalmente se hace es poner dos CSS, uno con la norma actual y otro para aquellos usuarios que lleguen al website usando un explorador desfasado. Es doble trabajo, pero te aseguras llegar a más gente. Si sólo quieres hacer uno de los dos, yo optaría por el HTML5 ya que acabará imponiéndose y porque Windows está -¡por fin!- acabando lentamente con sus viejos exploradores.

      ¿Que si depende del proyecto? Más bien no. Depende de las ganas que tengas que hacer algo nuevo y/o lo que quiera el cliente y lo que pague por eso. Si es un cliente chapado a la antigua y nadie le va a hacer actualizar su XP con iE6, no va a quedar otra que olvidarse del HTML5 o hacer las dos versiones de CSS ;)

¡Comenta!

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.