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

Salida:

Ejemplo con etiqueta div HTML
Ejemplo con etiqueta div HTML

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:

Ejemplo sin uso de etiqueta div HTML
Ejemplo sin uso de etiqueta div HTML

Explicación:

  • El ejemplo anterior es sin usar una etiqueta div en 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 div se 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 etiqueta div combina todas las etiquetas HTML necesarias.
  • Una etiqueta div significa 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 etiqueta div.
  • 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 div es ú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>
</p>
</div>
</body>
</html>
Ejemplo de etiqueta div HTML con class
Ejemplo de etiqueta div HTML con class

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>Angel</td>
<td>Computació </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>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 de etiqueta div HTML con tabla
Ejemplo de etiqueta div HTML con tabla

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>
<caption>
<h2> Etiquetas div en HTML</h3>
</caption>
<h3>
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.
</h3>
</div>
</center>
</body>
</html>
Ejemplo de etiqueta div HTML con estilos CSS
Ejemplo de etiqueta div HTML con estilos CSS

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

PropiedadesEtiqueta DivEtiqueta Span
Tipos de elementosA nivel de bloque (Block-Level)En línea (Inline)
Espacio/AnchoContiene todo el ancho disponibleToma sólo la Anchura requerida
EjemplosEncabezados, Párrafo, formularioAtributo, imagen
UsosDiseño webcontenedor de texto
AtributosNo es necesario. Con CSS común o clasesNo 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>
Ejemplo diferencias entre SPAN y DIV
Ejemplo diferencias entre SPAN y DIV

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.

5/5 - (1 voto)