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.

 

 

¿Te ha sido útil este contenido?

¡Haz clic para puntuar!

Promedio de puntuación 5 / 5. Recuento de votos: 2

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Déjame mejorar este contenido!

Dime, ¿cómo puedo mejorar este contenido?

Comentarios

Comenta