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.
Tabla de contenidos
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.).
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.