El elemento section

El uso del elemento section es la forma más genérica de dividir al contenido en diferentes secciones. A diferencia de otros elementos más específicos, section solamente expresa que el contenido delimitado por sus etiquetas ha sido agrupado (y separado del resto del contenido) debido a su temática. Esta disociación temática puede ser útil para dividir los capítulos en una novela o para separar los diferentes enfoques en un análisis.

En el ejemplo siguiente, un documento que resume la biografía de Mark Twain ha sido dividido en secciones genéricas de acuerdo con las etapas de su vida.

<section>
  <p>Samuel Langhorne Clemens nació el 30 de noviembre de 1835 en Florida, Missouri. Cuando tenía cuatro años de edad, la familia de Twain se mudó a Hannibal, Missouri, una población portuaria sobre el río Mississippi que inspiró al pueblo ficticio de St. Petersburg en Las aventuras de Tom Sawyer.</p>
</section>
<section>
  <p>Durante 1868, Twain y Olivia Langdon se correspondieron. A pesar de que ella rechazó su primera proposición de matrimonio, dos meses más tarde, estaban comprometidos. En Febrero de 1870, Twain y Langdon se casaron en Elmira, New York, donde la cortejó y consiguió superar la renuencia inicial de su padre.</p>
</section>

Aunque no es requerido, es una buena práctica preceder los contenidos de section con un encabezado. Esta práctica puede mejorar la legibilidad y permitir a usuarios y navegadores (y otros procesadores de documentos) escanear el documento en busca de partes de interés sin tener que procesar todo el texto con el fin de encontrar la información que están buscando.

Encabezados

En versiones previas del estándar, los encabezados eran usados en sí mismos para definir secciones. Los navegadores y procesadores de documentos usaban la información provista por los encabezados para crear un resumen del contenido del documento. Con la llegada de HTML5 y sus elementos de seccionamiento, esto ha cambiado.

En este nuevo escenario, los elementos de seccionamiento son los responsables de la división del contenido mientras que los encabezados proveen un título para los contenidos de cada sección. Cuando este enfoque es utilizado, el encabezado (habitualmente un h1) precede a todo el contenido en la sección y provee una descripción concisa acerca del mismo.

El siguiente ejemplo expande al anterior, agregando títulos a cada una de las secciones ya presentes.

<section>
  <h1>Vida temprana</h1>
  <p>Samuel Langhorne Clemens nació el 30 de noviembre de 1835 en Florida, Missouri. Cuando tenía cuatro años de edad, la familia de Twain se mudó a Hannibal, Missouri, una población portuaria sobre el río Mississippi que inspiró al pueblo ficticio de St. Petersburg en Las aventuras de Tom Sawyer.</p>
</section>
<section>
  <h1>Matrimonio e hijos</h1>
  <p>Durante 1868, Twain y Olivia Langdon se correspondieron. A pesar de que ella rechazó su primera proposición de matrimonio, dos meses más tarde, estaban comprometidos. En Febrero de 1870, Twain y Langdon se casaron en Elmira, New York, donde la cortejó y consiguió superar la renuencia inicial de su padre.</p>
</section>

Ahora agregaremos una sección alrededor de todo el contenido del ejemplo anterior, para ver qué pasa con los encabezados y sus niveles.

<section>
  <h1>Biografía de Mark Twain</h1>
  <section>
    <h2>Vida temprana</h2>
    <p>Samuel Langhorne Clemens nació el 30 de noviembre de 1835 en Florida, Missouri. Cuando tenía cuatro años de edad, la familia de Twain se mudó a Hannibal, Missouri, una población portuaria sobre el río Mississippi que inspiró al pueblo ficticio de St. Petersburg en Las aventuras de Tom Sawyer.</p>
  </section>
  <section>
    <h2>Matrimonio e hijos</h2>
    <p>Durante 1868, Twain y Olivia Langdon se correspondieron. A pesar de que ella rechazó su primera proposición de matrimonio, dos meses más tarde, estaban comprometidos. En Febrero de 1870, Twain y Langdon se casaron en Elmira, New York, donde la cortejó y consiguió superar la renuencia inicial de su padre.</p>
  </section>
</section>

Como ves, los encabezados de las secciones contenidas por la sección exterior ("Vida temprana" y "Matrimonio e hijos") son ahora de nivel dos. Esto tiene sentido ya que ambos son sub-títulos del primer encabezado. Pero HTML5 no requiere que las cosas sean así. Un encabezado h1 es el principal título de la sección en la que se ecnuentra, y no del documento entero, de modo que los autores son libres de usar una u otra configuración.

Los elementos main, header y footer

De entre la variedad de elementos que HTML5 provee para seccionar el contenido, main, header y footer sobresalen por su conveniencia semántica en la creación de documentos típicos. Estos elementos representan, cada uno, una parte del documento o sección en la que son declarados, siendo estas partes, respectivamente: los contenidos centrales o principales, el encabezado (títulos, tablas de contenidos, introducciones, etc.) y el pie (firmas, información de contacto, declaraciones de copyright, etc.)

El ejemplo siguiente muestra una sección de un documento con sus tres partes: un encabezado con un título y una introducción; el contenido central; y un pie con información acerca del autor.

<section>
  <header>
    <h1>Regreso a francia</h1>
    <p>El 1 de Marzo de 1815, Napoleon llega a las costas de Francia a bordo del bergatín Inconstant con unos 1.000 hombres, donde fue recibido calurosamente. Sin realizar disparo alguno en su defensa, el número de tropas a su mando se engrosó hasta convertirse en un ejército.</p>
  </header>
  <main>
    <p>...Una vieja anécdota ilustra el carisma de Napoleon. Cuando las tropas reales fueron desplegadas para detener el avance de las fuerzas de Napoleon's en Grenoble, Napoleon se colocó en frente de éstas, abrió su chaqueta de un tirón y dijo "Si alguno de ustedes le disparará a su Emperador, aquí estoy". Los hombres que se suponía debían detener su avance, se unieron a su causa inmediatamente...</p>
  </main>
  <footer>
    <address>John Doe<br>
    jhondoe@servidoraquienleimporta.com</address>
  </footer>
</section>

Los cuatro elementos de seccionamiento tratados en este documento son parte de un grupo más grande y rico. Para tener una visión más amplia del tema, visita la lista de elementos de HTML.