¿Qué es section en HTML?

Si te aventuras en el mundo del desarrollo web, seguramente has escuchado sobre la etiqueta section en HTML. Pero, ¿qué es realmente? ¿Para qué sirve? En este artículo, vamos a sumergirnos en los detalles de esta etiqueta semántica, una de las etiquetas en HTML, para que puedas aprovechar al máximo su potencial.

¿Qué es section en HTML?

La etiqueta <section> en HTML es una herramienta poderosa para estructurar y organizar el contenido de tu página web. Representa una sección independiente y autónoma de contenido, lo que facilita la comprensión del documento tanto para los motores de búsqueda como para los desarrolladores.

La clave para entender la etiqueta <section> es comprender su propósito principal: agrupar contenido relacionado. Ya sea que estés creando un blog, una página de inicio o cualquier otro tipo de sitio web, las secciones te ayudan a organizar y presentar tu información de manera coherente y significativa.

Cómo usar la etiqueta section en HTML

El uso básico de la etiqueta section en HTML es simple: simplemente envuelve el contenido relacionado entre las etiquetas de apertura y cierre <section>. A continuación, te presentamos algunos ejemplos para ilustrar su aplicación:

Ejemplo de página principal

//section en HTML
<section>
  <h2>Introducción</h2>
  <p>Bienvenido a nuestra página principal. Aquí encontrarás información sobre nuestros productos y servicios.</p>
</section>

<section>
  <h2>Productos Destacados</h2>
  <p>Descubre nuestros productos más populares y encuentra lo que necesitas.</p>
</section>

Ejemplo de un artículo con secciones anidadas

//section en HTML
<article>
  <h1>Título del Artículo</h1>

  <section>
    <h2>Introducción</h2>
    <p>En esta sección, exploraremos el tema principal del artículo.</p>
  </section>

  <section>
    <h2>Desarrollo</h2>
    <p>Aquí profundizamos en los detalles y aspectos relevantes del tema.</p>
  </section>

  <section>
    <h2>Conclusión</h2>
    <p>Finalmente, resumimos nuestros hallazgos y concluimos el artículo.</p>
  </section>
</article>

Cómo ocultar una sección en HTML

A veces, es útil ocultar una sección de tu página web sin eliminarla permanentemente. Hay varias formas de lograr esto en HTML, pero dos métodos comunes son mediante el uso de la propiedad display o la propiedad hidden.

Ejemplo de ocultar una sección con la propiedad display

//section en HTML
<section style="display: none;">
  <h2>Sección Oculta</h2>
  <p>Este contenido no será visible en la página.</p>
</section>

Ejemplo de ocultar una sección con la propiedad hidden

<section hidden>
  <h2>Sección Oculta</h2>
  <p>Este contenido estará presente en el DOM pero no será visible en la página.</p>
</section>

Diferencias entre <article>, <div> y <section> en HTML

<div>

La etiqueta <div> es una de las etiquetas más utilizadas en HTML y se utiliza principalmente como un contenedor genérico para agrupar y estilizar elementos. A diferencia de <article> y <section>, <div> no tiene un significado semántico específico y no transmite información sobre el contenido que contiene. Se utiliza principalmente con fines de estilo y presentación, permitiendo a los desarrolladores dividir el contenido de una página en secciones lógicas para aplicar estilos CSS específicos.

<div>
  <!-- Contenido diverso aquí -->
</div>

<section>

Por otro lado, la etiqueta <section> se utiliza para representar una sección independiente y autónoma de contenido relacionado en una página web. Aunque similar a <div> en su función de agrupar contenido, <section> proporciona un significado semántico al contenido que envuelve. Se utiliza cuando se desea dividir el contenido en secciones distintas y significativas, como capítulos, temas o áreas temáticas específicas.

<section>
  <!-- Contenido relacionado aquí -->
</section>

<article>

La etiqueta <article>, por su parte, se utiliza para representar un contenido independiente y autocontenido, como un artículo, una publicación de blog o un comentario. A diferencia de <section>, que se utiliza para agrupar contenido relacionado, <article> se utiliza para contenido que puede existir por sí mismo y que podría ser reutilizado en otros contextos. Por ejemplo, una publicación de blog completa sería un buen candidato para envolver con la etiqueta <article>.

<article>
  <!-- Contenido autocontenido aquí -->
</article>

Así pues, tenemos que <div> se utiliza principalmente con fines de estilo y presentación, <section> se utiliza para agrupar contenido relacionado y <article> se utiliza para contenido autocontenido que puede existir por sí mismo.

La etiqueta section en HTML es una herramienta invaluable para estructurar y organizar el contenido de tu página web. Ya sea que estés creando una página de inicio, un artículo o cualquier otro tipo de sitio web, las secciones te permiten presentar tu información de manera clara y coherente.

¡Comienza a utilizar la etiqueta <section> en tus proyectos de desarrollo web y lleva tus habilidades al siguiente nivel!

¿Deseas aprender más sobre HTML, CSS y desarrollo web? ¡Apúntate al Bootcamp en desarrollo web de KeepCoding y cambia tu vida! Conviértete en un profesional en tecnología y accede a oportunidades laborales emocionantes y bien remuneradas en el sector de la tecnología. ¡No esperes más para alcanzar tus metas!