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