Referencia de etiquetas

Etiqueta div en HTML: contenedor genérico y uso con CSS

La etiqueta <div> crea un contenedor genérico que agrupa contenido sin añadir por sí misma un significado temático específico. Sirve, por ejemplo, para aplicar un mismo borde y espaciado a un título y varios párrafos. Úsala cuando necesites esa agrupación para CSS o JavaScript y no haya un elemento HTML que describa mejor su función.

Ejemplo mínimo: agrupar un título y un párrafo

<div class="tarjeta">
  <h2>Lección de HTML</h2>
  <p>Aprende a crear párrafos.</p>
</div>

Verás un encabezado y un párrafo. La clase tarjeta es un nombre elegido por quien escribe el HTML: no produce automáticamente un fondo, un borde ni una tarjeta. Para obtener esa apariencia hace falta CSS.

Puedes probar este fragmento dentro del <body> de un documento HTML; el caso práctico de abajo muestra la estructura completa. Si retiras únicamente <div class="tarjeta"> y </div>, conservando sus hijos, el título y el párrafo siguen apareciendo. Pierdes el contenedor común al que aplicar estilos o desde el que seleccionar ambos elementos.

Sintaxis y contexto válido

Escribe una apertura <div> y un cierre </div>; ninguna de las dos etiquetas se puede omitir. En HTML, <div /> tampoco cierra el elemento.

En su uso habitual, <div> admite contenido de flujo, como párrafos, encabezados, listas y otros contenedores. Puede aparecer donde el padre admita ese contenido, por ejemplo en <body>, <section> u otro <div>. Cada hijo conserva sus propias restricciones: una lista sigue necesitando sus elementos <li>.

No coloques un <div> dentro de <p>: el párrafo admite contenido de frase, y el analizador HTML cierra el párrafo antes del contenedor. Tampoco es un sustituto de los hijos requeridos por una tabla o una lista. Hay contextos especiales: como hijo de <dl>, debe agrupar uno o más <dt> seguidos de uno o más <dd>, con las excepciones para scripts y plantillas que fija el modelo de contenido de <div> en el estándar.

El navegador suele mostrar <div> como un bloque mediante su CSS predeterminado. Puedes cambiar su propiedad display; ese cambio afecta al diseño, pero no lo convierte en una sección temática. La hoja de estilos sugerida para contenido de flujo permite distinguir apariencia y significado.

Cuándo elegir div, section o span

Antes de añadir un contenedor, identifica qué estás agrupando:

<div>: una agrupación para el diseño o para que un script trate varios elementos juntos, sin una función semántica más precisa.
<section>: una parte temática del documento, normalmente con un encabezado que identifica su asunto. No es equivalente a <div> ni hace falta para cada caja con borde. Consulta la definición normativa de <section>.
<span>: un fragmento de contenido de frase, como unas palabras dentro de un párrafo. Por defecto se presenta en línea. Su modelo de contenido no permite usarlo para envolver varios párrafos como harías habitualmente con <div>.

Para una pieza independiente, como una entrada de blog o una ficha que tenga sentido por separado, considera <article>. El tamaño o la forma de tarjeta no determinan esa elección.

Caso práctico: una tarjeta con CSS

Guarda este código como tarjeta-div.html y ábrelo en un navegador. Incluye todo lo necesario para el ejemplo; funciona al abrir el archivo localmente y no necesita JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Preparación del taller de HTML</title>
    <style>
      body {
        margin: 1rem;
        font-family: sans-serif;
        line-height: 1.5;
      }

      .tarjeta {
        box-sizing: border-box;
        max-width: 32rem;
        border: 2px solid #24556b;
        padding: 1rem;
        background: #eef7fa;
      }

      .tarjeta h2 {
        margin-top: 0;
      }
    </style>
  </head>
  <body>
    <h1>Taller de HTML</h1>
    <p>Estas son las instrucciones para la sesión de hoy.</p>

    <div class="tarjeta">
      <h2>Material de la sesión</h2>
      <p>Para seguir esta sesión, prepara lo siguiente:</p>
      <ul>
        <li>Un cuaderno para tomar notas.</li>
        <li>Un equipo con un editor de texto y un navegador.</li>
      </ul>
      <a href="#programa">Consultar el programa</a>
    </div>

    <h2 id="programa">Programa del taller</h2>
    <p>Crearemos una página con un encabezado y dos párrafos.</p>
  </body>
</html>

La tarjeta rodea el material con un borde azul, un fondo claro y espacio interior. padding separa el contenido del borde; max-width limita el ancho sin imponer una anchura fija en móvil. El enlace lleva al programa del mismo documento y se puede activar con el teclado.

Prueba estos cambios por separado:

Retira el bloque .tarjeta del CSS: permanece el contenido, pero desaparecen el borde, el fondo y el espacio interior añadido.
Cambia padding: 1rem por padding: 2rem: aumenta la separación dentro del contenedor.
Retira solo las etiquetas del <div>: sus hijos permanecen, pero los selectores que dependen de .tarjeta dejan de aplicarse.

Aquí <div> agrupa visualmente instrucciones que forman parte de la página del taller. Si la tarjeta fuese una ficha autónoma con nombre del taller, fecha y descripción completa, <article class="tarjeta"> podría ser apropiado. Mantener la clase conservaría el CSS mostrado; el cambio de elemento expresaría la independencia del contenido. No hace falta sustituir todos los <div> por <article>.

Atributos: class, id y data-*

<div> no tiene atributos específicos propios. Admite los atributos globales de HTML, que cumplen funciones diferentes:

class="tarjeta" permite reutilizar un selector CSS o localizar un grupo desde JavaScript. Varias tarjetas pueden compartir la clase.
id="material" identifica un elemento concreto; su valor debe ser único en el documento y permite enlazar con #material.
data-curso="html" guarda un dato personalizado para la página. No muestra texto ni ejecuta una acción por sí solo; un script puede leerlo mediante la propiedad DOM dataset.curso.

padding y display son propiedades CSS; dataset es una propiedad accesible desde JavaScript. Ninguna es un atributo específico de <div>. Tampoco existe un href que convierta el contenedor en enlace: ese atributo corresponde al <a> usado en el ejemplo.

Accesibilidad y errores frecuentes

Un id="navegacion" o una clase llamada boton no cambia el significado del contenedor. Si necesitas navegación, una sección o un control, elige el elemento que representa esa función.

Para ejecutar una acción, usa <button>; para ir a un destino, usa <a>. Un <div> con un evento de clic no recibe automáticamente el foco ni la interacción de teclado de esos controles. Añadir role="button" tampoco implementa esa interacción, como explica la guía de prácticas ARIA de W3C. La tarjeta de este artículo no necesita un rol adicional.

¿Puede un div contener otros div? Sí, cuando el contexto admite contenido de flujo. Añade cada nivel con un propósito reconocible; una cadena de contenedores sin estilos, atributos ni función solo dificulta leer el documento.

¿Por qué mi div no parece una tarjeta? Comprueba primero que la clase coincide con el selector CSS, después que los estilos se han cargado y, por último, que otra regla no sustituye el borde o el espaciado. El nombre de la clase no incorpora estilos.

Compatibilidad y fuentes

<div> tiene soporte consolidado en los navegadores actuales. La referencia y compatibilidad de MDN, consultada el 3 de octubre de 2026, no indica una limitación relevante para estos ejemplos. Su contenido y los estilos incluidos funcionan también con JavaScript deshabilitado; el elemento no depende de scripts para agrupar sus hijos.