Esquema (outline)

El esquema (outline) de una página web es un índice de los apartados de una página web que muestra la relación de jerarquía entre los diferentes apartados y subapartados. El concepto de esquema se ha formalizado en HTML 5 con más precisión que en HTML 4 / XHTML 1 y explica explica algunas características y formas de utilización de las etiquetas de secciones y bloques de contenido.

¡Atención!Actualmente (noviembre de 2016) ningún navegador ha incluido algoritmos para analizar el esquema (outline) de una página web, aunque el validador del W3C sí que lo hace. Por ello, la recomendación HTML 5.1 (publicada en noviembre de 2016) aconseja a los autores de páginas web seguir indicando la estructura de la página mediante las etiquetas de título <h1>, ..., <h6> (véase el aviso en la propia recomendación).

Notas:

Esquema (outline) de una página web HTML 4 / XHTML 1

En HTML 4 / XHTML 1 no existía el concepto de esquema de una página web. Las únicas etiquetas que nos podían dar una idea de la estructura de una página web eran las etiquetas de título (<h1>, <h2>, etc.). Al utilizar títulos de menor jerarquía, se podía deducir que unas partes eran subapartados de otras. Por eso, una página HTML 4 / XHTML 1 debía tener un único título <h1>, sus apartados tener títulos <h2>, los subapartados de estos apartados tener títulos <h3>, y así sucesivamente.

El ejemplo siguiente muestra como los elementos <h1>, ..., <h6> definen el comienzo y el final de los apartados, sin necesidad de que haya etiquetas que engloben los apartados. Los títulos están representados con un trazo conínuo, mientras que las secciones definidas de forma implícita por los títulos están representadas con un trazo discontínuo.

h1 h2 h3 h3 h2 h3 h3

Este sistema es suficiente para páginas sueltas, pero no permite la reutilización de contenidos en otras páginas. Es decir, si se cogen partes de unas páginas (con sus títulos) y se unen en otra página sin modificarlas, obtendríamos un código desaconsejado en HTML 4 / XHTML 1, como muestra el ejemplo siguiente.

Supongamos que tenemos dos páginas sencillas, con dos apartados cada una:

h1 h2 h2 h1 h2 h2

Si combinamos esas dos páginas en una, dando un nuevo título a la página final, obtendríamos el siguiente código, desaconsejado en HTML 4 / XHTML 1 porque no respeta la jerarquía de títulos:

h1 h1 h2 h2 h1 h2 h2 desaconsejado en HTML 4

Para resolver este problema, en HTML 4 / XHTML 1 hay que cambiar el nivel de los títulos para obtener una estructura que respete la jerarquía de títulos:

h1 h2 h3 h3 h2 h3 h3

Este caso es fácil de resolver, pero en situaciones más complejas no resulta fácil idear un algoritmo general para mezclar contenidos respetando la jerarquía.

Esquema (outline) de una página web HTML 5

En HTML 5 las etiquetas de título (<h1>, <h2>, etc.) siguen definiendo implícitamente secciones de la página, pero además:

El segundo punto implica que si en HTML 5 se cogen dos páginas completas y se combinan en una tercera incluyendo el contenido de cada página en una etiqueta <article>, no es necesario modificar los títulos, como muestra el ejemplo siguiente:

h1 article h1 h2 h2 article h1 h2 h2

Este código es correcto es HTML 5, ya que la etiqueta <article> define una nueva sección en el esquema de la página y los títulos contenidos en ella se cuentan en la jerarquía a partir del nivel definido por el elemento <article>. Por tanto, los <h1> que están dentro de los <article> tienen menos nivel que el <h1> de <body>

Secciones y títulos <h1>, ..., <h6>

Como cada sección reinicia la jerarquía de títulos independientemente del nivel de los títulos, en el esquema correspondiente al ejemplo siguiente el elemento <h1> del primer <article> tendría el mismo nivel que el elemento <h2> del segundo <article>.

h1 article h1 h2 h2 article h2 h3 h3

Actualmente (noviembre de 2015), los navegadores no han implementado el algoritmo para calcular el esquema de una página y aplican simplemente en la hoja de estilo por defecto una regla para que un elemento <h1> dentro de <article> se vea como un elemento <h2> situado fuera de <article> (y el resto de <h1>, ..., <h6> se ven igual que siempre), como se ve en el ejemplo siguiente:

Incorrecto en Firefox Incorrecto en Internet Explorer Incorrecto en Chrome

<h1>Título h1 en body</h1>

<h2>Título h2 en body</h2>

<h3>Título h3 en body</h1>

<article>
  <h1>Título h1 en article</h1>

  <h2>Título h2 en article</h2>

  <h3>Título h3 en article</h3>
</article>

<article>
  <h2>Título h2 en article</h2>

  <h3>Título h3 en article</h3>

  <h4>Título h4 en article</h4>
</article>

Cómo usar los títulos <h1>, ..., <h6>

Así como en HTML 4 / XHTML 1 el esquema de una página web se deducía inmediatamente de los títulos <h1>, ..., <h6>, en HTML 5 es necesario tener en cuenta las secciones para interpretar correctamente el nivel de los títulos. A cambio, se ha mejorado enormemente la reutilización de contenidos, ya que no se necesita cambiar ningún título al combinar elementos de distintas páginas.

Puesto que ahora se tienen dos mecanismos para definir el esquema de una página web (implícitamente con los títulos y explícitamente con las secciones), tenemos la opción de elegir cuál de ellos utilizamos:

En estos apuntes se propone una solución intermedia que facilite la reutilización de contenidos sin obligar a crear muchas secciones:

Nota: Si el sitio web va a recombinar mucho el contenido de las páginas, la forma más sencilla de preparar la hoja de estilo CSS es utilizar el menor número posible de niveles de títulos.

Para saber más