Secciones y subsecciones en HTML5.
El Html5 da mucha importancia a cómo distribuimos jerárquicamente el contenido de nuestras páginas web, esto es, cómo indicar cuales son las secciones principales y cuales son las secundarias que pertenecen a esas seccines principales.
Antes con el Html4 podíamos definir este orden de niveles con las etiquetas de titular <h1>, <h2>, y así hasta el <h6>. Ahora en cambio, con las nuevas etiquetas semánticas <section>, <article>, etc, aparecen nuevos modos de indicar dónde empieza y/o termina una nueva sección o subsección, un nuevo nivel jerárquico.
Os lo explico un poco mejor. Antes con Html4 podíamos estableces un orden jerárquico para el contenido de este modo:
<h1>Segunda sección de nivel 1</h1>
<h1>Tercera sección de nivel 1</h1>
<h1>Cuarta sección de nivel 1</h1>
<h1>Quinta sección de nivel 1</h1>
Esas cinco secciones tienen el mismo orden de importancia, pues todas son <h1>, tienen el mismo nivel jerárquico. Pero podíamos crear partes dentro de algunas de esas secciones, con una etiqueta <h2> en el interior de una de las <h1> mostradas. El contenido de esa subsección sería secundario, de un segundo orden, algo menos importante que la sección principal a la que pertenece. Veamos un ejemplo añadiendo un par de subsecciones a algunas de esas secciones principales:
<h2>Primera subsección de nivel 2</h2>
<h2>Segunda subsección de nivel 2</h2>
<h1>Segunda sección de nivel 1</h1>
<h1>Tercera sección de nivel 1</h1>
<h2>Primera subsección de nivel 2</h2>
<h1>Cuarta sección de nivel 1</h1>
<h1>Quinta sección de nivel 1</h1>
Del mismo modo, podemos ir creando otras secciones de tercer nivel con <h3> dentro de las de nivel dos <h3> y así sucesivamente hasta <h6> que es el máximo permitido. Aunque creo que casi nunca llegaremos a dividir tanto los contenidos de una página, no?
Los navegadores entenderán que se está en un nivel de primer orden <h1> desde que empieza éste hasta que aparezca otra etiqueta de orden. Si el navegador encuentra una etiqueta <h2>, sabrá que a a partir de ahí se está en nivel 2. Si después encuentra un <h1>, volverá a pensar que está en el primer nivel nuevamente. Se comprende? Si se está en nivel 2 y se encuentra otra etiqueta <h2>, también de nivel 2, sabrá que ha empezado otra subsección, también de nivel 2 pero distinta.
Pero como te quería decir, ahora con el nuevo Html5 la cosa va cambiando un poco. Con la aparición de las etiquetas semánticas <section>, también se puede indicar que empieza una nueva sección, se añada o no etiquetas como las anteriores, <h1>, <h3>, etc. Por tanto a partir de ahora, para empezar una nueva sección o subsección bastará con colocar etiquetas de apertura <section> al inicio de una sección y de cierre </section> para terminar con ese nivel.
Si queremos crear un nivel secundario dentro de una sección, bastará con definir una nueva sección con la etiqueta <section>, pero lo haremos antes de la etiqueta de cierre de la sección a la que queremos que pertenezca esa sección secundaria.
Dicho esto, veamos cómo quedaría en ejemplo anterior pero usando las nuevas etiquetas de Html5 en lugar de las usadas en Html4:
<section>Primera subsección de nivel 2</section>
<section>Segunda subsección de nivel 2</section>
</section>
<section>Segunda sección de nivel 1</section>
<section>Tercera sección de nivel 1
<section>Primera subsección de nivel 2</section>
</section>
<section>Cuarta sección de nivel 1</section>
<section>Quinta sección de nivel 1</section>
Esto no está del todo bien. Nos faltaría colocar las etiquetas <h1> dentro, pero no las puse antes para que el código se viera algo más clarito. Además quería explicar algo más sobre el uso de etiquetas del tipo <h1> dentro de las etiquetas <section>. Vamos allá.
En el interior de cada <section> debe aparecer una etiqueta de título, <h1>. Pero a diferencia de cuando usabamos Html4, con el que ibamos llevando la cuenta del nivel en el que estábamos para saber si correspondia colocar un <h1>, <h2>, etc, ahora con el Html5, como ya definimos el orden con la misma etiqueta <section>, lo que haremos será empezar la cuenta de nuevo, es decir, con <h1>. Es decir, si estamos escribiendo el código de una sección de tercer nivel, no hay porqué colocar un <h3>, sino que usaremos un <h1>.
El ejemplo anterior quedaría mejor por tanto así:
<section><h1>Primera subsección de nivel 2</h1></section>
<section><h1>Segunda subsección de nivel 2</h1></section>
</section>
<section><h1>Segunda sección de nivel 1</h1></section>
<section><h1>Tercera sección de nivel 1</h1>
<section><h1>Primera subsección de nivel 2</h1></section>
</section>
<section><h1>Cuarta sección de nivel 1</h1></section>
<section><h1>Quinta sección de nivel 1</h1></section>
Ves? Por qué no hemos colocado un <h2> en el titular de una sección de segundo nivel? Exácto, porque ya hemos indicado el orden de ese nivel con la etiqueta <section> y ahora podemos empezar desde <h1> sin problemas.
Estructura HTML5:
