La etiqueta div se conoce como etiqueta de división. La etiqueta div se usa en HTML para hacer divisiones de contenido en la página web como (texto, imágenes, encabezado, pie de página, barra de navegación, etc.). La etiqueta div tiene una etiqueta de apertura (<div>) y de cierre (</div>) y es obligatorio cerrar la etiqueta. La Div es la etiqueta más útil en el desarrollo web porque nos ayuda a separar los datos en la página web y podemos crear una sección particular para datos o funciones particulares en las páginas web.
- La etiqueta div es una etiqueta de nivel de bloque
- Es una etiqueta de contenedor genérico.
- Se utiliza para el grupo de varias etiquetas de HTML para que se puedan crear secciones y se les pueda aplicar estilo.
Como sabemos, la etiqueta Div es una etiqueta a nivel de bloque en este ejemplo, la etiqueta div contiene todo el ancho. Se mostrará la etiqueta div cada vez en una nueva línea, no en la misma línea.
Ejemplo 1:
html
<html>
<head>
<title>gfg</title>
<style type=text/css>
p{
background-color:gray;
margin: 10px;
}
div
{
color: white;
background-color: 009900;
margin: 2px;
font-size: 25px;
}
</style>
</head>
<body>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
</body>
</html>
Producción:
Como sabemos, la etiqueta div se usa para agrupar elementos HTML y es para aplicarles CSS y diseño web. Veamos el siguiente ejemplo sin usar la etiqueta div. necesitamos aplicar CSS para cada etiqueta (en el ejemplo usando etiquetas H1 H2 y dos párrafos p )
Ejemplo 2:
html
<html>
<head>
<title>gfg</title>
<style type=text/css>
p{
color: white;
background-color: 009900;
width: 400px;
}
h1
{
color: white;
background-color: 009900;
width: 400px;
}
h2
{
color: white;
background-color: 009900;
width: 400px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
<h2>GeeksforGeeks</h2>
<p>GCET is an entrance test for the extensive classroom
program by GeeksforGeeks to build and enhance Data
Structures and Algorithm concepts, mentored by Sandeep
Jain (Founder & CEO, GeeksforGeeks).He has 7 years of
teaching experience and 6 years of industry experience.
</p>
</body>
</html>
Producción:
Creación de un diseño web usando la etiqueta Div La etiqueta div es una etiqueta contenedora dentro de la etiqueta div. Podemos poner más de un elemento HTML y podemos agruparlos y aplicarles CSS. La etiqueta div se puede usar para crear un diseño de páginas web. En los ejemplos a continuación, se muestra cómo crear un diseño web. También podemos crear un diseño web usando etiquetas de tablas, pero las etiquetas de tablas son muy complejas para modificar el diseño. La etiqueta div es muy flexible para crear diseños web. y fácil de modificar. en el siguiente ejemplo, se mostrará la agrupación de elementos HTML utilizando la etiqueta div y se creará un diseño web por bloques.
Ejemplo:
html
<html>
<head>
<title>gfg</title>
<style type=text/css>
.leftdiv
{
float: left;
}
.middlediv
{
float: left;
background-color:gray
}
.rightdiv
{
float: left;
}
div{
padding : 1%;
color: white;
background-color: 009900;
width: 30%;
border: solid black;
}
</style>
</head>
<body>
<div class="leftdiv">
<h1>GeeksforGeeks</h1>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
<h2>GeeksforGeeks</h2>
<p>GCET is an entrance test for the extensive classroom
programme by GeeksforGeeks to build and enhance Data
Structures and Algorithm concepts, mentored by Sandeep
Jain (Founder & CEO, GeeksforGeeks).He has 7 years of
teaching experience and 6 years of industry experience.
</p>
</div>
<div class="middlediv">
<h1>GeeksforGeeks</h1>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
<h2>GeeksforGeeks</h2>
<p>GCET is an entrance test for the extensive classroom
programme by GeeksforGeeks to build and enhance Data
Structures and Algorithm concepts, mentored by Sandeep
Jain (Founder & CEO, GeeksforGeeks).He has 7 years of
teaching experience and 6 years of industry experience.
</p>
</div>
<div class="rightdiv">
<h1>GeeksforGeeks</h1>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
<h2>GeeksforGeeks</h2>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
</div>
</body>
</html>
Usando la etiqueta Div, podemos cubrir la brecha entre la etiqueta de encabezado y la etiqueta de párrafo en este ejemplo, se mostrará un diseño web de tres bloques.
Producción:
podemos usar CSS en cualquier división usando los siguientes métodos:
1. Usar clase: podemos usar Clase en ese div en particular, ya sea en CSS interno o CSS externo
- En el caso de CSS interno: necesitamos definir Clase en la sección <head> de HTML dentro del elemento <style> .
- En el caso de CSS externo: necesitamos crear un archivo .css separado e incluirlo en el código HTML en la sección <head> usando el elemento <link> .
- Código:
html
<html> <head> <link rel="stylesheet" href="color.css"> <title> gfg </title> </head> <body> <center> <div class="color"> <!--open tag of Div!--> <caption> <h1>GEEKSFORGEEKS</h1> </caption> <h1>Inline CSS is not USED in THIS method. </h1> </div> <!--closing tag of Div!--> </center> </body> </html>
- CSS para clase de color: nombre de archivo color.css
html
.color
{
height:400px;
width:600px;
border:1px solid;
background-color: 009900;
}
- Producción:
2. CSS en línea: podemos usar directamente CSS en div y este método no requiere de CLASS. Div en la codificación HTML también se usa como una etiqueta contenedora porque es la que puede contener todas las demás etiquetas.
- Código:
html
<html> <head> <title> gfg </title> </head> <body> <center> <div style="height:300px; width:500px; color:white; border:1px solid; background-color: 009900;"> <!--open tag of Div!--> <caption> <h1>GEEKSFORGEEKS</h1> </caption> <h1>Inline CSS is USED in THIS method. In this div no class is used. </h1> </div> <!--closing tag of Div!--> </center> </body> </html>
- Producción:
Diferencia entre la etiqueta Div y la etiqueta span
La etiqueta div y span son dos etiquetas comunes cuando se crean páginas usando HTML y realizan funciones diferentes en ellas, mientras que la etiqueta div es un elemento de nivel de bloque y el espacio es un elemento en línea. La etiqueta div crea un salto de línea y, de forma predeterminada, crea una división entre el texto que viene después de la etiqueta como comenzado y hasta que la etiqueta termina con </div>. La etiqueta div crea cajas o contenedores separados para todos los elementos dentro de esta etiqueta, como texto, imágenes, párrafos.
| Propiedades | Etiqueta de división | Etiqueta de tramo |
|---|---|---|
| Tipos de elementos | Nivel de bloque | En línea |
| Espacio/Ancho | Contiene todo el ancho disponible | Toma solo el ancho requerido |
| Ejemplos | Títulos, Párrafo, forma | Atributo, imagen |
| Usos | Diseño web | contenedor para algún texto |
| Atributos | No requerido, con css común, clase | No requerido, con css común, clase |
La etiqueta span no crea un salto de línea similar a una etiqueta div, sino que permite al usuario separar cosas de otros elementos a su alrededor en una página dentro de la misma línea. Al evitar el salto de línea, solo cambia el texto seleccionado, manteniendo todos los demás elementos a su alrededor iguales. El siguiente ejemplo mostrará la diferencia entre la etiqueta span y div, mientras que la etiqueta div contiene el ancho completo y la etiqueta span contiene solo el ancho requerido y las partes restantes están libres para otro elemento.
- Código:
html
<html>
<head>
<title>gfg</title>
<style type=text/css>
p{
background-color:gray;
margin: 10px;
}
div
{
color: white;
background-color: 009900;
margin: 2px;
font-size: 25px;
}
span
{
color: black;
background-color: gray;
margin: 5px;
font-size: 25px;
}
</style>
</head>
<body>
<!-- below some div tags -->
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
<!-- below some span tags -->
<span>span-tag</span>
<span>span-tag</span>
<span>span-tag</span>
<span>span-tag</span>
</body>
</html>
Producción:
Navegador compatible: los navegadores compatibles con la etiqueta <div> se enumeran a continuación:
- Google Chrome
- Borde 12
- explorador de Internet
- Firefox 1
- Ópera
- Safari
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
Publicación traducida automáticamente
Artículo escrito por AkashRawat y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA