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

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

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 Flujo de contenido, contenido palpable.
Contenido permitido 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> (en-US) y <template>.
Omisión de etiqueta None, both the starting and ending tag are mandatory.
Padres permitidos Cualquier elemento que acepte flujo de contenido.
O (en WHATWG HTML): Elemento <dl>.
Rol ARIA implícito generic (en-US)
Roles ARIA permitidos Cualquier
Interfaz en el DOM HTMLDivElement

Especificaciones

Specification
HTML Standard
# the-div-element

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también