Estou curioso, a tag span parece funcionar da mesma forma que uma div.
15
A principal diferença é que a <span>tag é um elemento embutido , enquanto a <div>tag é um elemento no nível do bloco .
Dois elementos no nível do bloco (divs) serão exibidos um após o outro na vertical, enquanto dois elementos em linha (extensões) serão exibidos um após o outro na horizontal.
Para entender a diferença em termos visuais, pode ser útil pensar no <span>elemento como uma palavra e no <div>elemento como um parágrafo: divs são geralmente usados para criar blocos de conteúdo. As extensões são normalmente usadas para destacar grupos de palavras nesse conteúdo.
Nick e Toby responderam bem à sua pergunta, mas para levar um nível adiante.
Por padrão, <div>s são elementos de bloco <span>es são elementos embutidos. Essas são tags genéricas que simplesmente fornecem contêineres em bloco ou em linha. Na prática, eles podem ser alterados via CSS para serem um pouco intercambiáveis, configurando o atributo css de exibição como 'block', 'inline' ou mesmo 'inline-block' (entre outros).
No entanto, dobrá-los para agir como um outro não é recomendado. Além disso, existem regras no HTML que realmente impedem o uso de elementos no nível de bloco dentro de outros elementos (principalmente elementos embutidos, como a <a>tag). Portanto, você deve tentar usar a tag correta onde for apropriado e apenas substituir o comportamento deles quando absolutamente necessário.
Tente pensar neles como elementos semânticos. Use <span>quando desejar marcar o conteúdo usado dentro de blocos de texto, por exemplo, e use <div>s quando precisar adicionar estrutura extra à própria página.
Dito isto, o HTML5 possui uma infinidade de elementos semânticos que devem reduzir significativamente a necessidade de usar qualquer uma dessas tags genéricas. O uso de tags semânticas é altamente recomendado sobre a adição de grandes quantidades de divs e spans.
Boa sorte!
A principal diferença é que divssão elementos de bloco e spanssão elementos embutidos.
Ambos podem ser estilizados usando CSS para agir da maneira que desejar, mas fora da caixa, você normalmente usaria spanspara divisões embutidas menores e divsblocos maiores.
Algumas coisas afetam os elementos embutidos e bloqueiam diferentes; por exemplo, você não pode colocar uma altura em um spanelemento.