W3C의 HTML 4.01 표준권고안(번역)에 따르면 span과 div는 모두 그룹화 엘러먼트(grouping elements)로서, 엘러먼트가 포함하는 내용물이 inline-level이냐, block-level이냐 하는 것을 정의하는 것 외에는 다른 역할이나 차이점이 전혀 없습니다. inline-level과 block-level의 차이점은 구글링만 하면 무수히 나올테니 생략하고, 이제부터는 실용적인 접근을 해보겠습니다.

첫 번째, 공간을 어떻게 차지하는가

가장 두드러진 차이점은 div는 주어진 가로폭을 전부 차지하고 span은 그렇지 않다는 것입니다.

쉽게 구분되죠?

두 번째, 폭(width)과 높이(height)

또한 div는 폭과 높이를 지정할 수 있지만 span은 그렇지 않습니다.

text-align, float 등의 속성도 마찬가지로 block-level인 div에만 적용할 수 있습니다. 억지로 속성을 넣어봤자 효과는 전혀 없고, 웹 표준만 어기는 결과를 가져옵니다.

세 번째, 줄 바꿈

그리고 위 첫 번째 성질로 인해 div는 필연적으로 줄 바꿈을 동반합니다. width 속성을 주어서 폭을 줄여도 나머지 공간은 사용되지 않은 채로 남아 있습니다.