I write most of my documentation in Markdown or reStructuredText, so I don’t bump into html questions as often as in the past. But recently, I had to document in html as markdown was impossible, bumped in the choice between using div or p tags for paragraphs, and remembered there was a p problem not present with div but forgot which problem.
So I found [Wayback/Archive] What is the difference between <p>, <div> and <span> in HTML&XHTML? where the red bit explained what I forgot:
As others have answered…
divandpare “block elements” (now redefined as Flow Content) andspanis 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. [Wayback/Archive] The specs provide more detailed info.
All phrasing elements, such as
strongandem, can only contain other phrasing elements: you can’t put atableinside acitefor instance. Most flow content such asdivandlican contain all types of flow content (as well as phrasing content), but there are a few exceptions:p,pre, andthare 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 asdlandtableonly being allowed to contain certain elements.While both
divandpare non-phrasing flow content, thedivcan contain other flow content children (including moredivs andps). On the other hand,pmay only contain phrasing content children. That means you can’t put adivinside ap, 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
divinside aspan, you will get a validation error even if you havespan {display: block;}anddiv {display: inline;}in your CSS.
Thanks [Wayback/Archive] Dhamu for asking that question and [Wayback/Archive] chharvey for explaining these details!
The [Wayback/Archive] HTML Standard: 3.2.5.2 Kinds of content has a cool diagram too:
The Wiert Corner - irregular stream of stuff 