div
is a block level element, span
is an inline element. That's basically the gist of it. ;)
To elaborate; the div
element's default styling is to be block level. That means it can contain other block level elements as well as in-line elements. The span
element's default styling is to be in-line, which means block level elements can contain it, but it can't contain block level elements. However, both of these can be altered using CSS, so you could have an inline div
and a block level span
!
Bear in mind that although you might be able to get a better content layout by making span
s block and div
s inline, if you try to include a block level element inside an element such as span
, the HTML validator might throw errors at you as technically those elements shouldn't be appearing there.
By 'block level' I mean it's a block of content and forces other blocks to appear below it. In-line elements appear within blocks of content, for example, you can add styling to text within a block by using the span
element, and it won't bring the text 'out of line'.