HTML : Etiquetas de Contenedor

Supongamos que quieres agrupar un <p></p> y un <img /> juntos.

Puedes usar <div></div>.

<div><p>¡Hola!</p> <img src="test.jpg" alt="una imagen" /></div>

Esta es probablemente la etiqueta más utilizada.

div es el elemento contenedor genérico:

<div> ...</div>

Es el que usamos cuando no tenemos otra etiqueta contenedora dedicada como article.

A menudo agregas un atributo class o id a este elemento, para permitir que se le aplique estilo usando CSS.

Existen otras etiquetas contenedoras.

Tenemos section, article, header, aside, main, footer, nav.

Estas se llaman elementos semánticos.

No tienen ningún estilo especial aplicado, todos funcionan como div pero su nombre tiene un significado específico adjunto.
Imagina que tienes una página con una parte de encabezado con el título del artículo, el contenido del artículo y, finalmente, un pie de página.

Podrías escribir el HTML así:

<div>
<div class="header">
<h1>Título</h1>
</div>
<div class="article">
<p>Contenido del artículo</p>
</div>
<div class="footer">
<p>Alguna información de pie de página</p>
</div>
</div>

O puedes darle a esas secciones más significado de esta manera, sin usar atributos de clase:

<section>
  <header>
    <h1>Título</h1>
  </header>
  <article>
    <p>Contenido del artículo</p>
  </article>
  <footer>
    <p>Alguna información de pie de página</p>
  </footer>
</section>

No hay nada incorrecto en usar <div>. Nada cambia desde el punto de vista visual. Pero esas etiquetas tienen más significado, y las herramientas como lectores de pantalla pueden inferir información a partir de este significado.
Veamos cuándo usarlos.

Veamos cuándo usarlos.

<article>

Identifica un elemento que puede ser independiente de otros en una página, como una entrada de blog en la página de inicio de un blog.

<article>
  <h2>Una entrada de blog</h2>
  <a href="/1">Leer más</a>
</article>
<article>
  <h2>Otra entrada de blog</h2>
  <a href="/2">Leer más</a>
</article>

Un artículo también puede ser el elemento principal en una página.

<article>
  <h2>Una entrada de blog</h2>
  <p>Aquí está el contenido...</p>
</article>

<section>

Representa una sección de un artículo largo. Cada sección tiene una etiqueta de encabezado (h1-h6), seguida del contenido de la sección.

<article>
  <section>
    <h2>Una sección de la página</h2>
    <p>...</p>
    <img ...>
  </section>
  <section>
    <h2>Otra sección de la página</h2>
    <p>...</p>
  </section>
</article>

Esta etiqueta es útil para dividir un artículo largo en diferentes secciones.

<nav>

Se utiliza para crear el marcado que define la navegación de la página.

<nav>
  <ol>
    <li><a href="/">Inicio</a></li>
    <li><a href="/blog">Blog</a></li>
  </ol>
</nav>

<aside>

Se utiliza para agregar un fragmento de contenido relacionado con el contenido principal, como una cita o una barra lateral.

<div>
  <p>algo de texto..</p>
  <aside>
    <p>Una cita..</p>
  </aside>
  <p>otro texto...</p>
</div>

El uso de aside es una señal de que las cosas que contiene no forman parte del flujo regular de la sección en la que se encuentra.

<header>

Representa una parte de la página que es la introducción, puede contener uno o más encabezados (h1-h6), el eslogan del artículo, una imagen, etc.

<article>
  <header>
    <h1>Título del artículo</h1>
  </header>
  ...
</article>

<main>

Representa la parte principal de una página.

<body>
  ....
  <main>
    <p>....</p>
  </main>
</body>

<footer>

<footer>
       <p>&copy; 2024 Juan Pérez. Todos los derechos reservados.</p>
   </footer>

Se utiliza para determinar el pie de página de un artículo o de la página en general.