Secciones en HTML5: El algoritmo de generación de esquemas (outline)

Ver articulo anterior sobre secciones en html4


Definiendo secciones en HTML5

En principio todos los contenidos que se encuentran comprendidos dentro de la etiqueta body forman parte de una sección. Existe la posibilidad de tener secciones anidadas, es decir, de formar una estructura de secciones en arbol. Las secciones se pueden declarar de una forma explicita o implicita. Más adelante veremos que diferencias hay entre unas y otras.
Las secciones explicitas se definen utilizando los elementos de html: body, section, article, aside, footer, header y nav.
Ejemplo

<section>
  <h1>HTML5 Paso a paso</h1> 
  <section>
    <h2>Introducción</h2>
    <p>En este capitulo haremos una introducción ....</p>
  </section>
  <section>
    <h2>Configuración inicial</h2>
    <p>La configuración inicial pasa por ...</p>
  </section>
  <aside>
    <p>Manuales de HTML5 complementarios</p>
  </aside>
</section>
<footer>
  <p>(c) HTML5 paso a paso. Aviso legal ...
</footer>

Este trozo de código html define dos secciones principales, la creada por el tag section y por footer:

<section>
  <h1>HTML5 Paso a paso</h1> 
  <section>
    <h2>Introducción</h2>
    <p>En este capitulo haremos una introducción ....</p>
  </section>
  <section>
    <h2>Configuración inicial</h2>
    <p>La configuración inicial pasa por ...</p>
  </section>
  <aside>
    <p>Manuales de HTML5 complementarios</p>
  </aside>
</section>
<footer>
  <p>(c) HTML5 paso a paso. Aviso legal ...
</footer>

 y la primera sección tiene 3 subsecciones:

<section>
  <h1>HTML5 Paso a paso</h1> 
  <section>
    <h2>Introducción</h2>
    <p>En este capitulo haremos una introducción ....</p>
  </section>
  <section>
    <h2>Configuración inicial</h2>
    <p>La configuración inicial pasa por ...</p>
  </section>
  <aside>
    <p>Manuales de HTML5 complementarios</p>
  </aside>
</section>
<footer>
  <p>(c) HTML5 paso a paso. Aviso legal ...
</footer>

 Esto lleva a la siguiente estructura:

1. Section
   1.1 Section
   1.2 Section
   1.3 Section (aside)
2. Section (footer)
 

Definiendo Encabezados en HTML 5
Mientras que los elementes comentados anteriormente crean una sección, el esquema del documento html requiere también de un título. La regla que define el título de una sección es simple: El primer elemento de encabezado (h1-h6) de la sección será el título de la sección.
Los elementos de encabezado vienen definido por un rango, el cual lo asigna el número que precede a la letra 'h', de forma que h1 es el elemento más alto y h6 es el más bajo. El ranking es solo relativo a la sección donde se encuentra, y no servirá para definir el resumen del documento html. Será la estructura de secciones la que definan el esquema. Por ejemplo, el siguiente trozo de código:

<section>
  <h1>HTML5 Paso a paso</h1>    
  <p>...descripción de la sección...</p>
  <section>
     <h2>Nuevos elementos HTML5</h2>  
     <p>...definición de la subsección...</p>
  </section>
</section>
<section>
  <h3>HTML 5 Avanzado</h3>
  <p>In this section, we discuss the famous mongolian gerbils. 
     ...this section continues...
</section>

llevará a la siguiente estructrua:

1. HTML5 Paso a paso
   1.1 Nuevos elementos HTML5
2. HTML 5 Avanzado

Como se puede observar, el rango establecido por los encabezados (en el ejemplo h1 para la sección principal, h2 para la subsección y h3 para la segunda sección principal) no es relevante a la hora de crear la estructura del documento. Aun así, se recomienda por claridad y legibilidad que los encabezados utilizados vayan acorde con la sección, aunque esto no sea tenido en cuenta posteriormente.

Secciones implícitas
Ya que es necesario mantener una compatibilidad con las versiones anteriores de HTML, también es posible crear secciones de una forma implícita tal y como se hacía en las versiones anteriores.
Los elementos de encabezados (H1-H6) crean por si solas una nueva sección implicita en el esquema, siempre y cuando no sean el encabezado principal de una sección explícita. La forma en la que se posiciona la sección implicita en el esquema será definido por el ranking relativo al encabezado anterior.
Vamos a explicar esto mejor, imaginaros el siguiente ejemplo:

<section>
  <h1>html5 paso a paso</h1>  
  <p>...this section continues...</p>
  <h3 class="implicit subsection">Introducción</h3>
    <p>...contenido de la subsección...</p>
</section>

generará un esquema tal que:

1. html5 paso a paso
   1.1 Introducción

Sin embargo si el encabezado de la sección implicita es igual que el encabezado anterior, este cerrará la sección anterior (el cual debe haber sido una sección explícita) y creará una nueva sección implicita al mismo nivel:

<section>
  <h1>HTML5: Introducción</h1>  
  <p>...introducción a html5 ...
  <h1 class="implicit section">Nuevos elementos de html5</h1>
  <p>...definición de los nuevos elementos de html5...
</section>

Este código creará el siguiente esquema:

1. HTML5: Introducción
2. Nuevos elementos de html5 (definido implicitamente por el elemento h1, el cual cerró la sección anterior al mismo tiempo que generó la nueva)

Por otro lado, si el encabezado es de un rango más alto que el encabezado anterior, este cerrará la sección y creará una sección nueva del nivel superior:

<body>
  <h1>Manual de html5</h1>
  <h2>Nuevos Elementos</h2>
  <p>...introducción a los nuevos elementos...
  <section>
    <h3>Elemento header</h3>  
    <p>...definición del elemento header...</p>
    <h3>Elemento footer</h3>
      <p>...definición del elemento footer...</p>
    <h2>Funcionalidad Offline</h2>
      <p>Reptiles are animals with cold blood.
          ...this subsection continues...
  </section>
</body>

en este caso, el esquema creado será:

1. Manual de html5
1.1 Nuevos Elementos
1.1.1 Elemento header
1.1.2 Elemento footer 
1.2 Funcionalidad Offline

Sobreescribiendo secciones implicitas

Algunas veces una sección puede necesitar tener varios encabezados. A continuación veremos algunos casos habituales que se nos pueden presentar:

• Una sección sobre un libro o película en la que es necesario tener un título y subtítulo.

<section>
  <h1>El señor de los anillos</h1>
  <h2>La comunidad del anillo</h2>
</section>

Este código generará la siguiente estructura:

1. El señor de los anillos
   1.1 La comunidad del anillo

• Usar como encabezado de segundo nivel las palabras clave de un articulo, o sección

<section>
  <h1>Nuevo blog sobre html5</h1>
  <h2>HTML, HTML5, Secciones, Outline, Esquemas, Semántica</h2>
</section>

Este código generará la siguiente estructura:

1. Nuevo blog sobre html5
   1.1 HTML, HTML5, Secciones, Outline, Esquemas, Semántica

Debido a la generación de secciones implícitas que hemos comentado anteriormente, esto no es posible sin usar el elemento agrupador de encabezado introducido por HTML5 (<hgroup>). Este elemento esconde en el esquema del documento todos los encabezados excepto el primero, permitiendo así sobrescribir las secciones implícitas que se generan debido al segundo encabezado. El ejemplo anterior quedaría:

<section>
  <hgroup>
    <h1>Blog sobre HTML5</h1>
    <h2>Nuevo blog creado por Sergio Raposo sobre html5</h2>
  </hgroup>
</section>

Este produce el siguiente esquema:

1. Blog sobre HTML5

Sección raíz
La sección raíz es aquella que tiene un esquema (outline) por sí solo, pero las secciones y encabezados dentro de este no influyen en el esquema de su padre. A parte del body, el cual es el elemento raíz por defecto del documento html, los siguientes elementos generan un esquema independiente al esquema principal del documento html: <blockquote>, <details>, <fieldset>, <figure> y <td>.
Por ejemplo:

<section>
  <h1>HTML5 paso a paso</h1> 
  <section>
    <h2>Introducción</h2>
    <p>...introducción a html5 ...</p>
  </section>
  <section>
    <h2>Elementos de html5</h2>
    <p>Según dice el libro especializado en html5:
    <blockquote cite="Dive Into HTML5">
       <h1>Nuevos elementos
       <p>Los nuevos elementos de html5 son ...</p>
    </blockquote>
  </section>
</section>

generará el siguiente esquema:

1. HTML5 paso a paso
   1.1 Introducción
   1.2 Elementos de html5

Si os fijáis, este esquema no contiene la sección creada por el elemento <blockquote>, el cual, al ser una cita externa, generará una sección raíz y aislará su esquema del esquema principal generado por el body.

Secciones fuera del esquema


HTML 5 introduce cuatro nuevos elementos que permiten definir las secciones que no pertenecen a las grandes líneas de un documento web:

   1. El elemento <aside> define una sección que, aunque relacionado con el elemento principal, no forma parte del mismo directamente, como un cuadro de explicación o un anuncio. Tiene su propio esquema, pero no pertenece al principal.
   2. El código HTML de navegación (elemento <nav>) define una sección que contiene enlaces de navegación. Puede haber varios de ellos en un mismo documento, por ejemplo, una página con enlaces internos, como una tabla de contenido, y otro con los enlaces de navegación del sitio web. Estos enlaces no forman parte del flujo principal  ni del esquema y pueden que los lectores de pantalla o software de ayuda similares los ignore no renderizandolos, ya que no forman parte de la información que se está mostrando, simplemente muestra una lista de enlaces para navegar por nuestro sitio.
   3. La sección de cabecera (<header>) define un encabezado de página, por lo general contiene el logotipo y el nombre del sitio y, posiblemente, un menú horizontal. A pesar de su nombre, no es necesariamente colocarlo al principio de la página. Igualmente puede contener banners publicitarios en posición destacado, iconos de acceso directo como por ejemplo acceso a la página de mapa web o al formulario de contacto.
   4. El elemento <footer> define un pie de página, por lo general contiene los derechos de autor y avisos legales del sitio y en ocasiones algunos links de interés. A pesar de su nombre, no es necesario colocarlo en la parte inferior de la página.


Este articulo está basado en el artículo sections and outlines of an HTML5 document del Mozilla Developer Center.




Ir al primer articulo sobre secciones en html5