<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 July 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

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> y <template>.
Omisión de etiqueta Ninguna, tanto la etiqueta inicial como la final son obligatorias.
Padres permitidos Cualquier elemento que acepte flujo de contenido.
O (en WHATWG HTML): Elemento <dl>.
Rol ARIA implícito generic
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