Etiqueta SECTION

La etiqueta HTML <section> representa una sección genérica de un documento o una aplicación.

Cualquier página web o artículo puede tener muchas secciones. Por ejemplo, una página de inicio podría tener una sección para presentar la empresa, otra sección para las noticias y otra sección para la información de contacto.

Sintaxis de la Etiqueta <section>

La etiqueta <section> se escribe como <section></section>, y el contenido de la sección se encuentra entre las etiquetas de inicio y fin.

Así:

<section>
    Contenido aquí...
</section>

Ejemplos de la Etiqueta <section>

Contexto Básico

Aquí tienes algunos ejemplos de dónde puede ubicarse la etiqueta <section> dentro de un documento HTML. Puedes colocarla en cualquier lugar donde se espere “contenido de flujo” (básicamente en cualquier parte del cuerpo/body del documento).

See the Pen Contexto Básico Section by Alex (@htmldesdecero) on CodePen.

Múltiples Artículos dentro de una Sección

Aquí tienes un ejemplo rápido de varios elementos <article> dentro de un elemento <section>.

<section>
    <h1>Planetas</h1>
    <p>Espero que disfrutes de estos artículos sobre algunos de los planetas más 
        populares dentro de la comunidad Homo sapiens.</p>
    <article>
        <h2>Tierra</h2>
        <p>La Tierra se encuentra, en promedio, a 93 millones de millas del Sol. 
            Órbita alrededor del Sol a una velocidad promedio de 18.5 millas por segundo.</p>
    </article>
    <article>
        <h2>Marte</h2>
        <p>Marte se encuentra, en promedio, a 142 millones de millas del Sol. 
            Órbita alrededor del Sol a una velocidad promedio de 14.5 millas por segundo.</p>
    </article>
</section>

Comentarios en el Blog

Una aplicación de la etiqueta podría ser presentar comentarios en un blog al final de un artículo. Algo así:

<article>
    <h1>Marte</h1>
    <p>Marte se encuentra, en promedio, a 142 millones de millas del Sol. 
        Órbita alrededor del Sol a una velocidad promedio de 14.5 millas por segundo.</p>
    <section>
    <h2>Comentarios de Usuarios</h2>
    <article>
    <header>
        <h3>SolarFlare dice:</h3>
        <p><time datetime="2024-06-05T22:43-08:00">hace 3 horas</time></p>
    </header>
        <p>¡Guau, esta información realmente me hace volver a la Tierra!</p>
    </article>
    <article>
    <header>
        <h3>Pluto dice:</h3>
        <p><time datetime="2024-06-05T23:45-08:00">hace 2 horas</time></p>
    </header>
        <p>¡142 millones de millas... pfft.. eso no es nada!</p>
    </article>
    </section>
</article>

Esto es cómo se vería el ejemplo anterior después de aplicar algunos estilos básicos.

See the Pen Comentarios Blog Section by Alex (@htmldesdecero) on CodePen.

Secciones del Artículo

Un elemento <article> se puede dividir en secciones utilizando el elemento <section>. Esto representaría diferentes secciones temáticas dentro del artículo.

En el siguiente ejemplo, el elemento <article> representa un libro. Este libro tiene un título, una introducción, tres capítulos y un apéndice. El elemento <section> se utiliza para separar la introducción, cada capítulo y el apéndice.

<article>
    <header>
    <h1>Título del artículo/libro...</h1>
    <p>Texto...</p>
    </header>
    <section>
        <h2>Introducción</h2>
        <p>Contenido....</p>
    </section>
    <section>
        <h2>Capítulo 1</h2>
        <p>Contenido...</p>
    </section>
    <section>
        <h2>Capítulo 2</h2>
        <p>Contenido...</p>
    </section>
    <section>
        <h2>Capítulo 3</h2>
        <p>Contenido...</p>
    </section>
    <section>
        <h2>Apéndice</h2>
        <p>Contenido...</p>
    </section>
</article>

Aquí tienes una representación visual del código anterior:

See the Pen Secciones del Artículo – Section – Article by Alex (@htmldesdecero) on CodePen.

<section> vs <article>

Puedes anidar etiquetas <section> dentro de etiquetas <article> y viceversa.

¿Cuál deberías usar?

Existe una diferencia sutil entre el elemento <section> y el elemento <article>. El propósito del elemento <section> es representar una sección genérica de un documento o una aplicación. Por otro lado, el elemento <article> representa un único contenido independiente y autónomo.

Cuando elijas entre utilizar una etiqueta <section> o una etiqueta <article>, usa la etiqueta <article> si el contenido mantendría su significado si se sindicara.

Atributos

Se pueden agregar atributos a un elemento HTML para proporcionar más información sobre cómo debería aparecer o comportarse el elemento.

El elemento <section> acepta los siguientes atributos.

Atributos Globales

Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes utilizar estos atributos con la etiqueta <section>, así como con todas las demás etiquetas HTML.

• accesskey
• autocapitalize
• class
• contenteditable
• data-*
• dir
• draggable
• hidden
• id
• inputmode
• is
• itemid
• itemprop
• itemref
• itemscope
• itemtype
• lang
• part
• slot
• spellcheck
• style
• tabindex
• title
• translate

Para obtener una explicación completa de estos atributos, consulta los atributos globales de HTML 5.