HTML 5: cmo estructurar, ahora, una pgina

Hace unos das os explicaba algunos de los cambios genricos en el HTML 5, y despus cmo ha de ser la cabecera del sitio. Pero si una cosa ha cambiado mucho en cuando al diseo de las distintas pginas del sitio es la introduccin de lo que se puede llamar los tags de la estructura web. Hace unos 10 aos, cuando se quera hacer una pgina, te podas plantear el uso de losframes que eran la forma ms sencilla de no tener que repetir y repetir infinidad de veces el mismo cdigo. Con la entrada de los lenguajes de programacin esto comenz a variar y se usaban tablas para dar formato al sitio La aparicin de los CSS hizo que losdiv se convirtieran en la mejor opcin para formatear los sitios, y ahora llega el HTML 5 que incluye unas nuevas etiquetas que solucionan todos estos procesos genricos. Adems, estas nuevas etiquetas, si lo miramos desde el punto de vista SEO, dan y quitan peso a algunas secciones de las pginas que costaba analizar. Mucho se ha hablado de la indexacin por parte de Google del blogroll, que con estos nuevos tags se eliminaran. De una forma muy resumida, tendramos que:

Estructura bsica con HTML 3

Estructura bsica con HTML 4

Estructura bsica con HTML 5

Y es que los nuevos tags, a parte de los que se muestran en la imagen, van a facilitar mucho la estructuracin de los sitios. As que, una vez ms, comencemos con las etiquetas dedicadas a dar formato a los sitios: body Aunque el elemento body no se utiliza directamente en la maquetacin de un sitio, creo que es bastante claro que es el mayor contenedor de informacin de todos, y por eso lo he acabado poniendo en estas explicaciones. Siempre he dicho que el head recoge la informacin que los usuarios no ven y que el body representa todo lo contrario, el contenido visible de la pgina Este elemento no varia en nada a sus versiones anteriores, aunque s es cierto que se podrn hacer ms cosas sobre l, pero eso no es lo que toca ahora (ya explicar en entradas posteriores). header Este s que es uno de los nuevos elementos. Y es que header va a dar mucho de s, y aunque muchos simplemente lo usarn para indicar el bloque contenedor de la cabecera (bloque superior de informacin) que suele haber siempre en las pginas, tambin se puede usar en otros puntos del sitio. En principio se presenta como un contenedor que agrupa elementos introductorios o un conjunto de informacin referente a lo que a continuacin se pondr.

De forma resumida, yo hara dos grandes usos de este elementos: Cabecera de la pgina web, donde se incluiran el logo, el men de navegacin y esas cosas tpicas de la cabecera

Encabezado de algunos bloques de informacin. Por ejemplo, si tuvieramos un contenido

que es la ficha de un libro, pues en este header incorporaramos como bloque el ttulo del libro y una pequea ficha tcnica, como encabezado del resto de informacin. De todas formas, no creo que mucha gente acabe usando este segundo elemento como norma general, por lo que lo dejara como principal elemento de la primera opcin, como cabecera del sitio. footer El elemento footer va a ser muy parecido al header anterior, aunque quiz s que tenga ms utilidades que no el otro Bsicamente se ha incluido como agrupador de elemento al final de otro Por norma general los sitios web tienen un pie de pgina en el que se indican datos legales y similares, y esta podra ser la principal funcin, aunque no est pensado para que sea la nica. De la misma forma que el otro, hay dos funciones principales para el elemento: Pie de pgina del sitio, donde se encuentran los datos legales y esas cosas Pie de bloque de contenido, donde incorporar informacin como la fecha, enlaces relacionados, nube de tags y similares Como digo, aunque el segundo caso puede que se utilice en alguna ocasin, la principal funcionalidad se le dar a la primera de ellas. article Y ahora llegan las curvas, as que agrrense fuerte a la silla. Y es que el nuevo elementoarticle va a revolucionar los contenedores y el SEO. Este elemento viene a ser el contenedor de lo que es importante en la pgina. Puede haber varios y es el agrupador de lo que vendra a ser lo indexable por un buscador lo importante, vaya De todas formas, aunque al principio pareca que el elemento section iba a ser el que agrupase los contenidos, he llegado a la conclusin por los ejemplos que est lanzando la W3C que no es as, que el gran contenedor de informacin til es el article. Para hacernos una idea bsica, una pgina tendra este formato: <body> <header>...</header> <article>...</article> <article>...</article>

<article>...</article> <aside>...</aside> <footer>...</footer> </body> Esto dara a entender que hay 3 bloques de informacin principales en el sitio, que son los contenidos que el usuario ha de contemplar, adems de una cabecera, un men lateral y un pie de pgina Que conste que este ejemplo es muy bsico luego intentar poner algo ms trabajado, al final del artculo, cuando haya explicado todos los elementos. Dentro del article encontraramos elementos como un header, un footer y varios section, que comentar en un momento aside Otro de los nuevos elementos el aside viene a ser la barra lateral de toda la vida. Digamos que, por norma general, este bloque incluir la zona de navegacin del sitio web, las categoras, opciones o como queramos llamarlo Como he puesto en los grficos anteriores, vendran a ser el contenido que, pgina a pgina dentro del sitio web se repite junto a la cabecera y el pie) e intuyo que los buscadores le darn menos peso a este bloque ya que notarn que es contenido duplicado y que no tiene utilidad a la hora de posicionar. Y la verdad es que poco ms a decir de este elemento simplemente que es un agrupador y que estar lleno de sections. section Y aqu est la madre del cordero. El nuevo elemento section viene a ser el <div id="nombre"> que llevamos usando aos y aos. Este elemento se perfila como el nuevo div agrupador de cosas, ya sean muy grandes o muy pequeas. Digamos que una pgina de noticias tendra un gran article con un primer section especial, que sera el header (o el hgroup que luego comentar), luego tendra otro gran section que vendra a ser el artculo en s, y unos cuantos ms como podran ser los elementos relacionados, fichas relacionadas, adjuntos como imgenes o vdeos en fin, que nos vamos a hartar de usar los section para cualquier agrupacin o distincin de elementos. <article> <header>...</header> <section class="noticia">...</section>

<section class="relacionados">...</section> <section class="multimedia">...</section> <footer>...</footer> </article> Como idea bsica creo que este ejemplo resume bsicamente lo que quiero explicar address Uno de los elementos que, ideolgicamente no ha variado, pero que personalmente creo que va a tomar muchsima relevancia a partir de ahora es el address. Y es que hasta ahora en este elemento se indicaban direcciones postales y cosas de este estilo pero ahora la indicacin del W3C ha variado y nos piden que no incluyamos esa informacin, sino que se utilice como elemento aadido (como un section especial) en el que se den datos de contacto del sitio entero o del article en cuestin. Como digo, es curioso que se haya dado un giro a este elemento, aunque supongo que por un tema de derechos de autor, sumado a las mejoras en cuanto a geolocalizacin y similares parece tener mucha ms lgica que antes, que casi no se utilizaba para nada nav Dentro de unos aos, cuando ejerza de abuelo contador de batallitas, podr decir que este elemento es el que provoc un cisma en el mundillo SEO. Aqu estamos, el nav, el elemento que separ a los incondicionales del pagerank, del link-juice, del link-builing y de todas esas cosas (a mi parecer sin sentido) de los que no piensan tanto en los enlaces y s en los contenidos. Este elemento es el que agrupa los enlaces. Y se vende como eso, un section especial para los enlaces, tanto salientes como internos. Aun as, no todos los enlaces han de estar agrupados en este elemento, sino slo aquellos grandes bloques que incluyan enlaces, sobre todo aquellos habituales que incluyen los trminos y condiciones, otras secciones del sitio. Y aunque probablemente aqu habra que acabar este articulo sobre los elementos que agrupan otros elementos, es curioso que hayan incluido los encabezados como elementos contenedores y no de formato. Esto dice ms de lo que parece en cuanto a la importancia de estos elementos. h1 h6 Estos elementos son los ttulos de las diferentes sections y cada h tiene un peso / ranking especfico en base al nmero que tiene, del 1 (el ms alto) al 6 (el ms bajo). Hay que

recordar que por los estndares de usabilidad y nosequms, de h1 slo puede haber uno por pgina, para que no salten las alarmas. hgroup Este es otro elemento nuevo, aunque el hgroup no acabo de entenderlo, ya que dudo que se utilice con mucha frecuencia y tambin dudo de su utilidad en todos los sentidos. En principio el elemento se define como un agrupador de h. Esto significa que los hgroupslo pueden incluir elementos de encabezado. eso s, su funcionalidad mxima es que, en cada bloque de encabezados, el ranking se resetea teniendo pero uno el de menor valor. En otras palabras, que tendramos algo como: <hgroup> <h1>...</h1> <h2>...</h2> </hgroup> ... <hgroup> <h2>...</h2> <h4>...</h4> </hgroup> El primero de los grupos tiene 2 cabeceras, el primer h1 tendra un peso de h1, y el h2tendra un peso de h2; pero en el segundo bloque, el h2 tendra un peso de h1 y el h4tendra un peso de h2 Al menos eso es lo que la teora dice pero, vuelvo a decir, no s hasta que punto tiene mucho sentido utilizar este elemento. Y ahora s, para acabar vamos a hacer un repaso de estos elementos de los que he ido hablando ahora, y para ello os dejo un ejemplo de pgina, que no deja de ser un HTML al que hay que ver el cdigo fuente, hecho exclusivamente en HTML 5. NOTA: el cdigo no est diseado, por lo que si se abre en un navegador se ver como mucho texto plano, si orden aparente en resumen, que slo sirve para ver el cdigo fuente).