Agrupación y estructura del contenido

Seccionamiento del contenido

Siempre que un documento comienza a crecer en contenido, puede ser conveniente o inclusive necesario, dividirlo en secciones. Afortunadamente, HTML5 ha expandido el número de tipos de secciones en que un documento puede ser dividido. Los siguiente párrafos abarcarán algunos de los elementos más importantes a la hora de definir secciones en dcoumentos HTML.

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>

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.

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.

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>

Vida temprana

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.

Matrimonio e hijos

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.

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>

Biografía de Mark Twain

Vida temprana

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.

Matrimonio e hijos

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.

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.

Prev123Próx

X

Estás buscando un lugar para alojar tu próximo sitio? Puedo ayudarte con eso!