Do not speak Spanish? Read this post in English.

Miércoles, 15 d febrero d 2012.

Maquetación SEO en HTML5: Div, Article, Section o Aside?

La maquetación en HTML5 poco a poco va imponiendose en el desarrollo web actual. La desgracia es que como tantas otras veces estamos haciendo las cosas más por modas que por que tengan algún sentido. Así pues, nos encontramos muchas webs que están creadas en HTML5 solo porque algún cliente o jefecillo ha decidido que quiere webs en HTML5 sin dar mayores explicaciones.

El problema que estamos teniendo realmente es que aunque parezca mentira -al menos, para el que entienda un poco de todo esto- actualmente empiezan a proliferar este tipo de webs:

  • Webs en HTML5 hechas con dreamweaver y en tablas
  • Webs en HTML5 con 200 "div"
  • Webs en HTML5 en las que simplemente se han reemplazado los 200 divs por 200 "section"

En mi opinión aun no estamos en el momento de desarrollar en HTML5, pero queda tan poco para que lo sea que empieza a ser importante que nos tomemos todo esto en serio.

Las etiquetas Html5 solo tienen una ventaja respecto a XHTML: Son semánticas de por si... si no vamos a usar esta semántica, ¿quiere alguien decirme que coño estamos haciendo?

Html semántico

Llamamos html semántico a un documento que usa correctamente las etiquetas html para que la estructura resultante, quitandole la capa de diseño, tenga sentido por si sola. Así, si yo uso 200 divs o sections en mi página por mucho que con CSS dibuje cajas y añada fondos de mil colores sin este CSS no estoy diciendo que es cada parte de mi web. Es cuando me preocupo de que cada caja del HTML tenga sentido cuando mi HTML empieza a tener significado y por tanto los buscadores van a poder entender mejor cada uno de nuestros contenidos (leer más sobre html semántico)

Las nuevas Etiquetas Semánticas HTML5

El problema del html "antiguo" es que no existían etiquetas capaces de agrupar bloques enteros y que tuviesen significado por si mismas y por eso la gente terminó usando el div como etiqueta para todo. Si bien con los atributos "role" se mejora bastante este problema, estos nunca se han usado de forma muy extendida.

Entre otras cosas HTML5 nos aporta una serie de etiquetas nuevas que permiten mejorar la semántica de nuestra página:

  • <header/>
  • <footer/>
  • <nav/>
  • <hgroup/>
  • <aside/>
  • <section/>
  • <article/>

Las 4 primeras apenas se prestan a confusión dado que a poco que nos informemos sobre ellas es difícil usarlas mal y de echo mucha gente dice maquetar en html5 solo por usar un par de ellas...

  • <header/> : Nos permite identificar la cabecera de la página (que no forma parte del contenido único)
  • <footer/> : Hace otro tanto con el footer (que tampoco forma parte del contenido único)
  • <nav/> : Nos permite marcar conjunto de links como menús y por tanto ayudar a lo sbuscadores a detectar nuestra estructura web
  • <hgroup/> : Permite agrupar titulares y nos permite jugar más con el peso de estos.

Donde empieza a encontrase un auténtico caos es en el uso del antiguo <div/> y sus nuevos hermanos con significado semántico: <section/> y <article/>

Como siempre es suficiente con mirar un poco la documentación y poner un poco de lógica en todo esto. Por ese motivo me gustaría repasar su uso, a ver si puedo poner mi granito de arena en que el estándar triunfe y no se pervierta... (por soñar).

Uso de <div/> en HTML5 orientado a SEO

La etiqueta div no ha muerto, sigue ahí y sigue significando lo que siempre ha significado: conjunto de elementos. En ningún momento se ha transformado a una etiqueta "tonta" que puedas usar libremente para ayudarte con el CSS ni ha sido sustituida totalmente por la etiqueta <section/>.

Por lo tanto nuestro deber es usarla como ayuda a la estructura de página: como base para crear el layout de de nuestras páginas, siempre y cuando no exista otra etiqueta de conjunto que represente mejor este papel... En otras palabras, div es la herramienta para unir elementos cuando no podemos asociar significado semántico a este conjunto.

Uso de <section/> en HTML5 orientado a SEO

El uso de seción es muy parecido al de div pero aportando la carga de significado mínima posible al contenido. Englobando distintos elmentos dentro de una etiqueta <section/> lo que estamos haciendo es declarar que todo su contenido está relacionado y forma parte de un mismo significado o elemento.

La diferencia es sutil pero muy importante: cuando creamos bloques cuyo contenido forma un todo usaremos <section/>, cuando estos bloques responden más a diseño o a necesidades de estructura usaremos <div/>.

Esta diferenciación también provoca que en todas estas maquetas que usan 200 divs para conseguir que con pocos conociemientos de CSS el diseño tome forma no pasan a estar bien hechas, pero si que podemos decir que en html5 estan "menos mal" (dado que al menos hemos marcado con sections los conjuntos que si que tienen significado sin liar tanto a los buscadores).

Uso de <article/> en HTML5 orientado a SEO

Por último la etiqueta <article/> es el siguiente paso a la hora de declarar que un cojunto de elmentos en nuestra página tiene significado. En este caso el paso dado es el dar a entender que ese conjunto tiene significado claro incluso si lo sacamos totalmente de la página. Es decir, al incluir algo dentro dentro de la etiqueta <article/> lo que estamos diciéndole a los buscadores es que dentro de este article podrá encontrar contenidos únicos con su propio significado.

Esto nos lleva casi siempre a que en páginas normales nuestro contenido será el único <article/> de la página y en páginas con listados de elementos tendremos un <article/> por cada elmento del listado (que si queremos identificar bien, tendrá un link con rel="bookmark" hacia el contenido real).

Para que la etiqueta article termine de entenderse comentar que idealmente esta al ser un contenido con significado propio podría contener en su interior etiquetas <header/>, <section/>, <aside/> y <footer/> ya que... al ser contenido propio, ¿porque no pueden tener sus mismas carácteristicas?

Uso de <aside/> en HTML5 orientado a SEO

Por ultimo nos queda la etiqueta aside que viene a ser una etiqueta <section/> venida a menos. Y es que aside sirve para indicar que ese bloque es solo un añadido a los bloques que tiene al lado. Son datos extra sin lo que podríamos pasar perfectamente pero que hemos decidido añadir en el documento.

Así pues, un <aside/> como hijo de la etiqueta <body/> nos dice que se trata de un contenido añadido por temas que no tienen nada que ver con el contenido de página (normalmetne esas columnas laterales llenas de tags y banners). Cuando lo incluimos dentro de un <article/> nos indica que esa información complementa el artículo pero no forma parte de él (listas de datos, testimoniales, banners relacionados, etc...).

Un ejemplo práctico de uso de etiquetas contenedoras

Imáginemos una página con:

- Su Cabecera con logo y con menú de navegación.
- Justo debajo El contenido que debes leer, con una serie de datos de referencia sobre este contenido.
- Y para terminar dos bloques en 2 columnas que el diseñador ha incluido, debajo que hablan de contenidos de forma libre y poco controlada.

Nuestra maqueta html5 partiría de lo siguiente:

<body>
<header>
  <p class="logo"><a href="...">...</a></p>
  <nav><ul>
    <li><a href ... </li>
    [etc...]
  </ul></nav>
</header>
<article>
  <header>
    <hgroup><h1>Mi titulo</h1><h3>Mi subtítulo</h3></hgroup>
  </header>
  <section>
    <p>Contenido contenido contenido</p>
  </section>
  <aside>
    <p>Datos extra para completar el contenido</p>
  </aside>
</article>
<div class="blocks">
  <section>
    <hgroup><h2>Bloque 1 que nos ha puesto el diseñador</h2></hgroup>
    <ul><li>...</li></ul>
  </section>
  <section>
    <hgroup><h2>Bloque 2 que nos ha puesto el diseñador</h2></hgroup>
    <ul><li>...</li></ul>
  </section>
</div>
<footer>
<ul><li><a href="... [links del footer]</li></ul>
</footer>

Temas Relacionados: maquetacion seo

Autor:

24 Comentarios para “Maquetación SEO en HTML5: Div, Article, Section o Aside?”

  1. Ricardo dice:

    Grande Iñaki, eres muy grande, si lo explicas mejor revientas, de todas formas coincidido contigo en que todavia no es el momento de utilizar html5 como un estandar, ya que todavia no esta declarado como tal.

    Aunque como programador debo decir que ya lo utilizo en mis proyectos personales, pero es mas que nada por esa incontinencia que tenemos los programadores a probar todo lo nuevo lo antes posible ;).

    Un saludo

  2. Msarmiento dice:

    buen artículo, pero me queda la duda de en qué momento podremos incluir estos elementos a los sitios que posicinamos, por lo que tengo entendido ie7 no interpreta estas etiquetas y no le podemos dar estilos. Si sumamos la cantidad de gente que todavía tiene ie6 ... ainssss

  3. ikhuerta dice:

    Buenas,

    No comenté esa parte porque eso es más ténico que semántica y/o SEO.

    Pero ese problema tiene fácil solución y no con mucha carga extra:

    1) Añadimimos un script en un tag condicional de explorer menor de 9:

    <!--[if lt IE 9]><script type="text/javascript" src="/js/iehtml5hacks.js"></script><![endif]-->
    

    2) Dentro de ese js obligamos a explorer a que tenga en cuenta ese tipo de elementos:

    var newels = ['nav','header','footer','section','article','aside','hgroup'];
    for(i in newels){document.createElement(newels[i]) };
    
  4. René dice:

    Pienso que ya basta se seguir prestandole soporte a IE6, si continúan viendo cómo podría incorporarse tal o cual etiqueta, no van a dejar nuca que muera esa versión. Olvídense de IE6, en el mundo un porcentaje mínimo. Ya estamos en IE9 y alas puertas IE10 y ustedes siguen preguntando por un anciano decrépito con respiración artificial porque ustedes desean mantenerlo vivo. MÁTENLO DE UNA VEZ. si realmente son desarrolladores NO SE QUEDEN EN EL PASADO. Hoy nadie hace web para IE6. POR FAVOR. Si ustedes deja de dar soporte a IE6 la gente tendrá que actualizarse. Ni mi abuelo usa IE6...POR FAVOR !! son desarroladores web o doctores ?
    Alguien escribió: "si sumamos la gente que aún usa IE6"... por esa gente no vale la pena quedarse en el pasado.

    Muy buen artículo, excelente.

  5. Marlene dice:

    Excelente post Iñaki! para leer en algunas empresas que ahora piden expertos de htlm5 con 2 años de experiencia... así va el diseño web!

  6. Juani dice:

    Iñaki, no me queda claro un par de cosas:
    ¿Por que utilizas la etiqueta dentro del div "Blocks" que solo agrupa un h2? ¿No se utiliza para agrupar varios h?
    ¿que piensas de agregar un antes del para dividirlo respecto a un sidebar?
    ¿El contenido del , no puede ser un aside?

    Gran post y lo voy a usar en el rediseño que estoy haciendo de mi sitio.
    Saludos

    • ikhuerta dice:

      BUenas, se perdieron parte de los contenidos por usar etiquetas :( Asi que hay partes de tus preguntas que no entendí :(

      Sobre la primera pregunta. hgroup no solo sirve para agrupar varios elementos Hx en un conjunto sino para indicar que esa es la cabecera de esa seccion. De esta forma al usar hgroup indico que me refiero al titulo de ese section y no del documento, pero al usar un h2 en lugar de un h1 le quito importancia global en terminos de seo a la antigua (como aun no sabemos con certeza como rastrea google mejor seguir ambos patrones de importancia a la vez).

      Sobre otras etiquetas, el ejemplo es muy basico... con un disño concreto seguramente alguna cosa quedaría más clara sobre cual es la etiqueta correcta para indicarlo. Piensa que además busque un ejemplo sencillo pero que usase todos los elementos comentados.

  7. Martín dice:

    Hola @ikhuerta

    Encuentro que tu post está super bueno y además abre un tremendo debate.
    Fíjate que el tema que estás tocando es algo que aun no está bien definido en la comunidad de desarrolladores web. De hecho en el tiempo que llevo desarrollando y teniendo contacto con desarrolladores claramente me muestra que todos tenemos la duda respecto a este tema. Si bien existe documentación relacionada al tema, la verdad es que es complicado dar con ella y por lo tanto todo el mundo comienza a experimentar con el código y a trabajar como a cada quien le apetezca. Puntualmente cuando yo partí con desarrollo en HTML5 tenía una serie de confusiones, las cuales se me fueron resolviendo con el tiempo tras revisar documentación, iniciar threads en foros de desarrollo y conversando con alguna que otra cantidad de expertos a través de twitter.
    En el punto que tocas del código de ejemplo, creo que estoy un poco en desacuerdo con la estructura que explicas. Voy a citar algunas líneas de tu artículo para ver si podemos razonar juntos:

    "El uso de seción es muy parecido al de div pero aportando la carga de significado mínima posible al contenido. Englobando distintos elmentos dentro de una etiqueta lo que estamos haciendo es declarar que todo su contenido está relacionado y forma parte de un mismo significado o elemento."

    Es este caso puntual en donde hay muchísimas dudas respecto al orden de este tag.

    Si bien el tag es muy parecido al div, también ayuda a separar el artículo, de tal manera que se pueda realizar una especie de índice o algo similar.
    Section, como en el ejemplo citado no significa nada.
    Aplicado correctamente se puede apreciar como.

    ======================
    Section title
    Content
    =================
    (donde section = al contenedor del contenido relacionado por los artículos)
    =================

    En resumen:

    Section es un elemento de segmentación que puede contener elementos flotantes como y y además permite realizar una clasificación de contenido de manera ordenada.

    Véase más info en: http://dev.w3.org/html5/markup/

    Felicitaciones por el post.

    • ikhuerta dice:

      Una lastima que el codigo HTML que indicabas no se haya guardado... :( me hubiese servido para terminar de entender tu exposición que se queda incompleta sin el mismo. Quizás con un "pre" entre?

      Section es sin duda el elemento más dificil de aplicar de las nuevas etiquetas contenedoras de HTML5... Por mi parte y hasta que me demuestren lo contrario voy a seguir usándolo como elemento que aporta significado de unificación de bloque. En una maqueta perfecta deberia poder representar un indice como tu dices, pero en la realidad nos encontraremos con etiquetas relacionadas con la estructura de diseño y otras con la estructura del contenido. Para mi esta claro que section no tiene que aparecer nunca en las de diseño y en este mismo ejemplo hay cosas discutibles... para que un article con un unico section? Necesita todo article header? Pero entiende que es justo eso... un ejemplo en el que habia que dar salida con poco contenido a todo lo comentado.

      Disculpa si no te referias a eso, sin el html es difícil entender el final del comentario.

  8. el flaco dice:

    EXCELENTE... ME ENCANTO EL ARTICULO DE VERDAD!!!
    MÁS CLARO Y CONTUNDENTE IMPOSIBLE!
    FELICIDADES!

  9. Iñigo dice:

    Hola

    El principal problema es que HTML5/css3 ni siquiera son oficiales...

    Por tanto si quieres ir por delante tendrás que dejar de lado navegadores que actualmente usa MUCHA, MUCHA gente...

    O como comentáis crear filtros de navegador, Hacks y demás.... Que son muy útiles pero puede eternizar un proyecto...

    Os dejo unas herramientas para intentar que todo se vea parecido, saludos:

    http://www.modernizr.com/
    http://css3pie.com/
    http://selectivizr.com/
    http://raphaeljs.com/
    http://socket.io/

  10. Hernán Aguilar dice:

    Me gustaria que gente experta en html5 y css3 se ponga en contacto conmigo. Tengo varios proyectos para desarrollar y necesito profesionales.

    Mi skype name es: joomlaargentina

    Saluos
    Hernán Aguilar

  11. Kiko dice:

    Me ha encantado tu articulo, lo explicas todo bastante bien, estaba pensando k cuando tenga un rato libre (... En mil años...) queria reversionar mi web y crear la nueva en html5 cn mis animaciones en css3 y jquery. De momento estaba implementando ordenes en css3 poco a poco en las webs k voy haciendo, pero no habia dado el salto a html5 puro por que muchos de mis clientes superan los 50 años y usan explorer 7, a los de ie6 directamente les recomiendo chrome y les digo k es lo mas, jajaj. Buen post.

  12. Berto dice:

    Muy buena explicación, me gusta mucho el enfoque SEO.
    Estoy de acuerdo en que en algunas empresas se trabaja por modas en lugar de ir a lo realmente eficiente. Soy proveedor de páginas web y la mayoría de las empresas con las que trabajo y hay pocas realmente tengan personalidad en este sentido. [editado para eliminar link de promoción]

  13. Juan HD dice:

    Muy agradecido por toda esta valiosa información y la forma amena que utilizas para contarlo.
    Mi web necesita un repasito...

  14. Juan Antonio dice:

    Buen artículo, lo tendré en cuenta si alguien intenta venderme html5

  15. Paco dice:

    Da gusto ver que no todo el mundo en la web es necio. Gran explicación.

  16. osmar dice:

    yo pienso ke es bueno comenzar a familiarizarnos con el lenguaje ahora ke no esta muy extenso, y sobre todo empezar a maquetar con html5, por el simple echo de que ala hora de dar amntenimiento es mas facil encontrar el contenido, que buscar entre un mar de divs.. vamos estructuramos mejor los elementos.. de todas formas no es malo comenzar a experimentar con html5 ya ke aunke no es un estandar apunta a serlo, como fue la web 2.0 con html v.3.0 no recuerdo.. hablamos ke en un cercano futuro html5 formara parte de las paginas de ultima generacion.. saludo

  17. osmar dice:

    se me olvidave decir, precisamente por eso css3 surge como necesidad de html5, ya ke juntos, resultan ser el complemento perfecto.. yo seguire al tanto de html5, otros lenguajes si se pueden decir moda.. como rubyrails etc,

  18. Mauricio dice:

    Pero hay algo esencial que todavía no logro comprender claramente, como le doy estilo a un header?? por ejemplo, a esto que extraje del ejemplo expuesto:

    ...

    <a href ...
    [etc...]

    Se habla de class="logo", entiendo que con esto se llama a una imagen, márgenes, colores y otros según se determine en esta clase, pero como le doy propiedades al sin usar div??? Espero me puedan explicar. Gracias.

    • ikhuerta dice:

      Eso es tarea del CSS. Deberías aprender bien esa tecnología para aprender a dar estilos a un tu maqueta sin ayudas extra.

      Por ejemplo.

      Un header en css sería simplemente:

      header { /* tus estilos */ }

      dentro de este header un P con la class="logo" sería

      header p.logo { /* tus estilos */ }

  19. Reinhard Heydrich dice:

    Muy bueno. Muy bien explicado y con buenos razonamientos que muchos de nosotros pensabamos pero no estabamos seguros. Y recalcar que es de mucha utilidad que se hagan estos artículos ya que aunque html5 todavía no este tan metido en la programación web hay que ir definiendo conceptos.

  20. Cmorales dice:

    Muy buen artículo. Sobre el tema de si HTML5/CSS3 se puede usar o no se puede usar, yo creo que hay que dejar de verlo como un todo y verlo por bloques, que es como el W3C lo está tratando: en lugar de esperar al ¿infinito? para empezar a usar TODO cuando esté aprobado oficialmente, podemos empezar a usar las PARTES ya aprobadas sin miedo.

    Un saludo

Anímate y deja tu comentario

Esto son experimentos, no preguntes ;) prueba metadescription Prueba title