The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

  • Twitter Updates

  • My Flickr Stream

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,860 other subscribers

What is the difference between <p>, <div> and <span> in HTML&XHTML?

Posted by jpluimers on 2023/06/06

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… div and p are “block elements” (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. [Wayback/Archive] 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: ppre, 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 divs and ps). 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.

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:

[Wayback/Archive] HTML Standard: kinds of content

–jeroen

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.