HTML5 esta ligado por su carácter semántico con SEO, ¿como? a los ojos de un robot o una araña, la web no es mas que texto sin sentido.
Con el uso del DIV que se popularizo en HTML 4 y XHTML era difícil saber si un texto era una noticia, una persona o una dirección.
Con los microformatos se empezó a dar forma al contenido, pero con la llegada de HTML5 muchos otros datos y contenido pueden ser definidos. HTML5 ademas de ser semántico, también se enfoca bastante en la accesibilidad, esto nos lleva a diseñar o pensar de forma diferente las paginas web.
La jerarquía de una pagina web es muy importante ya que define el esqueleto o estructura base la cual ayuda a los diversos navegadores a saber como presentar el contenido correctamente, por ejemplo, para una persona con problemas visuales se podría hacer una lectura auditiva de la pagina, y si la estructura no esta bien diseñada pues esta persona difícilmente podría navegar en dicho sitio.
Para chequear nuestra jerarquía y estructura interna, existen varias extensiones para los diferentes navegadores; hoy vengo a presentarles «HTML5 Outliner» el cual es una extensión para Chrome, Firefox y Opera, tambien puedes usar el sitio web HTML 5 Outliner donde puedes subir un archivo HTML o poner la URL de tu sitio web donde analizara y presentara la estructura jerárquica encontrada.
Hablemos de la estructura y jerarquía de una Web
Esto esta relacionado con las buenas practicas en la estructura web con HTML5, y se refiere al correcto uso de las etiquetas <section>, <article>, <nav>, <aside>, particularmente hablando de su relacion con los encabezados <h1>…<h6>.
Los encabezados definen una jerarquía y dicha jerarquia puede ser utilizada para bosquejar el contenido, observa el código del siguiente ejemplo:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Titulo de la pagina</title> </head> <body> <h1>Esto es encabezado H1</h1> <h2>Esto es encabezado H2</h2> <h3>Esto es encabezado H3</h3> <h4>Esto es encabezado H4</h4> <h5>Esto es encabezado H5</h5> <h6>Esto es encabezado H6</h6> </body> </html>
Esto nos da el siguiente esqueleto:
En este ejemplo no hemos utilizado ni la etiqueta <section> ni <article>, ahora veamos como utilizando dichas etiquetas podemos mejorar nuestra estructura, veamos el siguiente ejemplo:
<body>
<section>
<h1>Este es el H1 de una seccion explicita (declaramos la seccion)</h1>
...
<h2>Este es un encabezado H2 de la misma seccion (pero un rango menor)</h2>
....
<h1>Este H1 inicia una seccion implicitamente (sin declarar una seccion) en una seccion explicita (es de igual o mayor rango)
...
<h2>Este es el H2 de la seccion recien iniciada</h2>
...
</section>
</body>
Nos daría una estructura así:
Como se puede observar, hay una mejor estructura, ahora veamos un ejemplo un poco mas completo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Titulo de la pagina</title>
</head>
<body>
<h1>Acerca de Harold</h1>
<section>
<h2>Mi trabajo</h2>
Trabajo con computadoras
</section>
<section>
<h2>Mis Hobbies</h2>
Tocar guitarra, leer, cine, viajar
</section>
<section>
<h2>¿Como contactarme?</h2>
Twitter: @harold_crow
Facebook: https://www.facebook.com/harold.stanley.crow
</section>
</body>
</html>
Este código nos mostraría la pagina algo así:
Y una estructura así:
Como ven, es muy importante tener una buena estructura en nuestro HTML para que nuestro SEO mejore, ya que todo esta lectura la hace correctamente un robot y por supuesto que es mas atractivo para los buscadores los sitios así.
Espero haberme hecho explicar y si hay dudas o comentarios, o si crees que estoy equivocado en algo, no dudes en contactarme u opinar, todo es valido menos el SPAM. Hasta la próxima.
