<div>: El elemento de división de contenido
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde 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
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
| Especificación |
|---|
| HTML # the-div-element |