Etiqueta HTML <div>
La etiqueta <div> es un contenedor usado para definir una división o una sección. Es un elemento de nivel de bloque que no afecta inherentemente al contenido, pero se utiliza principalmente para agrupar elementos HTML que se estilizan con CSS o se manipulan con scripts.
Posicionamiento de bloques definidos por la etiqueta <div>
TIP
Recomendamos usar la etiqueta <div> solo cuando no sean apropiados otros elementos semánticos introducidos en HTML5 (como <nav>, <main> o <article>).
Como <div> es un elemento de nivel de bloque, se coloca un salto de línea antes y después de él.
Es posible colocar cualquier elemento HTML dentro de una etiqueta <div>, incluida otra <div>.
DANGER
Los elementos de nivel 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, use la etiqueta <span>, que se utiliza con elementos en línea.
Sintaxis
La etiqueta <div> viene 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>Cuando construimos diseños, tratamos con múltiples bloques definidos por la etiqueta <div>. El posicionamiento de estos bloques está en el corazón del diseño: 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 sus combinaciones) para determinar el lugar de cada bloque. Aprendamos más sobre estas técnicas.
Flexbox ¶
En los sitios web modernos, los diseños basados en float están siendo reemplazados por Flexbox. La idea principal detrás de Flexbox es que, con él, puede controlar la alineación, la dirección, el orden y el tamaño de los elementos dentro del contenedor.
Ejemplo de un 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 junto a otro o separados entre sí, lo que nos permite crear diferentes tipos de diseños, incluidas 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 ¶
Los márgenes negativos se pueden aplicar tanto a elementos estáticos como flotados.
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 desea posicionar un div en relación con un elemento particular, puede usar una combinación de 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>DANGER
position: relative no afecta la posición de los elementos en el flujo normal a menos que agregue desplazamientos.
Atributos ¶
| Attribute | Value | Description |
|---|---|---|
| align | left right center justify | Se usaba para alinear el contenido dentro de una etiqueta <div>. Este atributo no es compatible con HTML5. En su lugar, se usa la propiedad CSS text-align. |
La etiqueta <div> también admite los atributos globales y los atributos de evento.
Cómo dar estilo a una etiqueta HTML <div>
{
"tag_name": "div"
}Práctica
¿Cuál es la función principal de la etiqueta HTML <div>?