Cómo usar la etiqueta section en HTML

Si ya conoces la etiqueta <section> de HTML, significa que comprendes lo útil que es para organizar tu documento. Sabemos que algunas etiquetas de HTML solo indican a los navegadores cómo se deben ver los elementos mientras que otras transmiten el significado de la apariencia y funcionalidad de esos elementos. Las etiquetas de este último grupo son de HTML semántico que es la categoría a la que pertenece la etiqueta <section>.

En este artículo, encontrarás todo lo que necesitas saber sobre las etiquetas <section> de HTML. Explicaremos qué es una sección en HTML  y hablaremos de su diferencia con otras etiquetas de contenedores, cómo usarla y cómo ocultarla correctamente.

Qué es una sección en HTML

En HTML una etiqueta <section> es un elemento semántico que te permite crear secciones independientes en las páginas web. Estas secciones deben estar compuestas de contenido relacionado, como información de contacto.

Sin embargo, hay que tener prudencia al momento de implementar la etiqueta <section> de HTML. Procura ser lo más específico posible y si no existe un elemento más específico disponible para representar el contenido, puedes utilizar la etiqueta <section>. Por ejemplo, no usarías esta etiqueta para agrupar enlaces de navegación sino la etiqueta <nav>. Por otra parte, la etiqueta <section> serviría más para dividir un sitio web de una página o un extenso acuerdo de términos y condiciones.

Comparemos una sección en HTML con la etiqueta <article>, otro elemento semántico, para comprender mejor cuándo usar la etiqueta <section>.

Diferencia entre <article> y <section> en HTML5

Antes de ver las diferencias, veamos en qué se parecen las etiquetas <article> y <section>. Ambos son elementos semánticos en HTML5, es decir, transmiten el significado de los elementos que contienen. Esto les permite a los motores de búsqueda, las tecnologías de asistencia, los navegadores e incluso a demás desarrolladores a comprender las partes de una página web.

Ahora veamos las diferencias. Hay situaciones en las que es mejor usar la etiqueta <article> y no <section> y visceversa. Se recomienda usar la etiqueta <article> cuando quieres representar una unidad de contenido en una página web que pueda existir por su cuenta o que pueda reutilizarse. Por ejemplo, una publicación de blog, un foro, un artículo en una revista o en un diario deben marcarse con la etiqueta <article>.

Por otro lado, la etiqueta <section> serviría mejor para representar una sección de un documento relacionado con el mismo tema. La principal diferencia es que esta etiqueta no permite que el contenido que marca se reutilice ni se distribuya de forma independiente. Dentro del contenido que se debe marcar con la etiqueta <section> está la introducción, elementos de una noticia e información de contacto en una página principal.

Ahora es el turno de otra etiqueta de contenedor y cómo se diferencia con <section>: La etiqueta <div>.

Diferencia entre <div> y <section> en HTML5

Como hicimos antes, comencemos con los aspectos en común. Usamos las etiquetas <div> y <section> para dividir una página web en secciones, solo que <div> es un elemento semántico neutral.

En la práctica, esto significa que <div> no describe el contenido que contiene. Si bien otras etiquetas como <article>, <nav>, <header>, <footer> e incluso <section> describen claramente el contenido que hay dentro de ellas y son de tipo semántico, <div> no lo es.

Dado que <div> no tiene una verdadera connotación semántica, se le conoce como una etiqueta de contenedor genérica que solo debe usarse para agrupar elementos con fines de estilo y presentación. Si tu objetivo es distinto, debes usar una etiqueta <section> u otra que sea semántica para explicar a los motores de búsqueda, los navegadores, las tecnologías de asistencia y desarrolladores de qué se trata esa parte de la página. Esto hará que tu código sea más accesible y más fácil de mantener.

Cómo usar la etiqueta <section> en HTML

Para usar secciones en tu código HTML, encierra los elementos relacionados que quieres agrupar entre etiquetas <section> y agrégales un encabezado. Veamos algunos ejemplos.

Ejemplo de página principal

En este caso, el cuerpo del documento HTML se divide en dos secciones y, en cada una, hay un encabezado y un párrafo.

See the Pen The Section element example by Christina Perricone (@hubspot) on CodePen.

Ejemplo de un artículo con secciones anidadas

En este ejemplo vemos un artículo que contiene tres secciones anidadas y cada una tiene un encabezado y un párrafo.

See the Pen by Christina Perricone (@hubspot) on CodePen.

Cómo ocultar una sección en HTML

En vez de eliminar permanentemente una sección de tu sitio, puedes ocultarla y, de esta manera, no tienes que hacerla nuevamente desde cero si cambias de opinión.

Existen dos formas de ocultar una sección o cualquier otro elemento en HTML. La primera consiste en usar la propiedad display y establecer el parámetro "none" en ella, así la página se mostrará como si la sección no existiera como se ve en este ejemplo:

See the Pen by Christina Perricone (@hubspot) on CodePen.

La segunda forma es similar, solo que en la propiedad display estableces el parámetro "hidden" para que la sección se oculte, pero conserve el mismo espacio como si fuera visible. Veamos un ejemplo:

See the Pen by Christina Perricone (@hubspot) on CodePen.

Crear secciones en tu código HTML

Puedes usar la etiqueta <section> para dividir una página web en secciones independientes de contenido relacionado. Si usas la etiqueta <section> sobre una etiqueta de contenedor genérica como <div>, los motores de búsqueda, los navegadores, las tecnologías de asistencia y otros desarrolladores podrán acceder y comprender mejor tu código. Y ahora que sabes cómo utilizar las etiquetas <section>, comienza a implementarlas en tu código HTML. 

Nota: Este artículo se publicó por primera vez en septiembre de 2021 y se ha actualizado para incluir más información relevante.