Etiqueta HTML <div>
Aprende a usar la etiqueta <div> para agrupar elementos HTML y aplicarles estilos con CSS. Atributos class, id, style y más. Con ejemplos.
La etiqueta <div> es un contenedor que se utiliza para definir una división o sección. Es un elemento de bloque que no afecta inherentemente al contenido, sino que se emplea principalmente para agrupar elementos HTML y aplicarles estilos con CSS o manipularlos mediante scripts.
Como <div> es un elemento de bloque, cada uno comienza en una línea nueva y se expande para ocupar el ancho disponible. No tiene ningún significado semántico propio: es una caja genérica. Usa <div> para agrupar contenido de bloque; para agrupar o dar estilo a contenido en línea (unas pocas palabras dentro de una oración), utiliza en su lugar el equivalente en línea: la etiqueta <span>.
Posicionamiento de bloques definidos por la etiqueta <div>
Como <div> es un elemento de bloque, se inserta un salto de línea antes y después de él.
Es posible colocar cualquier elemento HTML dentro de una etiqueta <div>, incluyendo otro <div>.
Los elementos de bloque como <div> no pueden anidarse dentro de etiquetas <p>, ya que el párrafo se romperá en el punto donde se coloque la etiqueta <div>.
Para aplicar estilos dentro de un párrafo, usa la etiqueta <span>, que se emplea con elementos en línea.
Sintaxis
La etiqueta <div> va en pares. El contenido se escribe entre las etiquetas de apertura (<div>) y cierre (</div>).
Ejemplo de la etiqueta HTML <div>:
Ejemplo de la etiqueta HTML <div>
<!DOCTYPE html>
<html>
<head>
<title>The <div> Tag</title>
</head>
<body>
<h1> The <div> Tag </h1>
<div style="background-color:#8ebf42">
<p>We use the <div> tag to group two paragraphs for applying a background to the text, and to add color to this
<span style="color:#1c87c9">word</span> we place it within <span> tag.</p>
<p> Pay attention, that the <div> tag is a block-level element, so a line break is placed before and after
it.</p>
</div>
</body>
</html><div> vs. Elementos Semánticos
Un <div> es la herramienta adecuada cuando solo necesitas una caja genérica a la que aplicar estilos o scripts. Pero cuando esa caja representa una región significativa de la página —navegación, encabezado, artículo—, es preferible usar el elemento semántico HTML5 correspondiente. Las etiquetas semánticas describen qué es el contenido, lo que ayuda a los motores de búsqueda, los lectores de pantalla y otros desarrolladores a comprender tu marcado.
Compara la misma estructura escrita de dos formas:
<!-- Before: generic divs, no meaning -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>
<!-- After: semantic elements, self-describing -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Ambas versiones se renderizan de forma idéntica por defecto, pero la segunda es mucho más accesible y fácil de mantener.
Cuidado con la "sopa de divs". Envolver todo en elementos <div> anidados —<div class="nav">, <div class="header">, etc.— produce un marcado difícil de leer que no le ofrece nada útil a las tecnologías de asistencia. Antes de añadir un <div>, pregúntate si <nav>, <header>, <main>, <article>, <section> o <footer> encajan mejor.
<div> vs. <span>
Las etiquetas <div> y <span> son ambas contenedores genéricos sin significado propio; la diferencia está en el tipo de caja que crean:
<div>es de bloque. Comienza en una línea nueva, ocupa el ancho disponible y se usa para agrupar secciones más grandes de contenido (párrafos, listas, otros divs).<span>es en línea. Fluye dentro de una línea de texto y se usa para dar estilo o seleccionar un fragmento pequeño de contenido, como una palabra o frase.
<p>The word <span style="color:#1c87c9">highlighted</span> sits inside the text flow.</p>
<div style="background-color:#8ebf42">
<p>This whole block is grouped and given a background.</p>
</div>Como regla general: usa <div> para agrupar contenido de bloque, y <span> para envolver contenido en línea.
Al construir layouts, trabajamos con múltiples bloques definidos por la etiqueta <div>. El posicionamiento de estos bloques es el núcleo del diseño de páginas: colocar los elementos en las posiciones relativas correctas en todos los tamaños de pantalla es una de las tareas más importantes.
Según el contenido y los objetivos de la página, podemos usar diferentes técnicas (o combinaciones de ellas) para determinar la posición de cada bloque. Para los layouts modernos, las dos herramientas a las que debes recurrir primero son CSS Grid (para layouts bidimensionales de filas y columnas) y Flexbox (para filas o columnas unidimensionales). Las técnicas más antiguas que se muestran a continuación —floats, márgenes negativos y posicionamiento absoluto— siguen funcionando, pero rara vez son la mejor opción hoy en día.
CSS Grid
CSS Grid es la forma moderna y estándar de construir layouts bidimensionales, es decir, layouts que organizan bloques <div> en filas y columnas al mismo tiempo. Defines una cuadrícula en el contenedor con display: grid y describes sus pistas; luego los bloques hijos fluyen hacia las celdas.
Ejemplo de la etiqueta HTML <div> con CSS Grid:
Un ejemplo de la etiqueta HTML <div> con CSS Grid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
padding: 10px;
background-color: #1faadb;
}
.grid-container > div {
height: 60px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Este único grid-template-columns: 1fr 1fr 1fr crea tres columnas iguales, y los seis bloques <div> se distribuyen automáticamente en dos filas.
Flexbox
Cuando solo necesitas distribuir elementos a lo largo de un único eje —una fila o una columna—, Flexbox es la herramienta adecuada. En los sitios web modernos, los layouts basados en float están siendo reemplazados por Flexbox y CSS Grid. La idea principal detrás de Flexbox es que permite controlar la alineación, la dirección, el orden y el tamaño de los elementos dentro del contenedor.
Ejemplo de Flexbox con la etiqueta HTML <div>:
Un ejemplo de la etiqueta HTML <div> con Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
align-items: center; /* Use another value to see the result */
width: 100%;
height: 200px;
background-color: #1faadb;
}
.flex-container > div {
width: 25%;
height: 60px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Propiedad CSS float
La propiedad CSS float, o "floats", permite que los elementos aparezcan uno al lado del otro o separados entre sí, lo que nos permite crear diferentes tipos de layouts, incluyendo páginas de varias columnas, barras laterales, cuadrículas, etc.
Ejemplo de la etiqueta HTML <div> con la propiedad CSS float:
Ejemplo de la etiqueta HTML <div> con la propiedad CSS float
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
overflow: auto;
border: 3px solid #666;
}
.content div {
padding: 10px;
}
.content a {
color: darkblue;
}
.blue {
float: right;
width: 45%;
background-color: #1faadb;
}
.green {
float: left;
width: 35%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Resultado
Márgenes negativos (técnica heredada)
Los márgenes negativos se pueden aplicar tanto a elementos estáticos como flotantes para acercar bloques o hacer que se superpongan.
Ejemplo de márgenes negativos:
Ejemplo de la etiqueta HTML <div> con márgenes negativos
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content div {
padding: 2%;
}
.content a {
color: darkblue;
}
.main-content {
width: 30%;
margin-left: 32%;
}
.blue {
width: 25%;
margin-top: -10%;
background-color: #1faadb;
}
.green {
width: 20%;
margin: -35% auto auto 70%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="main-content">
<a href="#">This is some hyperlink inside div tag.</a>
</div>
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Posicionamiento relativo+absoluto
Si quieres posicionar un div relativo a un elemento concreto, puedes combinar position: relative y position: absolute.
Ejemplo de posicionamiento relativo+absoluto de la etiqueta HTML <div>:
Un ejemplo de la etiqueta HTML <div> con la propiedad CSS position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
position: relative;
height: 400px;
border: 1px solid #666;
}
.content div {
position: absolute;
width: 35%;
padding: 10px;
}
.blue {
right: 20px;
bottom: 0;
background-color: #1faadb;
}
.green {
top: 10px;
left: 15px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
</div>
</div>
</body>
</html>position: relative no afecta al posicionamiento de los elementos en el flujo normal a menos que se añadan desplazamientos.
Atributos
La etiqueta <div> no tiene atributos propios. En la práctica, depende de los atributos globales —más frecuentemente id, class, style, data-* y aria-*— para ser estilizada, manipulada por scripts o hecha accesible. También admite los atributos de evento.
| Atributo | Valor | Descripción |
|---|---|---|
| align | left right center justify | Obsoleto. Se usaba para alinear el contenido dentro de una etiqueta <div>. No está soportado en HTML5 — usa la propiedad CSS text-align en su lugar. |