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)
¿Opiniones, dudas? Cuéntame…