Another difference between the and element in HTML & XHTML
Posted by jpluimers on 2023/07/04
A few weeks after queueing What is the difference between <p>, <div> and <span> in HTML&XHTML?, Stephan Kämper posted an interesting other “TIL“.
Besides that TIL, it also taught me about an on-line HTML validator. Cool: I learned two things from Stephan that day!
The above post talked about phrasing versus non-phrasing elements, Stephan discovered another difference between the p and div elements:
- The
pelement is structural and cannot contain lists likeolandul. - The
divelement is logical and can contain lists.
Stephan’s TIL: [Archive] Stephan Kämper on Twitter: “TIL or Life (and the HTML specification) is full of wonders and surprises ➙ “List elements (in particular, ol and ul elements) cannot be children of p elements.” …” / Twitter
It was based on his quest [Archive] Stephan Kämper on Twitter: “I try to write fairly simple & #valid #HTML ➙ …gist..Validating it with …online HTML-Validator…, I get the error ‘No p element in scope but a p end tag seen.‘ What? Why? Removing the list from the HTML, gets rid of the error… Why?!? I. don’t. get it. 1/2″ / Twitter, which I archived at [Wayback/Archive] Thread by @S_2K on Thread Reader App – Thread Reader App.
I responded this: [Archive] Jeroen Wiert Pluimers on Twitter: “@S_2K I thought it would be something like explained in p/div/span differences But it is yet another html oddity where structural and logical concept are mixed in one language.” / Twitter.
Both his quest and tweet referred to this key documentation part: [Wayback/Archive] HTML Standard: grouping content; the p element; note on lists:
List elements (in particular,
olandulelements) cannot be children ofpelements. When a sentence contains a bulleted list, therefore, one might wonder how it should be marked up.…
The solution is to realize that a paragraph, in HTML terms, is not a logical concept, but a structural one.
…
Authors wishing to conveniently style such “logical” paragraphs consisting of multiple “structural” paragraphs can use the
divelement instead of thepelement.
His example code is at [Wayback/Archive] a-simple-html-file.html.
And the validator is at [Wayback/Archive] Ready to check – Nu Html Checker.
More on that in Thanks Stephan Kämper for showing me how to validate HTML on-line at W3C (including all the modes and some surprise parameters!).
–jeroen
Thanks Stephan Kämper for showing me how to validate HTML on-line at W3C « The Wiert Corner – irregular stream of stuff said
[…] Another difference between the and element in HTML & XHTML […]