Elemento section

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento section es un elemento de seccionamiento genérico, diseñado para contener una parte de un documento temáticamente definida. Los contenidos de un elemento section son usualmente precedidos por un encabezado.

Los autores usualmente recurren al elemento section para dividir un documento extenso en capítulos, para separar las diferentes pestañas en un aplicación o para dividir temáticamente las secciones de un documento (sección de anuncios, sección de últimos artículos publicados, sección de vinculos relacionados, etc.).

Siendo section un elemento genérico, es aconsejable usar otros elementos (como main, header, footer, article, aside o nav) con significados más específicos, siempre que fuera posible.

El elemento section está pensado para agrupar temáticamente un conjunto de elementos. Si existiese la necesidad de definir un bloque con propósitos exclusimavemnte estilísticos o de programación, el elemento div debería utilizarse en su lugar.

Ejemplos

En el siguiente ejemplo el elemento section es usado para encerrar los diferentes capítulos de un documento, lo que constituye un uso muy común. Nota cómo, en este caso particular, cada elemento section comienza con su propio elemento de encabezado. Aunque no es requerido, esto es algo muy típico dada la naturaleza del elemento y su propósito.

<h1>El extraño interior</h1>
<section>
  <h2>Introducción</h2>
  <p>Boris era un hombre muy solitario...</p>
</section>
<section>
  <h2>Un blanco fácil</h2>
  <p>Las contradicciones seguían creciendo en su mente...</p>
</section>
<section>
  <h2>A nadie le importa</h2>
  <p>Pasando desapercibido, Boris intentaba comprender a las personas que transitaban a su lado...</p>
</section>

En el segundo ejemplo, veremos cómo el elemento section divide temáticamente un documento entero en diferentes secciones. Tendremos las siguientes secciones: anuncios y artículos relacionados; el contenido principal estará representado por el elemento main, más apropiado para el caso.

<section>
  <h1>Anuncios</h1>
  <p><a href="http://www.super-frogger-shaper-5000.com">Super frogger shaper 5000. Todo lo que necesitas para estar en forma!</a></p>
</section>
<main>
  <h1>¿Cómo mantenerte en forma?</h1>
  <p>Llevar un estilo de vida saludable es muy importante...</p>
</main>
<section>
  <h1>Artículos relacionados</h1>
  <ul>
    <li><a href="comida-saludable.html">Incluye comida saludable en tu dieta</a></li>
    <li><a href="habitos-de-descanso.html">Adopta buenos hábitos de descanso</a></li>
  </ul>
</section>

Por último, mostraremos a un elemento section encerrando una sección de "artículos relacionados", la cual consiste en un cierto número de vínculos acompañados por una pequeña descripción. Sí, cada uno de estos ítems califica como contenido para la sindicación y por lo tanto, será encerrado por el elemento article.

<section>
  <h1>Artículos relacionados</h1>
  <article>
    <h2><a href="el-calentamiento-global-en-2030.html">El calentamiento global en 2030</a></h2>
    <p>¿Cómo será la vida para los habitantes de la Tierra en 2030? Los efectos de la conducta humana se harán presente en el futuro cercano...</p>
  </article>
  <article>
    <h2><a href="prevenir-el-cambio-climatico.html">La prevención del cambio climático</a></h2>
    <p>¿Qué puede hacerse desde casa para dejar de contribuir al cambio climático? Aprende algunas técnicas que ayudarán a tu planeta...</p>
  </article>
</section>

Atributos

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.

X

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