Subsecciones en HTML5

Ya hemos visto cómo podemos crear una sección en HTML5, ahora vamos a ver la forma en la cual podemos crear subsecciones en HTML5.

Crear una sección básica

Lo primero que aprendimos es que para crear una sección en HTML5 utilizábamos el elemento section de la siguiente forma:

<section>
  <h1>Título de la sección</h1>
  <p>Contenido de la sección...</p>
</section>

Vemos que el primer elemento de la sección en HTML5 es un elemento de título de cabecera h1 que nos demarca el título de la sección.

Secciones consecutivas

En un documento HTML5 podemos tener tantas secciones consecutivas como queramos:

<section>
  <h1>Primera Sección</h1>
  <p>Contenido de la primera sección...</p>
</section>

<section>
  <h1>Segunda Sección</h1>
  <p>Contenido de la segunda sección...</p>
</section>

Cada una de estas secciones equivaldrá a un mismo nivel de sección.

Crear subsecciones anidadas

Pero de igual manera podemos crear subsecciones en HTML5. Para ello simplemente tenemos que anidar el elemento section dentro de otro elemento section.

<section>
  <h1>Sección Principal</h1>
  <p>Contenido de la sección principal...</p>

  <section>
    <h2>Subsección</h2>
    <p>Contenido de la subsección...</p>
  </section>
</section>

Ejemplo completo

De esta forma podremos crear el siguiente documento que contenga subsecciones en HTML5.

<body>
  <section>
    <h1>Sección Principal</h1>
    <p>Contenido de la sección principal...</p>

    <section>
      <h2>Primera Subsección</h2>
      <p>Contenido de la primera subsección...</p>
    </section>

    <section>
      <h2>Segunda Subsección</h2>
      <p>Contenido de la segunda subsección...</p>
    </section>
  </section>
</body>

Niveles de títulos

Aunque dentro de la estructura de cada sección podemos cambiar el nivel de los títulos de cabecera h1 a h6. Vemos que por una cuestión de accesibilidad y de estructura del documento hemos incrementado el nivel del título de cabecera en la subsección que hemos anidado.

Validación del outline

Podemos comprobar el outline del documento mediante el validador de W3C, que nos mostrará la estructura jerárquica de nuestras secciones y subsecciones.

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Descarga el código de Subsecciones en HTML5

Descubre cómo crear subsecciones en HTML5 anidando elementos section para mejorar la estructura de tus documentos y facilitar la accesibilidad y organización.

Descargar código