<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
<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
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
<div>
<p>
Cualquier tipo de contenido aquí. Como <p>, <table>. ¡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
<div class="shadowbox">
<p>
Aquí hay una nota muy interesante exhibida en un hermoso cuadro sombreado.
</p>
</div>
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 # the-div-element |