Tengo curiosidad, la etiqueta span parece funcionar igual que un div.
15
La principal diferencia es que la <span>etiqueta es un elemento en línea , mientras que la <div>etiqueta es un elemento de nivel de bloque .
Se mostrarán dos elementos de nivel de bloque (divs) uno después del otro verticalmente, mientras que dos elementos en línea (tramos) se mostrarán uno después del otro horizontalmente.
Para comprender la diferencia en términos visuales, podría ser útil pensar en el <span>elemento como una palabra y el <div>elemento como un párrafo: los divs se usan generalmente para diseñar bloques de contenido. Los espacios se usan normalmente para resaltar grupos de palabras dentro de ese contenido.
Tanto Nick como Toby han respondido bien a tu pregunta, pero para llevarla un nivel más allá.
Por defecto, <div>s son elementos de bloque y <span>s son elementos en línea. Estas son etiquetas genéricas que simplemente proporcionan bloques o contenedores en línea. En la práctica, estos pueden ser torcidos a través de CSS para ser algo intercambiables configurando el atributo css de visualización en 'bloque', 'en línea' o incluso 'bloque en línea' (entre otros).
Sin embargo, no se recomienda inclinarlos para que actúen como los demás. Y, hay reglas en HTML que realmente evitan el uso de elementos de nivel de bloque dentro de otros elementos (principalmente elementos en línea como la <a>etiqueta), por lo tanto, debe intentar usar la etiqueta correcta donde sea apropiado y solo tratar de anular su comportamiento cuando absolutamente necesario.
Intenta pensar en ellos como elementos semánticos. Úselo <span>cuando desee etiquetar el contenido utilizado dentro de bloques de texto, por ejemplo, y use <div>cuando necesite agregar una estructura adicional a la página misma.
Dicho esto, HTML5 tiene una gran cantidad de elementos semánticos que deberían reducir significativamente la necesidad de usar cualquiera de estas etiquetas genéricas. El uso de etiquetas semánticas es muy recomendable en lugar de agregar grandes cantidades de divs y tramos.
¡Buena suerte!
La principal diferencia es que divsson elementos de bloque y spansson elementos en línea.
Ambos se pueden diseñar usando CSS para actuar como lo desee, pero fuera de la caja que normalmente usaría spanspara divisiones en línea más pequeñas y divspara bloques más grandes.
Algunas cosas afectarán elementos en línea y de bloque diferentes, por ejemplo, no puede poner una altura en un spanelemento.