Ao se pensar em um layout ou na estilização de um conteúdo, por vezes precisamos controlar apenas partes específicas da página, seja para posicionar uma barra lateral que contém vários elementos ou deixar apenas uma frase de um texto em vermelho, por exemplo. Nesses casos podemos utilizar os elementos genéricos div para blocos de conteúdo e span, para trechos.
Esses dois elementos, funcionam como containers de conteúdo. Como são genéricos, diferentemente dos outros elementos HTML eles não fazem referência ao tipo de conteúdo que há dentro deles, mas eles são muito úteis na hora de manipular a identidade visual da página com CSS. Para isso, utilizamos os atributos class e id.
A div é utilizada para manipular blocos de conteúdo, como sessões inteiras de um site. É mais utilizada na hora de se pensar o layout como um todo.
O span é um elemento em linha utilizado para modificar pequenos trechos de texto que estão dentro de elementos em bloco, como o p, por exemplo.