As others have answered… div
is a “block element” (now redefined as Flow Content) and span
is an “inline element” (Phrasing Content). Yes, you may change the default presentation of these elements, but there is a difference between “flow” versus “block”, and “phrasing” versus “inline”.
An element classified as flow content can only be used where flow content is expected, and an element classified as phrasing content can be used where phrasing content is expected. Since all phrasing content is flow content, a phrasing element can also be used anywhere flow content is expected. The specs provide more detailed info.
All phrasing elements, such as strong
and em
, can only contain other phrasing elements: you can’t put a table
inside a cite
for instance. Most flow content such as div
and li
can contain all types of flow content (as well as phrasing content), but there are a few exceptions: p
, pre
, and th
are examples of non-phrasing flow content (“block elements”) that can only contain phrasing content (“inline elements”). And of course there are the normal element restrictions such as dl
and table
only being allowed to contain certain elements.
While both div
and p
are non-phrasing flow content, the div
can contain other flow content children (including more div
s and p
s). On the other hand, p
may only contain phrasing content children. That means you can’t put a div
inside a p
, even though both are non-phrasing flow elements.
Now here’s the kicker. These semantic specifications are unrelated to how the element is displayed. Thus, if you have a div
inside a span
, you will get a validation error even if you have span {display: block;}
and div {display: inline;}
in your CSS.