El outline algorithm de HTML5

Ramón Saquete

Escrito por Ramón Saquete

Muchos dicen que el outline algorithm, no vale para nada, ya que actualmente no lo implementa ningún navegador y es posible que no tenga ningún efecto en el SEO. Ni siquiera hay indicios de que esta situación vaya a cambiar en un futuro. Sin embargo, es muy importante conocerlo porque contiene los fundamentos que permiten entender cómo se debe escribir código HTML5 correctamente, mejorando en consecuencia, la estructura semántica, el SEO y la usabilidad en lectores de pantalla.

En HTML4 la jerarquía de encabezados de una página viene dada por las etiquetas h1, h2, h3, h4, h5 y h6. En HTML5 es distinto, el nivel que ocupa cada encabezado en la jerarquía no viene dado principalmente por el número que acompaña a cada “h”, sino por el lugar que ocupa dentro del documento cada encabezado y las etiquetas que los envuelven. Es una idea que tiene su origen en la especificación descartada del XHTML2 y que ha servido de base para el desarrollo de HTML5 y que tiene un par de ventajas importantes: primero podemos disponer de infinidad de niveles de encabezado, no sólo seis, y en segundo lugar, podemos crear componentes que independientemente de que tengan un h1, h2, h3, etc. sus encabezados siempre ocuparán el nivel de la jerarquía que le corresponde dentro de la página que lo incluye, esto último cobra especial importancia a la hora de reutilizar código, en donde podemos tener encabezados de cualquier nivel, y es aplicable a widgets, plugins de CMS’s y a los Web Components sobre los que ya escribiré próximamente.

Antes de entrar de lleno en el algoritmo veamos algunos conceptos básicos de HTML5:

Elementos de sección raíz

Son elementos que se puede considerar que contienen documentos independientes. Estos elementos son:

  • <body>: ya lo conocéis, contiene el documento HTML
  • <blockquote>: contenido de otra fuente
  • <fieldset>: grupo de controles de formulario
  • <figure>: se usa para ilustraciones, diagramas, código, etc.
  • <td>: celda de una tabla

Elementos de sección de contenido

Son elementos que definen secciones dentro del elemento de sección raíz actual o dentro de otras secciones de contenido. Cada sección puede contener un elemento header y footer. A continuación tenéis una explicación muy breve de estos elementos:

    • <article>: es una parte del documento que se puede entender y distribuir de forma independiente sin tener que leer otras partes del documento. Suelen ser artículos de blog, productos, etc.
    • <section>: es una parte del documento que guarda relación con otras partes del documento. Se usa para formar una agrupación de partes de un mismo tema.
    • <aside>: es una parte del documento con información no relacionada o transversal respecto al tema principal. Normalmente se usa para las barras laterales.
    • <nav>: es una parte del documento con enlaces de navegación principal, que llevan a otras páginas o partes de la misma página.

Tened cuidado con la etiqueda <main>. Aunque lo pueda parecer, esta etiqueta NO es un elemento de sección de contenido: se usa para enmarcar el contenido principal de la página, que suele ser aquella parte del contenido que cambia cuando navegamos de una página a otra.

Con esto ya tenemos la base para entender cómo funciona el “outline algorithm” que podríamos traducir libremente por algoritmo de encabezados.

Outline algorithm

Todo lo que he explicado y lo que voy a exponer a continuación, lo podéis encontrar también en inglés y de forma mucho más extendida, incluso con implementaciones del algoritmo, en la especificación del HTML «el estándar vivo» del WHATWG.

<body>
 <h1>A</h1>
 <p>B</p>
 <h2>C</h2>
 <p>D</p>
 <h2>E</h2>
 <p>F</p>
 <h3>G</h3>
 <p>H</p>
</body>

Puesto que este es un documento sin una estructura semántica clara, el algoritmo de encabezados tiene que recurrir a los números de las etiquetas «h» para suponer que secciones tiene el documento. La estructura sería así: <h1>A</h1> y el párrafo B, dentro el algoritmo crea tres secciones implícitas, en el segundo nivel del documento una con <h2>C</h2> <p>D</p> y otra con <h2>E</h2> <p>F</p>, y dentro de esta última <h3>G</h2> <p>H</p>. Estructura:

      1. <h1>A</h1>
        1. <h2>C</h2>
        2. <h2>E</h2>
          1. <h3>G</h3>

Podemos conseguir la misma estructura de encabezados usando elementos de sección de contenido:

<body>
 <h1>A</h1>
 <p>B</p>
 <section>
   <h1>C</h1>
   <p>D</p>
 </section>
 <section>
   <h1>E</h1>
   <p>F</p>
   <section>
    <h1>G</h1>
    <p>H</p>
   </section>
 </section>
</body>

De esta forma el algoritmo sabe que nivel ocupa cada encabezado dependiendo del número de elementos de sección padre que tenga, haciendo caso omiso al número que tenga cada «h».

A la hora de escribir código HTML5, siempre que escribamos un título con una etiqueta «h», es una buena práctica englobar lo que estamos escribiendo dentro de un elemento de sección.

Para que el código sea compatible tanto con HTML4 como con HTML5, podemos darle a cada etiqueta «h» el número que realmente le otorga el algoritmo en HTML5:

<body>
 <h1>A</h1>
 <p>B</p>
 <section>
   <h2>C</h2>
   <p>D</p>
 </section>
 <section>
   <h2>E</h2>
   <p>F</p>
   <section>
    <h3>G</h3>
    <p>H</p>
   </section>
 </section>
</body>

 

Este último ejemplo, sería el más correcto. Si aquí dejáramos algún un elemento de sección sin título, el navegador podría otorgarle un título genérico como por ejemplo «Sección» o «Sidebar», así que también es recomendable ponerle título a los elementos de sección.¡

Veamos más ejemplos:

<body>
<h1>A</h1>
<p>B</p>
<h1>C</h1>
<p>D</p>
<h1>E</h1>
<p>F</p>
</body>

En este caso se considera que el documento principal está divido en tres partes que tienen el mismo nivel, esto es algo que Google ha permitido antes de la aparición del HTML5. Estructura:

      1. A
      2. C
      3. E

Para no cometer errores también es importante tener en cuenta la siguiente regla:

Los encabezados nunca se elevan por encima de otras secciones.

Veamos un ejemplo para entenderlo, ¿cuál dirías que es el encabezado principal o h1 del siguiente documento?:

<body>
<section>
 <h1>A</h1>
 <p>B</p>
</section>
<h1>C</h1>
<p>D</p>
</body>

 

¿Has respondido que el documento no tiene ningún encabezado principal? Probablemente no, pero si es así, entonces has acertado, ya que la estructura queda así:

      1. (sin título)
        1. A
      2. C

Lo que ocurre es que al haber puesto el título principal después de una sección, éste no puede elevarse por encima, creándose una segunda parte del documento con el título que pensábamos que iba a ser el principal. Veamos otro ejemplo:

<!DOCTYPE HTML>
<title>título de página</title>
...

<h1>título del documento</h1>

<main>
 <article>
<header>
  <nav>
   <a href="?t=-1d">enlace 1</a>;
   <a href="?t=-7d">enlace 2</a>;
   <a href="?t=-1m">enlace 3</a>
  </nav> 
</header>
  <h2>título conflictivo</h2>

  <p>texto</p>
</article> 
</main>
...

En este caso tenemos un elemento article sin su título porque éste aparece después de una sección nav. La estructura sería la siguiente:

      1. título del documento
        1. (Artículo sin título)
          1. (Sección de navegación sin título)
        2. título conflictivo

Para finalizar tener en cuenta que los elementos de sección raíz crean documentos independientes, ejemplo:

 <blockquote>  <h2>título</h2>  <blockquote>

En este caso el h2 en realidad sería un h1 fuera de la jerarquía del documento en el que se encuentra.

Espero que con este artículo os haya aclarado un poco cómo se debe escribir código HTML5.

Twittear
Compartir
Pin
Compartir
  •  | 
    • Modificado el
Ramón Saquete
Ramón Saquete
Desarrollador web y consultor SEO técnico en Human Level. Graduado en Ingeniería Informática e Ingeniería Técnica en Informática de Sistemas. También es Técnico Superior en Desarrollo de Aplicaciones Informáticas y posteriormente obtuvo la Certificación de Aptitud Pedagógica. Experto en WPO e indexabilidad.

Tags

2 comentarios

¿Y tú qué opinas? Deja un comentario

Por si acaso, tu email no se mostrará ;)

  1. Hola,
    Me alegra que te haya gustado.
    Respecto a tus preguntas:
    1. Sí, mejor en el aside, ya que es contenido transversal al contenido principal de la página.
    2. Su uso depende de la interpretación que hagas de tus contenidos. Por ejemplo, si crees que la lista de servicios que ofrece la empresa no se pueden entender por separado, usa section. En cambio, si son servicios independientes, usa article.
    3. Nav es para elementos de navegación, no debería contener formularios.
    4 y 5. Los botones de compartir y likes conseguidos en redes sociales no son elementos de navegación (enlaces que te lleven a otra página) a si que no deberían llevar la etiqueta nav.

    A parte de las especificaciones, una buena web para resolver dudas de HTML5 es html5doctor.com

    Saludos

    Responder

  2. Hola!

    Me ha encantado en post. Tengo un par de dudas:

    -la publicidad y las recomendaciones q apuntan a otras urls…mejor en aside?
    -q meteriais en section? No veo clara su utilidad.
    -nav debe contener solo formularios, solo links o ambas cosas?
    -los botones de compartir en redes sociales mejor en nav o sueltos?
    -los likes y shares conseguidos en redes sociales donde encajarian mas?

    Tengo pendiente encontrar una web q lo clave para tomarla como referencia! 🙂

    Responder

Entradas relacionadas

es