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:
The Wiert Corner - irregular stream of stuff 