De una forma muy resumida, tendríamos que:
Estructura básica con HTML 3
Estructura básica con HTML 5
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 usarán para indicar el bloque contenedor de la cabecera (bloque superior de información) que suele haber siempre en las páginas, también se puede usar en otros puntos del sitio.
footer
El elemento footer va a ser muy parecido al header anterior, aunque quizá sí que tenga más utilidades que no el otro… Básicamente se ha incluido como agrupador de elemento al final de otro… Por norma general los sitios web tienen un pie de página en el que se indican datos legales y similares, y esta podría ser la principal función, aunque no está pensado para que sea la única.
article
El nuevo elemento article va a revolucionar los contenedores y el SEO. Este elemento viene a ser el “contenedor” de lo que es importante en la página. Puede haber varios y es el agrupador de lo que vendría a ser “lo indexable” por un buscador…
De todas formas, aunque al principio parecía que el elemento section iba a ser el que agrupase los contenidos, he llegado a la conclusión por los ejemplos que está lanzando la W3C que no es así, que el gran contenedor de información útil es el article.
El elemento footer va a ser muy parecido al header anterior, aunque quizá sí que tenga más utilidades que no el otro… Básicamente se ha incluido como agrupador de elemento al final de otro… Por norma general los sitios web tienen un pie de página en el que se indican datos legales y similares, y esta podría ser la principal función, aunque no está pensado para que sea la única.
El nuevo elemento article va a revolucionar los contenedores y el SEO. Este elemento viene a ser el “contenedor” de lo que es importante en la página. Puede haber varios y es el agrupador de lo que vendría a ser “lo indexable” por un buscador…
De todas formas, aunque al principio parecía que el elemento section iba a ser el que agrupase los contenidos, he llegado a la conclusión por los ejemplos que está lanzando la W3C que no es así, que el gran contenedor de información útil es el article.
Para hacernos una idea básica, una página tendría este formato:
<body>
<header>...</header>
<article>...</article>
<article>...</article>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>
Esto daría a entender que hay 3 bloques de información principales en el sitio, que son los contenidos que el usuario ha de contemplar, además de una cabecera, un menú lateral y un pie de página… Que conste que este ejemplo es muy básico… luego intentaré poner algo más trabajado, al final del artículo, cuando haya explicado todos los elementos.
Dentro del article encontraríamos elementos como un header, un footer y varios section, que comentaré en un momento…
<body>
<header>...</header>
<article>...</article>
<article>...</article>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>
Esto daría a entender que hay 3 bloques de información principales en el sitio, que son los contenidos que el usuario ha de contemplar, además de una cabecera, un menú lateral y un pie de página… Que conste que este ejemplo es muy básico… luego intentaré poner algo más trabajado, al final del artículo, cuando haya explicado todos los elementos.
Dentro del article encontraríamos 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 navegación del sitio web, las categorías, opciones o como queramos llamarlo…
Como he puesto en los gráficos anteriores, vendrían a ser el contenido que, página a página dentro del sitio web se repite junto a la cabecera y el pie) e intuyo que los buscadores le darán menos peso a este bloque ya que notarán que es “contenido duplicado” y que no tiene utilidad a la hora de posicionar.
Y la verdad es que poco más a decir de este elemento… simplemente que es un agrupador y que estará lleno de sections.
section
El nuevo elemento section viene a ser el <div id="nombre"> que llevamos usando años y años.
Este elemento se perfila como el nuevo div agrupador de cosas, ya sean muy grandes o muy pequeñas. Digamos que una página de noticias tendría un gran article con un primer section especial, que sería el header (o el hgroup que luego comentaré), luego tendría otro gran section que vendría a ser el artículo en sí, y unos cuantos más como podrían ser los elementos relacionados, fichas relacionadas, adjuntos como imágenes o vídeos… en fin, que nos vamos a hartar de usar los section para cualquier agrupación o distinción de elementos.
<article>
<header>...</header>
<section class="noticia">...</section>
<section class="relacionados">...</section>
<section class="multimedia">...</section>
<footer>...</footer>
</article>
address
Uno de los elementos que, ideológicamente no ha variado, pero que personalmente creo que va a tomar muchísima 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 indicación del W3C ha variado y nos piden que no incluyamos esa información, sino que se utilice como elemento añadido (como unsection especial) en el que se den datos de contacto del sitio entero o del article en cuestión.
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 geolocalización y similares parece tener mucha más lógica que antes, que casi no se utilizaba para nada…
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 sólo aquellos grandes bloques que incluyan enlaces, sobre todo aquellos habituales que incluyen los términos y condiciones, otras secciones del sitio.
Y aunque probablemente aquí habría 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 más de lo que parece en cuanto a la importancia de estos elementos.
Estos elementos son los títulos de las diferentes sections y cada h tiene un peso / ranking específico en base al número que tiene, del 1 (el más alto) al 6 (el más bajo). Hay que recordar que por los estándares de usabilidad y nosequémás, de h1 sólo puede haber uno por página, 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 también dudo de su utilidad en todos los sentidos.
En principio el elemento se define como un agrupador de h. Esto significa que los hgroup sólo pueden incluir elementos de encabezado. eso sí, su funcionalidad máxima es que, en cada bloque de encabezados, el ranking se resetea teniendo pero “uno” el de menor valor. En otras palabras, que tendríamos 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 tendría un peso de h1, y el h2 tendría un peso de h2; pero en el segundo bloque, el h2 tendría un peso de h1 y el h4 tendría un peso de h2… Al menos eso es lo que la teoría dice… pero, vuelvo a decir, no sé hasta que punto tiene mucho sentido utilizar este elemento.
No hay comentarios:
Publicar un comentario