Secciones en HTML5

Una de los problemas que tenía HTML 4.01 era la carencia semántica dentro de sus elementos. Solo contábamos con elementos como div para poder crear una estructura de elementos y mediante clases CSS definíamos una semántica.

Esto, por otro lado, era bastante confuso ya que si el CSS es para darle estilo y HTML para dar la estructura y semántica, por qué lo hacíamos al revés. Es por ello que en HTML5 se hace una revisión de los elementos y aparecen algunos elementos semánticos como article, section o nav.

El elemento section

Para definir secciones en HTML5 tenemos el elemento section. Este elemento de bloque nos permite definir secciones con contenido dentro de nuestro documento. Por lo cual podremos tener tantas secciones dentro de nuestro documento como queramos o necesitemos.

La estructura del elemento section sería la siguiente:

<section>
  <h1>Título de la sección</h1>
  <!-- Contenido de la sección -->
</section>

Ejemplo de sección

De esta manera para definir una sección en HTML5 podremos escribir lo siguiente:

<section>
  <h1>Mi Primera Sección</h1>
  <p>Este es el contenido de mi primera sección en HTML5.</p>
  <p>Aquí puedo añadir más párrafos, imágenes, listas, etc.</p>
</section>

Como vemos, la sección en HTML5 empieza por un elemento de cabecera h1 el cual marcará el título de dicha sección.

Múltiples secciones

Podemos tener múltiples secciones en un mismo documento:

<body>
  <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>

  <section>
    <h1>Tercera Sección</h1>
    <p>Contenido de la tercera sección...</p>
  </section>
</body>

Compatibilidad con HTML 4.01

Hay que saber que los elementos de cabecera h1 a h6 marcan por si solo secciones dentro del documento HTML. Esto sucede para mantener compatibilidad con los documentos HTML 4.01.

Validación del outline

Para poder analizar la semántica de nuestro documento y ver que secciones en HTML5 existen tenemos que analizar su outline. Para poder analizar el outline de nuestro documento podemos utilizar el validador de W3C.

El outline nos mostrará la estructura jerárquica de nuestro documento, indicando claramente las secciones que hemos definido y cómo se relacionan entre sí.

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 Secciones en HTML5

Para definir secciones en HTML 5 tenemos el elemento section. Este elemento nos permite definir tnantas secciones como necesitemos en nuestro documento.

Descargar código