Etiqueta de agrupación en HTML

En el lenguaje HTML5, las etiquetas se clasifican en dos categorías principales: aquellas que proporcionan significado o contexto a fragmentos de texto y aquellas que agrupan otras etiquetas, organizando el contenido de manera estructurada. En esta ocasión, nos enfocaremos en las etiquetas que sirven para agrupar y asociar información relacionada.

Ejemplo de una etiqueta contenedora

htmlCopiarEditar<div class="contenedor">
  <p>Este es un párrafo de ejemplo.</p>
  <p>Este es otro párrafo de ejemplo.</p>
</div>

En este ejemplo, la etiqueta <div class="contenedor"> actúa como un contenedor que agrupa varios elementos relacionados. Aunque no es obligatorio asignar una clase a una etiqueta <div>, es una práctica común hacerlo para:

Identificar secciones específicas del documento.
Aplicar estilos visuales mediante CSS.
Agregar funcionalidades interactivas con JavaScript.

Una convención útil es añadir el sufijo -contenedor al nombre de la clase, como en texto-contenedor, para indicar claramente su propósito.

Etiquetas HTML para agrupar contenido

HTML5 ofrece diversas etiquetas diseñadas para agrupar contenido relacionado. A continuación, se presentan algunas de las más comunes:

<div>: Utilizada para agrupar bloques de contenido sin un significado semántico específico.
<p>: Define un párrafo de texto.
<main>: Representa el contenido principal del documento.
<hr>: Indica una separación temática entre secciones del contenido.
<ol>: Crea una lista ordenada.
<ul>: Crea una lista desordenada.
<li>: Define un elemento dentro de una lista.
<pre>: Muestra texto preformateado, respetando espacios y saltos de línea.
<blockquote>: Indica una cita de otro autor o fuente.
<dl>: Define una lista de definiciones.
<dt>: Especifica un término en una lista de definiciones.
<dd>: Proporciona la descripción de un término en una lista de definiciones.
<figure>: Agrupa contenido ilustrativo, como imágenes o diagramas.
<figcaption>: Proporciona una leyenda o descripción para el contenido dentro de <figure>.

Detalles adicionales sobre algunas etiquetas

<p> – Párrafo de texto

La etiqueta <p> se utiliza para definir párrafos de texto. Es recomendable cerrar explícitamente esta etiqueta para mantener una estructura clara y coherente en el código.

<main> – Contenido principal

La etiqueta <main> identifica el contenido principal del documento. Generalmente, debe haber solo una etiqueta <main> por página. Sin embargo, en aplicaciones dinámicas, es posible tener múltiples etiquetas <main> siempre que solo una esté visible y las demás estén ocultas utilizando el atributo hidden.

<hr> – Separación temática

La etiqueta <hr> se emplea para señalar una transición temática entre secciones del contenido. Aunque visualmente se representa como una línea horizontal, su propósito semántico es indicar una división temática. Es una etiqueta vacía, lo que significa que no requiere una etiqueta de cierre.

Estas etiquetas son fundamentales para estructurar y organizar el contenido en documentos HTML5, mejorando tanto la accesibilidad como la experiencia del usuario.

Fuentes