Plataforma

Qué es y cómo aplicar el outline algorithm de HTML5

Qué es y cómo aplicar el outline algorithm de HTML5

HTML5, a diferencia de sus antecesores, nos permite disponer de una estructura semántica más organizada en nuestras páginas web, ayudando a jerarquizar los contenidos y posibilitando una mejor optimización del código para los motores de búsqueda. Si bien es cierto que no podemos saber el efecto exacto que tiene en los buscadores más importantes (debido a que no tenemos acceso al funcionamiento de sus algoritmos), gracias a las nuevas etiquetas de sección podemos mejorar la estructura de nuestros documentos y con ello facilitar un mejor posicionamiento SEO de nuestra web.

Aquellos desarrolladores que cambian de HTML4 o XHTML a HTML5 suelen pasar por un periodo de adaptación algo confuso por las dudas que generan algunas de las nuevas etiquetas de sección (incluso sigue siendo un debate habitual en algunas aplicaciones), y aunque esto podemos solventarlo siguiendo los ejemplos planteados en las especificaciones que nos marca el W3C, lo que suele plantearnos problemas en muchas ocasiones es la utilización de los titulares.

Las etiquetas de sección en HTML5 (<section>, <article>, <nav>…) requieren de encabezados para construir una jerarquía coherente con la estructura de nuestra web, no exactamente definida por el número de nuestro titular “h” (h1, h2, h3…), sino por el lugar que ocupan dentro de nuestro documento. Para poder insertar correctamente estos encabezados puede servirnos el patrón que marca el “outline algorithm”. A continuación vamos a revisar qué es y cómo utilizarlo.

Qué es el outline algorithm

El “esquema del documento” (document outline) es la estructura que tiene una página web formada por su cabecera, titulares, cuerpo y elementos de contenido, información que trata el agente de usuario para mostrar dichos contenidos en un navegador web o el análisis que realiza un motor de búsquedas para generar sus resultados. Este esquema se ha definido claramente en HTML5 para mejorar la semántica de los contenidos, la accesibilidad y, en definitiva, para crear una estructura más homogénea.

El “outline algorithm” podemos definirlo como el “algoritmo de esquema del documento”, y se centra en el lugar que ocupan los encabezados dentro del cuerpo de nuestro documento. Los niveles de jerarquía ya no se definen por el número del titular “h”, sino por la estructura creada a través de las etiquetas de sección. En la referencia del W3C podemos ver una explicación extendida y su implementación. Vamos a ver unos ejemplos prácticos y una herramienta de validación de la estructura que nos servirá como guía para la creación de nuestra web.

Cómo aplicar el outline algorithm

Como explicábamos anteriormente, en HTML5 existen unas etiquetas de sección que son las siguientes:

  • <article> Dentro de un documento, delimita un contenido que puede tratarse de forma independiente. Se utiliza para englobar el contenido de un artículo, noticia, servicio…
  • <section> Delimita un contenido que puede tratarse como relacionado del resto del documento. Se utiliza para crear grupos, capítulos o secciones de un contenido.
  • <nav> Delimita grupos de enlaces de navegación principal de la propia web o documento. Se utiliza para el menú principal de navegación, grupos de enlaces a artículos de la web, etc.
  • <aside> Delimita contenido no relacionado con la información o temática principal del documento. Se utiliza para englobar contenido externo o alternativo al documento, como barras laterales.

Estas etiquetas de sección requieren de encabezados para cumplir con el esquema del documento, además de la propia etiqueta body, cuyo encabezado se identifica como el titular principal de nuestro documento. Teniendo esto en cuenta, vamos a ver unos ejemplos de aplicación de titulares que cumplan con el outline algorithm.

Para ello vamos a apoyarnos con una herramienta en linea de comprobación de nuestra estructura, como es HTML5 Outliner. Esta herramienta nos permite validar documentos completos a través de enlaces o partes del código.

Para comenzar, vamos a ver un ejemplo obviando las etiquetas de sección:

<!doctype html>
<html>
    <head>
    	<title>Prueba outline algorithm</title>
    </head>
    <body>
    	<h1>Titular A</h1>
        <p>...</p>
        <h2>Titular B</h2>
        <p>...</p>
        <h3>Titular C</h3>
        <p>...</p>
        <h3>Titular C</h3>
        <p>...</p>
        <h2>Titular B</h2>
        <p>...</p>
        <h3>Titular C</h3>
        <p>...</p>
    </body>
</html>

Como podemos ver, este podría ser un ejemplo de estructura de titulares en HTML4, donde los niveles de jerarquía están definidos por el número del titular “h”, en este caso representado por las letras A, B y C. Si comprobamos este código en la herramienta de validación HTML5 Outliner, nos da el siguiente resultado:

1.Titular A
   1. Titular B
      1. Titular C
      2. Titular C
   2. Titular B
      1. Titular C

Veamos este mismo ejemplo con las etiquetas de sección:

<!doctype html>
<html>
    <head>
    	<title>Prueba outline algorithm</title>
    </head>
    <body>
    	<h1>Titular A</h1>
        <p>...</p>
    	<article>
            <h1>Titular B</h1>
            <p>...</p>                
            <section>
            	<h1>Titular C</h1>
            	<p>...</p>
            </section>
            <section>
            	<h1>Titular C</h1>
            	<p>...</p>
            </section>
        </article>
        <article>
            <h1>Titular B</h1>
            <p>...</p>
            <section>
            	<h1>Titular C</h1>
            	<p>...</p>
            </section>
        </article>
    </body>
</html>

En este caso todos los titulares de nuestro documento son h1. Sin embargo, al comprobar el código en el validador, obtenemos los mismos resultados:

1.Titular A
   1. Titular B
      1. Titular C
      2. Titular C
   2. Titular B
      1. Titular C

Esto es debido a que en este caso los niveles de jerarquía están representados por las etiquetas de sección en vez de por el número de nuestro titular. ¿Quiere decir esto que debemos olvidarnos del número de nuestros titulares?

La respuesta es no. Lo que nos permiten las etiquetas de sección, además de estructurar nuestros contenidos de forma semántica, es disponer de un nivel de jerarquía mucho más claro y potente, sin estar limitados a 6 niveles de jerarquía de los titulares “h”. Podemos utilizar el mismo código que ya hemos visto anteriormente identificando los titulares con su número para una jerarquía válida tanto para HTML4 como para HTML5, obteniendo el mismo resultado en el validador:

<!doctype html>
<html>
    <head>
    	<title>Prueba outline algorithm</title>
    </head>
    <body>
    	<h1>Titular A</h1>
        <p>...</p>
    	<article>
            <h2>Titular B</h2>
            <p>...</p>                
            <section>
            	<h3>Titular C</h3>
            	<p>...</p>
            </section>
            <section>
            	<h3>Titular C</h3>
            	<p>...</p>
            </section>
        </article>
        <article>
            <h2>Titular B</h2>
            <p>...</p>
            <section>
            	<h3>Titular C</h3>
            	<p>...</p>
            </section>
        </article>
    </body>
</html>

Como comentábamos, estas etiquetas de sección requieren de un titular para poder validar nuestra estructura. Veámos qué ocurre si al primer <article> lo dejamos sin titular y haremos lo mismo con el último <section>:

<!doctype html>
<html>
    <head>
    	<title>Prueba outline algorithm</title>
    </head>
    <body>
    	<h1>Titular A</h1>
        <p>...</p>
    	<article>
            <p>...</p>                
            <section>
            	<h3>Titular C</h3>
            	<p>...</p>
            </section>
            <section>
            	<h3>Titular C</h3>
            	<p>...</p>
            </section>
        </article>
        <article>
            <h2>Titular B</h2>
            <p>...</p>
            <section>
            	<p>...</p>
            </section>
       </article>
    </body>
</html>

Este código nos genera el siguiente resultado:

1.Titular A
    1. Untitled Section
        1. Titular C
        2. Titular C
    2. Titular B
        1. Untitled Section

Nos encontramos con que la validación nos indica que en el punto 1.1. existe una sección sin título, y en el punto 1.2.1. ocurre lo mismo. Recordar que las etiquetas de sección requieren de sus encabezados para cumplir con la estructura.

Outline algorithm VS SEO

La pregunta es… ¿los motores de búsqueda implementan este tipo de estructura? ¿Se tiene en cuenta el outline algorithm de HTML5 por las arañas web de Google, Yahoo, Bing…?

A día de hoy y hasta donde sabemos, los buscadores no valoran ni penalizan el uso de este tipo de estructura. Según un artículo de Bruce Lawson en html5doctor.com (que aunque data de 2011 parece seguir vigente), estas nuevas implementaciones podrían tener mayor valor en un futuro a medida que el uso de HTML5 se vaya extendiendo.

Por ello lo mejor es utilizar los elementos estructurales que nos brinda HTML5 con las etiquetas de sección y utilizar una jerarquía lógica en base a la importancia de nuestro contenido a la hora de aplicar el número a nuestros titulares.

Consejo a la hora de aplicar estilos CSS a titulares

Es común sobre todo en versiones anteriores a HTML5 aplicar estilos CSS directamente a los titulares según su número. Para titulares h1 creamos unos estilos, para h2 otros, etc. Teniendo en cuenta que ahora el nivel de jerarquía de los titulares no se basa tanto en el número de nuestros titulares sino más bien en el lugar que ocupan dentro de nuestro documento, podríamos tener un problema al representar sus estilos. Fijémonos en el siguiente ejemplo para comprenderlo mejor:

<!doctype html>
<style>
    h1{ font-weight:bold; font-size:2em; }
</style>
<html>
    <head>
    	<title>Prueba outline algorithm</title>
    </head>
    <body>
    	<h1>Titular A</h1>
      	<p>...</p>
    	<article>
       	    <h1>Titular B</h1>
            <p>...</p>                
        </article>
    </body>
</html>

Si hemos aplicado unos estilos CSS directamente al titular h1, la visualización de nuestra web no representaría fielmente el nivel de jerarquía de los mismos, ya que los dos tendrían el mismo aspecto.

Como consejo, es mejor aplicar estilos a los titulares mediante clases o teniendo en cuenta a los padres/hijos de nuestra maquetación. Ejemplos:

<style>
	h1.nivel1{ font-weight:bold; font-size:2em; }
	h1.nivel2{ font-weight:bold; font-size:1.5em; }
</style>
 
<style>
	h1{ font-weight:bold; font-size:2em; }
	article h1{ font-weight:bold; font-size:1.5em; }
</style>

Valora el artículo:

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (3 valoraciones, media: 5,00 sobre 5)
Cargando...
Avatar photo Juan C. Martínez Director de Arte Ver más artículos de Juan C. Martínez
Comentarios en “Qué es y cómo aplicar el outline algorithm de HTML5”
Fran says:

Un buen artículo que aporta mucha información al respecto.

Otros artículos de la categoría Diseño