<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 julio de 2015.

El elemento deHTML<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 usandoCSS (p. ej. se le aplica un estilo directamente o se aplica algún tipo de modelo de diseño comoFlexbox a su elemento principal).

Pruébalo

<div>  <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 atributosclass oid, marcando una sección de un documento como escrita en un idioma diferente (usando el atributolang), y así sucesivamente.

Atributos

Este elemento incluye losatributos globales.

Nota:El atributoalign está obsoleto; no lo uses más. En su lugar, deberías usar propiedades o técnicas de CSS comoCSS Grid oCSS 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.

<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 atributoclass en el<div> para aplicar el estilo llamado"shadowbox" al elemento.

HTML

html

<div>  <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 (enWHATWG 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 acepteflujo de contenido. O (enWHATWG HTML): Elemento`<dl>`.
Rol ARIA implícito	`generic`
Roles ARIA permitidos	Cualquier
Interfaz en el DOM	`HTMLDivElement`