Esta lección explica el concepto de esquema (outline) definido en HTML 5, que fue eliminado de la norma HTML en julio de 2022. Esta lección ya no tiene interés práctico.
Esta lección explica el concepto de esquema (outline) definido en HTML 5, que fue eliminado de la norma HTML en julio de 2022. Esta lección ya no tiene interés práctico.
El esquema (outline) de una página web es una representación de la página web que muestra la relación de jerarquía entre los diferentes apartados y subapartados.
El concepto de esquema se formalizó en HTML 5, de manera que el esquema de un documento ya no se deberían deducir únicamente de las etiquetas de título, sino también de las cuatro etiquetas <article>, <section>, <nav> y <aside>.
Como ningún navegador ni ninguna herramienta de accesibilidad incluyó nunca algoritmos para analizar el esquema (outline) de una página web, finalmente en julio de 2022 el concepto de esquema de la norma HTML se simplificó, basándolo de nuevo únicamente en las etiquetas de título.
Por todo ello, en estos apuntes se recomienda utilizar las etiquetas de secciones introducidas en HTML 5, porque permiten organizar mejor el contenido de las páginas, pero mantener la jerarquía de títulos clásica del HTML 4.
Notas:
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 continuo, mientras que las secciones definidas de forma implícita por los títulos están representadas con un trazo discontinuo.
Este sistema era suficiente para páginas sueltas, pero no permitía la reutilización de contenidos en otras páginas. Es decir, si se cogían partes de unas páginas (con sus títulos) y se unían 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:
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:
Para resolver este problema, en HTML 4 / XHTML 1 había que cambiar el nivel de los títulos para obtener una estructura que respetara la jerarquía de títulos:
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.
En HTML 5 las etiquetas de título (<h1>, <h2>, etc.) siguieron definiendo implícitamente secciones de la página, pero además:
El segundo punto implicaba que si en HTML 5 se cogían dos páginas completas y se combinaban en una tercera incluyendo el contenido de cada página en una etiqueta <article>, no era necesario modificar los títulos, como muestra el ejemplo siguiente:
Este código era correcto es HTML 5, ya que la etiqueta <article> definía una nueva sección en el esquema de la página y los títulos contenidos en ella se contaban en la jerarquía general a partir del nivel definido por el elemento <article>. Por tanto, los <h1> que estaban dentro de los <article> tenían menos nivel que el <h1> de <body>
Como cada sección reiniciaba 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> tenía el mismo nivel que el elemento <h2> del segundo <article>.
Pero la verdad es que los navegadores nunca implementaron el algoritmo para calcular el esquema de una página. Prácticamente, el único aspecto en el que se aplicaba de alguna manera el concepto de esquema era en el caso de los títulos <h1> dentro de <article> o <section>, porque la hoja de estilo por defecto los mostraba como un elemento <h2> situado fuera de ellos. Pero se trataba de una excepción, porque el resto de títulos <h2>, ..., <h6> se veían igual, estuvieran dónde estuvieran, como se ve en el ejemplo siguiente:
<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>
<section>
<h1>Título h1 en section</h1>
<h2>Título h2 en section</h2>
<h3>Título h3 en section</h3>
</article>
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 era teóricamente necesario tener en cuenta las secciones para interpretar correctamente el nivel de los títulos. A cambio, se simplificaba enormemente la reutilización de contenidos, ya que no se necesitaba cambiar ningún título al combinar elementos de distintas páginas.
Teóricamente, al disponer de dos mecanismos para definir el esquema de una página web (implícitamente con los títulos y explícitamente con las secciones), tendíamos la opción de elegir cuál de ellos utilizamos:
Como ningún navegador ni ninguna herramienta de accesibilidad analizó el esquema de la página ni lo utilizó en su análisis, la realidad era que la presencia de secciones no alteraba el significado jerárquico de los títulos. Por ello, en estos apuntes se recomendó siempre utilizar las etiquetas de secciones introducidas en HTML 5, porque permiten organizar mejor el contenido de las páginas, pero mantener la jerarquía de títulos clásica del HTML 4.
Nota: Si un sitio web va a recombinar mucho el contenido de las páginas, no le quedará más remedio que modificar por software la jerarquía de los títulos.