Etiqueta <section>
La etiqueta <section>
en HTML se utiliza para definir una sección genérica dentro de un documento. Una sección representa una parte de contenido relacionada dentro de la página, como un capítulo de un libro, una subsección de un artículo o una categoría de información.
El propósito principal de la etiqueta <section>
es dividir el contenido en partes significativas y bien estructuradas. Al usarla, puedes organizar el contenido de manera que sea más comprensible tanto para los usuarios como para los motores de búsqueda, lo que ayuda en la accesibilidad y SEO.
Dentro de un <section>
puedes incluir otros elementos HTML como encabezados (<h1>, <h2>
), párrafos (<p>
), listas (<ul>, <ol>
), imágenes (<img>
), y más, según el contenido que desees agrupar.
Ejemplo de código
<section>
<h2>
Tecnologías Emergentes
</h2>
<p>
IA, blockchain e IoT están cambiando el mundo.
</p>
</section>
<section>
<h2>
Desafíos de la sostenibilidad
</h2>
<p>
El reto es equilibrar desarrollo y cuidado ambiental.
</p>
</section>
Recuerda que la etiqueta <section>
debe usarse para dividir el contenido de la página en partes significativas o temáticas. Cada sección debe tener un encabezado relacionado que indique claramente el tema o la categoría del contenido.
Beneficios del uso de <section>
en la estructuración de contenido
- <>Mejora la accesibilidad: Al dividir el contenido en secciones, se facilita la navegación y comprensión tanto para los usuarios como para los motores de búsqueda.
- <>Optimización en SEO: El uso adecuado de la etiqueta
<section>
ayuda a los motores de búsqueda a identificar y categorizar mejor el contenido, mejorando la indexación. - <>Claridad en la organización del contenido: Las secciones permiten una organización más clara y lógica del contenido, facilitando que los usuarios encuentren la información relevante.
Consideraciones adicionales:
- <>No usar en exceso: La etiqueta
<section>
no debe utilizarse para dividir cualquier contenido arbitrario. Solo debe usarse para secciones de contenido relacionadas que se pueden considerar autónomas o temáticas. - <>Encabezado necesario: Cada
<section>
debe contener un encabezado apropiado (<h1>, <h2>, <h3>
) que indique claramente el propósito o el tema de la sección. - <>Mejor uso en documentos largos: En documentos más extensos, usar
<section>
facilita la estructuración del contenido de manera eficiente.
Resumen:
- <>
<section>
es una etiqueta semántica que agrupa contenido relacionado dentro de un documento HTML. - <>Cada sección debe contener un encabezado claro (
<h1>
,<h2>
, etc.) que indique su propósito. - <>El uso adecuado de
<section>
mejora la accesibilidad, el SEO y la organización del contenido en la página.