Ejemplos de código HTML5 utilizando las nuevas etiquetas semánticas
Veamos unos cuantos ejemplos de códigos Html5 reales, en los que poder ver mucho mejor el significado de todas estas definiciones tan pesaditas, de acuerdo? Vamos allá. Partimos de la estructura básica, una página aún sin nada más que el título.
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Titulo</title>
</head>
<body>
(( CONTENIDO ))
</body>
</html>
Vamos a añadirle elementos típicos de una página web normal y corriente y decidimos por el camino qué etiquetas podríamos colocarle a cada parte, de acuerdo? Nos olvidamos del lugar en las que colocaremos esas partes, pues como sabemos, eso lo conseguiremos con los estilos CSS. Ademas os recuerdo que el Html5 define el significado de cada parte, no el cómo ni dónde se muestran en el navegador, vale?
A esta página web de ejemplo vamos a colocarle para empezar el título de la web seguido de una breve descripción de la misma. Lo acompañaremos con un buen logotipo y un recuadrito de aquellos para buscar dentro de la web. Si recordamos lo leido antes, será fácil elegir colocar todo eso dentro de un <header>, verdad? Dentro de ese header colocaremos el título de la web dentro de un titular tipo <h1> seguido de la descripción en un <h2>. Recordamos entonces la definición de hgroup de modo que encerramos ambas etiquetas dentro de un <hgroup> y listo.
El logotipo no tiene mucho significado semántico. Es solo un adornito promocional, para que los visitantes se queden con un recuerdo visual de la página. Carece por tanto de significado semántico pero necesitaré encerrarlo dentro de algo para poder aplcarle estilos posteriormente. De modo que para el logotipo usaré un simple div, al que asignaré un nombre para facilitar la apliación de estilos más tarde. Le colocaré por tanto un <div id="logotipo">.
El recuadrito de búsqueda podría considerarse un elemento digno de una etiqueta <nav>, pero casi prefiero reservarla para el menú principal de enlaces, de modo que al igual que he hecho con el logotipo, le aplicaré un simple div de la forma <div id="buscador">.
También pienso colocar un anuncio de copyright, datos de contacto con el webmaster y algunos enlaces hacia las normas legales y al mapa de la web. Tiene toda la pinta de querer pertenecer a un pie de página, de modo que rodearé todo aquello entre <footer>. Dentro de ese footer, se podrían distinguir la sección de datos de contacto, la del copyright y los enlaces hacia normas y mapa de la web. Crearé por tanto tres secciones para esas tres partes.
Nos queda por definir la parte principal de los contenidos. Quizás quiera presentarla en dos columnas, quizás en tres... pero eso no son aspectos semánticos, sino visuales, de modo que en caso de decidirme por una forma u otra lo trataria de conseguir aplicando divs, no etiquetas semánticas, no crees? Lo que si tengo claro es que en esa parte principal voy a mostrar por un lado noticias actuales sobre la temática de mi web. Y también mostraré los temas más populares, los más visitados o más votados por los visitantes. Además colocaré un menú hacia las distintas partes de la web y un anuncio en el que trato de vender en pdf un resumen de toda la web.
Claramente podemos adivinar un section para las novedades, otro section para los temas más populares y un nav para el menú de navegación. Sus titulares podrían ser <h1> con "Últimas Novedades" y "Temas Populares". También podemos colocar el anuncio del pdf en un aside, pues no llega a ser directamente contenido principal, aún estando relacionado (pero tangencialmente...).
Dentro de los section de novedades y temas populares, encontraremos diversas publicaciones. Si por ejemplo aparecen 5 novedades, cada una de ellas pertenecerá a un article, si es que hemos entendido bien su definición páginas atrás. Idem para cada uno de los temas más populares del segundo section, no? Cada uno irá dentro de un article independiente, pero dentro del section correspondiente, claro.
Por otro lado, quiero darle algo de estilos a esa parte principal, colocándole algunos bordes sombreados, etc, de modo que, como no hay ya una etiqueta que englobe toda esa parte principal, rodeo todo aquello de un div con el nombre "contenido" para poder aplicarle esos estilos más tarde, con CSS, claro.
Con eso la estructura queda bien clara y definida. Aún necesitaría centrar toda la página en el navegador. Para ello hemos aprendido en CCTW que aplicando ciertos estilos a la etiqueta correspondiente, podemos conseguir un centrado perfecto en cualquier navegador. El problema es que no tenemos ninguna etiqueta englobando a toda la página... de modo que, como no encuentro ninguna etiqueta semántica que lo englobe todo, coloco de nuevo un simple div y le coloco el nombre "centrado" para conseguir ese efecto. Como ves, al ser su función solamente la de aplicar estilos, uso un div y no una etiqueta con significado semántico.
El código completo podría quedar más o menos así:
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Titulo</title>
</head>
<body>
<div id="centrado">
<header>
<hgroup>
<h1>(( TITULO ))</h1>
<h2>(( DESCRIPCION DE LA WEB ))</h2>
</hgroup>
<div id="logotipo">(( LOGOTIPO ))</div>
</header>
<id ="contenido">
<nav>
(( MENU DE NAVEGACION ))
</nav>
<aside>
(( ANUNCIO DEL PDF ))
</aside>
<section id="izquierda">
<h2>Ultimas Novedades<h2>
<article>(( NOVEDAD UNO ))</article>
<article>(( NOVEDAD DOS ))</article>
<article>(( NOVEDAD TRES ))</article>
</section>
<section id="centro">
<h2>Temas Populares<h2>
<article>(( POPULAR A ))</article>
<article>(( POPULAR B ))</article>
<article>(( POPULAR C ))</article>
</section>
</div>
<footer>
<section id="copyright">(( Datos Copyright ))</section>
<section id="contacto">(( Datos de Contacto ))</section>
<section id="enlaces">(( MapaWeb, Política, etc. ))</section>
</footer>
</div>
</body>
</html>
Estructura HTML5:
