<div>: El elemento de división de contenido

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.

El elemento de HTML <div> es el contenedor genérico para el contenido. No tiene efecto en el contenido o en el diseño hasta que se le aplica un estilo de alguna manera usando CSS (p. ej. se le aplica un estilo directamente o se aplica algún tipo de modelo de diseño como Flexbox a su elemento principal).

Pruébalo

<div class="warning">
  <img
    src="/shared-assets/images/examples/leopard.jpg"
    alt="An intimidating leopard." />
  <p>Beware of the leopard</p>
</div>

.warning {
  border: 10px ridge #f00;
  background-color: #ff0;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

.warning img {
  width: 100%;
}

.warning p {
  font: small-caps bold 1.2rem sans-serif;
  text-align: center;
}

Como contenedor "puro", el elemento <div> no representa nada inherentemente. En cambio, se usa para agrupar contenido de modo que se pueda diseñar fácilmente usando los atributos class o id, marcando una sección de un documento como escrita en un idioma diferente (usando el atributo lang), y así sucesivamente.

Atributos

Este elemento incluye los atributos globales.

Nota: El atributo align está obsoleto; no lo uses más. En su lugar, deberías usar propiedades o técnicas de CSS como CSS Grid o CSS Flexbox para alinear y posicionar elementos <div> en la página.

Notas de uso

El elemento <div> debe usarse solo cuando ningún otro elemento semántico (como <article> o <nav>) sea apropiado.

Preocupaciones de accesibilidad

El elemento <div> tiene un rol implícito de generic, y no ninguno. Esto puede afectar a cierta combinación de declaraciones ARIA que esperan un elemento descendiente directo con cierto rol para funcionar correctamente.

Ejemplos

Un ejemplo simple

html
<div>
  <p>
    Cualquier tipo de contenido aquí. Como &lt;p&gt;, &lt;table&gt;. ¡Lo que
    quieras!
  </p>
</div>

Resultado

Un ejemplo con estilos

Este ejemplo crea un cuadro sombreado aplicando un estilo al <div> usando CSS. Ten en cuenta que el uso del atributo class en el <div> para aplicar el estilo llamado "shadowbox" al elemento.

HTML

html
<div class="shadowbox">
  <p>
    Aquí hay una nota muy interesante exhibida en un hermoso cuadro sombreado.
  </p>
</div>

CSS

css
.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

Resultado

Resumen técnico

Categorías de contenido Contenido permitido Omisión de etiqueta Padres permitidos Rol ARIA implícito Roles ARIA permitidos Interfaz en el DOM

Flujo de contenido, contenido palpable.

Flujo de contenido.
O (en WHATWG HTML): Si el padre es un elemento <dl>: uno o más elementos <dt> seguidos de uno o más elementos <dd>, opcionalmente entremezclados con elementos <script> y <template>.

Ninguna, tanto la etiqueta inicial como la final son obligatorias.

Cualquier elemento que acepte flujo de contenido.
O (en WHATWG HTML): Elemento <dl>.

generic

Cualquier

HTMLDivElement

Elementos de seccionamiento semántico: <section>, <article>, <nav>, <header>, <footer>
Elemento <span> para diseñar el contenido de la frase

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 10 abr 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

<div>: El elemento de división de contenido

In this article

Pruébalo

Atributos

Notas de uso

Preocupaciones de accesibilidad

Ejemplos

Un ejemplo simple

Resultado

Un ejemplo con estilos

HTML

CSS

Resultado

Resumen técnico

Especificaciones

Compatibilidad con navegadores

Véase también

Help improve MDN