Chequea la jerarquía y estructura con HTML5 Outliner

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:

headings

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í:

headings and sections

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í:

secciones - ejemplo

Y una estructura así:

secciones - ejemplo resultado

EasyBacklink

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.

 

 

Comentarios

Comenta