Ambas etiquetas ( <div> y <span> ) se usan para representar la parte de la página web, la etiqueta <div> se usa como parte de bloque de la página web y la etiqueta <span> se usa como una parte en línea de la página web como abajo:
<div>A Computer Science Portal for Geeks <span>GeeksforGeeks</span></div>
Etiqueta HTML <div>: 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 etiquetas de apertura (<div>) y de cierre (</div>) y es obligatorio cerrar la etiqueta. 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:
html
<!DOCTYPE html>
<html>
<head>
<title>Div tag</title>
<style>
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:
Etiqueta HTML <span>: el elemento HTML span es un contenedor en línea genérico para elementos y contenido en línea. Solía agrupar elementos con fines de estilo (mediante el uso de los atributos class o id). Una mejor manera de usarlo cuando no hay ningún otro elemento semántico disponible. La etiqueta span es muy similar a la etiqueta div, pero div es una etiqueta a nivel de bloque y span es una etiqueta en línea.
- Ejemplo:
html
<!DOCTYPE html> <html> <head> <title>span tag</title> </head> <body> <h2>Welcome To GFG</h2> <!-- Inside paragraph applying span tag with different style --> <p><span style="background-color:lightgreen"> GeeksforGeeks</span> is A Computer Science Portal where you can<span style="color:blue;"> Publish</span> your own <span style="background-color:lightblue;">articles</span> and share your knowledge with the world!! </p> </body> </html>
- Producción:
Diferencias entre las etiquetas <div> y <span>:
| <div> | <lapso> |
|---|---|
| La etiqueta <div> es un elemento de nivel de bloque. | La etiqueta <span> es un elemento en línea. |
| Lo mejor es adjuntarlo a una sección de una página web. | Lo mejor es adjuntar un CSS a una pequeña sección de una línea en una página web. |
| Acepta atributo de alineación. | No acepta atributo de alineación. |
| Esta etiqueta debe usarse para envolver una sección, para resaltar esa sección. | Esta etiqueta debe usarse para envolver cualquier palabra específica que desee resaltar en su página web. |
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 .