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)

Cómo estructurar adecuadamente una página web en HTML5 (Parte I)

Como siempre, voy tarde. Ha tenido que pasar más de un año, pero aquí estoy, a vueltas con los fundamentos del HTML5.

Esta nueva versión del código es muy potente, ya se han encargado de demostrarlo todos los que quieren dar carpetazo al Flash, incluso la propia Adobe se ha subido al carro de la animación con HTML5 mediante el lanzamiento de Edge. Pero, como con todo, lo mejor es empezar la casa por los cimientos y, para mí, estos son los elementos que configuran la estructura (cuerpo) de la página web.

Así pues, el cuerpo (body) de una página web bien estructurada en HTML5, consta de las siguientes partes, únicas pero repetibles:

Cabecera <header>
Pie <footer>
Dirección <address>
Navegación <nav>
Sección <section>
Artículo <article>
Apartado <aside>
Grupo de encabezados <hgroup>

Ampliando:

<header>
Etiqueta para encapsular las cabeceras. Lo normal es emplearla para englobar los elementos que componen la cabecera general de la web (logo, lema), pero también puede utilizarse para diferenciar el encabezado de un subapartado de la misma web.

Ejemplo #1: Cabecera general de la página web

<!-- [Cabecera] -->
<header>
<h1>Bienvenidos a mi web</h1> 
</header>

Ejemplo #2: Cabecera de un artículo de la página web (ver <article>)

<!-- [Un artículo] -->
<article>
<!-- [Cabecera del artículo] -->
<header>
<h1>Este sería el título del artículo.</h1>
</header>
.
.
. 
</article>

<footer>
Etiqueta para encapsular el pie de página, que al igual que el <header> puede usarse en como pie de toda la web o bien de los artículos o secciones si conviene.

Ejemplo #1: Pie general de la página web

<!-- [Pie de página] -->
<footer>
<p>Información de pie de página: Derechos de autor, año, atribuciones, agradecimientos...</p> 
</footer>

Ejemplo #2: Pie de un artículo de la página web

<!-- [Un artículo] -->
<article>
.
.
.
<!-- [Pie del artículo] -->
<footer>
<p>Enlace para seguir leyendo...</p> 
</footer>
</article>

<address>
Esta etiqueta viene de la mano del <footer> general de la página web. Sirve para encapsular los datos de dirección y/o contacto.

Ejemplo de uso dentro del pie de página

<!-- [Pie de página] -->
<footer> 
<p>Información de pie de página</p> 
<!-- [Dirección y/o contacto] -->
<address> 
<p>Escríbenos a ejemplo@mail</p>
</address>
</footer>

<nav>
Etiqueta para encapsular el apartado dedicado a la navegación interna de la web (el típico menú).

Ejemplo básico

<!-- [Navegación] -->
<nav>
<a href="#">Enlace Interno #1</a>
<a href="#">Enlace Interno #2</a>
<a href="#">Enlace Interno #3</a>
<a href="#">Enlace Interno #4</a>
</nav>

<section>
Etiqueta para encapsular las diferentes secciones de la web. Digamos que agrupa elementos de igual temática. Por ejemplo, apartado de noticias = sección; apartado de descargas = sección…

Ejemplo

<!-- [Una sección compuesta de dos artículos] -->
<section>
<!-- [Un artículo] -->
<article>
.
.
. 
</article>
<!-- [Otro artículo] -->
<article>
.
.
. 
</article>
</section>

<article>
Etiqueta para encapsular los artículos, temas, tópicos, entradas… Lo conveniente es agrupar los artículos de la misma temática en una sección que los englobe.

Ejemplo

<!-- [Un artículo] -->
<article>
<!-- [Cabecera del artículo] -->
<header>
<h1>Título del artículo</h1>
</header>
<!-- [Contenido del artículo] -->
<p>Cuerpo del artículo con todo lo que se quiera contar.</p>
<p>Y con todos los párrafos y formateos que hagan falta.</p>
<!-- [Pie del artículo] -->
<footer>
<p>Pie del artículo.</p> 
</footer> 
</article>

<aside>
Etiqueta para encapsular anuncios u otro contenido de la página que no está relacionado con el tema central de la misma.

Ejemplo

<!-- [Apartado para anuncios] -->
<aside>
<h3>Anuncios</h3>
<p>Vendo moto en buen estado.</p>
</aside>

Finalmente, una etiqueta que parece de menor importancia, pero que también ayuda a los navegadores a comprender la estructura de la web:

<hgroup>
Etiqueta para encapsular un grupo de encabezados (h1…h6).

Ejemplo de uso: En la cabecera de un artículo

<!-- [Cabecera del artículo] -->
<header>
<!-- [Grupo de encabezados: Titular + Entradilla] -->
<hgroup>
<h1>Accidente en la N-IV</h1>
<h5>Hasta trece coches se vieron implicados en el accidente sin víctimas mortales. </h5>
</hgroup>
</header>

Ahora bien, si nos partimos el lomo estructurando una web así, a palo seco, un navegador web la entendería perfectamente (tema por el cual esta estructura es interesante en la optimización para buscadores, es decir, en el SEO), pero una persona se aburriría como una ostra, con todos los contenidos en blanco sobre negro y seguidos hacia abajo. Podéis ver un ejemplo al respecto aquí (si os interesa el código, botón derecho del ratón + ver código fuente). Para hacer todo esto más atractivo al usuario, sin que pierda ese appeal de cara a los navegadores, obviamente, hace falta un poco de CSS.

Prometo una segunda parte sobre esto, indispensable. Perdonadme hasta entonces > [Actualización 21/09/2011] Ya la podéis ver: Cómo estructurar adecuadamente una página web en HTML5 (incluyendo CSS)