En este artículo, vamos a ver sobre la etiqueta <div> en HTML.
HTML tiene dos etiquetas importantes que se utilizan para un grupo de muchas otras etiquetas HTML y el contenido. Una es la etiqueta <div>, la otra es la etiqueta <span>.
Qué es la Etiqueta <div>
La etiqueta div es una etiqueta de división utilizada para muchas etiquetas HTML como tabla, lista y párrafo en la página web. Incluso, puede servir para hacer saltos de línea (aunque no se recomienda para este uso)
La mayoría de las veces la etiqueta div se utiliza en una página web vacía para dividir o hacer una sección de contenido o etiquetas HTML. Para hacer un diseño particular para algún contenido especial, la etiqueta <div> es útil porque no afecta cualquier diseño CSS.
Sintaxis:
La etiqueta div tiene obligatoriamente que abrir <div> y cerrar </div> su etiqueta.
<body>
<div>
Contenido de la etiqueta div en HTML
</div>
</body>- Notas:
- El elemento
<div>HTML se encuentra dentro de la etiqueta <body>. - La etiqueta
<div>se utiliza generalmente para agrupar elementos.
¿Cómo Funciona la Etiqueta <div? en HTML?
La etiqueta div puede contener varias etiquetas HTML y textos juntos.
Puedes ver el ejemplo de uso de una etiqueta div y sin etiqueta div.
Uso de la etiqueta <div> en HTML
Código:
<!DOCTYPE html>
<html>
<head>
<title>Cómo Funciona Etiqueta DIV</title>
<style type="text/css">
.one {
background-color: orange;
}
.two {
background-color: yellow;
}
</style>
</head>
<body>
<div class="one">
<h1>Contenido1 de la etiqueta div HTML</h1>
<p>La etiqueta Div se utiliza para agrupar muchas etiquetas HTML como tablas, listas y párrafos en una página web.
La etiqueta div se utiliza principalmente en páginas web vacías para dividir o crear secciones de contenido o etiquetas HTML.</p>
</div>
<div class="two">
<h1>Contenido2 de la etiqueta div HTML</h1>
<p>Para hacer una sección de datos o contenidos requeridos se utilizan múltiples etiquetas div en el contenedor.
Ejemplo: header, footer, barra de navegación, tabla, imágenes, textos, etc.</p>
</div>
</body>
Salida:
Explicación:
- El ejemplo anterior utiliza una etiqueta div en HTML. El primer div es de color naranja, y el segundo div es de color amarillo.
- Div contiene una etiqueta de encabezado (
<h1>) y párrafo (<p>) juntos. Dos etiquetas div dividen el contenedor con contenido diferente.
Sin utilizar la etiqueta <div> en HTML
Código:
<!DOCTYPE html>
<html>
<head>
<title>Cómo Funciona Etiqueta DIV</title>
<style type="text/css">
p {
background-color: orange;
}
h1 {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Contenido1 de la etiqueta div HTML</h1>
<p>La etiqueta Div se utiliza para agrupar muchas etiquetas HTML como tablas, listas y párrafos en una página web.
La etiqueta div se utiliza principalmente en páginas web vacías para dividir o crear secciones de contenido o etiquetas HTML.</p>
<h1>Contenido2 de la etiqueta div HTML</h1>
<p>Para hacer una sección de datos o contenidos requeridos se utilizan múltiples etiquetas div en el contenedor.
Ejemplo: header, footer, barra de navegación, tabla, imágenes, textos, etc.</p>
</body>
</html>Salida:
Explicación:
- El ejemplo anterior es sin usar una etiqueta
diven HTML. El encabezado y su párrafo están en una sección diferente. - El encabezado es amarillo, y el párrafo es de color naranja. Todos los encabezados y sus párrafos de contenido tienen diferentes tamaños.
Usos de la Etiqueta div
A continuación, se muestran los usos y necesidades de la etiqueta div:
- La etiqueta
divse utiliza principalmente para agrupar etiquetas y elementos como imágenes y sus descripciones. En las páginas web se utilizan muchas etiquetas HTML para crear contenido. Todas las etiquetas HTML son diferentes con significados particulares. La etiquetadivcombina todas las etiquetas HTML necesarias. - Una etiqueta
divsignifica etiquetas de división. En las páginas web, muchas entidades como encabezado, pie de página, barra de navegación, etc. se dividen en diferentes secciones con la etiquetadiv. - Se utiliza fácilmente para el estilo usando CSS y para manipulación usando JavaScript. La aplicación de estilos se vuelve más fácil usando la etiqueta
div. - La etiqueta
dives útil para lograr un aspecto atractivo en una página web y dar una mejor comprensión del contenido al usuario final.
Ejemplos de Etiquetas <div> HTML
A continuación, se muestran algunos ejemplos con etiqueta <div>:
Ejemplo #1 <div> con Clases
Este ejemplo es una etiqueta div con clases (class). Por ejemplo, la clase izquierda (leftdiv), media (middlediv) y derecha (rightdiv). div en este ejemplo es un contenedor vertical. Pero podemos colocar diferentes div en una sección como la derecha, izquierda o al centro, esto es útil para gestionar la posición de los contenidos.
<html>
<head>
<title>Ejemplo 1</title>
<style type="text/css">
.leftdiv {
float: left;
background-color: blue;
}
.middlediv {
float: left;
background-color: green;
}
.rightdiv {
float: left;
background-color: orange;
}
div {
padding: 1%;
color: white;
background-color: grey;
width: 28%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="leftdiv">
<h2>Lado Izquierdo</h2>
<p>La etiqueta Div se utiliza para agrupar muchas etiquetas HTML como tablas, listas y párrafos en una página web.
La etiqueta div se utiliza principalmente en una página web para dividir o crear una sección de contenido o etiquetas HTML.
Para hacer un diseño particular para algún contenido especial, la etiqueta div es útil porque no afecta a la disposición div y cualquier diseño CSS.</p>
</div>
<div class="middlediv">
<h2>Parte Central</h2>
<p>La etiqueta Div se utiliza para agrupar muchas etiquetas HTML como tablas, listas y párrafos en una página web.
La etiqueta div se utiliza principalmente en una página web para dividir o crear una sección de contenido o etiquetas HTML.
Para hacer un diseño particular para algún contenido especial, la etiqueta div es útil porque no afecta a la disposición div y cualquier diseño CSS.</p>
</div>
<div class="rightdiv">
<h2>Lado Derecho</h2>
<p>La etiqueta Div se utiliza para agrupar muchas etiquetas HTML como tablas, listas y párrafos en una página web.
La etiqueta div se utiliza principalmente en una página web para dividir o crear una sección de contenido o etiquetas HTML.
Para hacer un diseño particular para algún contenido especial, la etiqueta div es útil porque no afecta a la disposición div y cualquier diseño CSS.</p>
</div>
</body>
</html>
Ejemplo #2 <div> con Tablas
En este ejemplo, hemos utilizado etiquetas div para una tabla. A veces el diseño de la tabla cambia, pero la tabla colocada dentro de la etiqueta div entonces no se ve afectada en los diseños.
Código:
<html>
<head>
<title>Ejemplo 2</title>
<style type="text/css">
div {
color: white;
background-color: grey;
border: solid black;
}
tr, td {
border: 1px solid grey;
padding-top: 10px;
padding-bottom: 10px;
}
th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
}
</style>
</head>
<body>
<div>
<h2>Información de Estudiante</h2>
<table>
<tr>
<th>Nombre</th>
<th>Especialización</th>
<th>Ciudad</th>
</tr>
<tr>
<td>Ángel</td>
<td>Computación</td>
<td>Florencia</td>
</tr>
<tr>
<td>Alex</td>
<td>Diseño Gráfico</td>
<td>Londres</td>
</tr>
<tr>
<td>Fiorella</td>
<td>Mecatrónica</td>
<td>El Cairo</td>
</tr>
<tr>
<td>Jefferson</td>
<td>Programación</td>
<td>Barcelona</td>
</tr>
<tr>
<td>María</td>
<td>Electrónica</td>
<td>Roma</td>
</tr>
<tr>
<td>Melissa</td>
<td>Arquitectura</td>
<td>Bogotá</td>
</tr>
</table>
</div>
</body>
</html>
Ejemplo #3 <div> con Estilos
Este es un ejemplo sencillo de uso de estilo CSS.
Código:
<html>
<head>
<title>Ejemplo 3</title>
<style>
div {
height: 300px;
width: 500px;
color: white;
border: 1px solid;
background-color: orange;
}
</style>
</head>
<body>
<center>
<div>
<h2>Etiquetas div en HTML</h2>
<p>
La etiqueta Div es una etiqueta de división utilizada para agrupar muchas etiquetas HTML como tablas, listas y párrafos en una página web.
</p>
</div>
</center>
</body>
</html>
Diferencias entre las Etiquetas <div> y <span>
Las etiquetas div y span son dos etiquetas de uso común en la creación de páginas HTML y realizan diferentes funciones.
Mientras que la etiqueta div es un elemento de nivel de bloque y span es un elemento en línea, la etiqueta div crea un salto de línea y por defecto crea una división entre el texto que viene después de la etiqueta <div> hasta que la etiqueta termina con </div>.
| Propiedades | Etiqueta Div | Etiqueta Span |
|---|---|---|
| Tipos de elementos | A nivel de bloque (Block-Level) | En línea (Inline) |
| Espacio/Ancho | Contiene todo el ancho disponible | Toma sólo la Anchura requerida |
| Ejemplos | Encabezados, Párrafo, formulario | Atributo, imagen |
| Usos | Diseño web | contenedor de texto |
| Atributos | No es necesario. Con CSS común o clases | No es necesario. Con CSS común o clases |
La etiqueta span no crea un salto de línea similar a una etiqueta div, sino que permite al usuario separar elementos de otros elementos a su alrededor en una página dentro de la misma línea.
Al evitar el salto de línea, sólo cambia el texto seleccionado, manteniendo todos los demás elementos a su alrededor igual.
El siguiente ejemplo mostrará la diferencia entre las etiquetas span y div, donde la etiqueta div contiene toda la anchura y la etiqueta span sólo contiene la anchura requerida y el resto está libre para otro elemento.
<html>
<head>
<title>HTMLDESDECERO.ES</title>
<style type="text/css">
p {
background-color: gray;
margin: 10px;
}
div {
color: white;
background-color: #f6941f;
margin: 2px;
font-size: 25px;
}
span {
color: black;
background-color: gray;
margin: 5px;
font-size: 25px;
}
</style>
</head>
<body>
<!-- debajo algunas etiquetas div -->
<div>etiqueta div</div>
<div>etiqueta div</div>
<div>etiqueta div</div>
<div>etiqueta div</div>
<!-- debajo algunas etiquetas span -->
<span>etiqueta-span</span>
<span>etiqueta-span</span>
<span>etiqueta-span</span>
<span>etiqueta-span</span>
</body>
</html>
Conclusión
La etiqueta div en HTML se refiere a la creación de un contenedor que te permite hacer un grupo de elementos HTML que pueden ser estilizados de la misma manera. Este artículo ha demostrado el mecanismo de funcionamiento de la etiqueta div. Además, se exponen varios ejemplos que muestran cómo se puede utilizar una etiqueta div en HTML en diversos escenarios.
Quiero comentar algo