search

Khan / live-editor

A browser-based live coding environment.
Other
764 stars 183 forks source link

Error buddy doesn't like <h1> tags inside <p> tags #411

Open kevinbarabash opened 9 years ago

kevinbarabash commented 9 years ago

https://www.khanacademy.org/computer-programming/spin-off-of-project-travel-webpage/6372692977647616

GoToLoop commented 9 years ago

According to <p>'s reference: https://developer.Mozilla.org/en-US/docs/Web/HTML/Element/p
Only "Phrasing" content is allowed inside it: https://developer.Mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content
However, the <h#> elements are all "Flow" content: https://developer.Mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content
Actually the opposite would end up the same, b/c heading elements accept "Phrasing" content only as well: https://developer.Mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
And the paragraph element is a "Flow" content just like the headings!

kevinbarabash commented 9 years ago

@GoToLoop TIL, thanks for all the links.

kevinbarabash commented 9 years ago

The error message is:

"You have a closing </p> tag that doesn't pair with the opening <body> tag. 
This is likely due to a missing or misordered </body> tag."
GoToLoop commented 9 years ago

That error message is more or less correct if we examine the resultant DOM layout after browser interprets those "misbehaving" tags:

<p id="travel-to-list">
  <h1>Some Text</h1>        
</p>

When browser "spots" the opening <h1> tag, it abruptly closes previous <p id=travel-to-list> tag w/ </p>. That's b/c <h1> is a flow content. And only phrasing content is allowed to be inside some <p> tag block. Therefore, we just ended up w/ an empty <p id=travel-to-list></p> content before the <h1>'s block!

After <h1></h1> block finishes, we got a solitary </p> closing tag. Browser simply adds an opening <p> tag to it. And again we got another empty <p></p> content! O_o

jjwon0 commented 9 years ago

Just a little bit of extra information: slowparse uses this document to determine whether there is an "optional" close tag required, and <p> can be closed with <h1> if they are successive.

Admittedly, this syntax is rather confusing, and Error Buddy doesn't really elucidate much here about the notion of optional closing tags.

GoToLoop commented 9 years ago

... and <p> can be closed with <h1> if they are successive.

Actually, any "flow"-type tags would automatically & forcibly close a paragraph <p> tag. B/c the <p> tag can't be allowed to accept other "flow"-type tag elements as its content! Also the end of </body> automatically closes them.

GoToLoop commented 9 years ago

We can do something like this:

<body>
  <h1>Some title
  <h2>Some subtitle
  <p>Some text.
  <h1>Another title

And any modern browser would add all of those missing closing tags automatically!

In order to test it, save the code block above as an ".html" file and open it in any browser. Hit F12 key and go to the "Inspector" or "Elements" tab so we can see its true DOM layout.

This is the DOM layout I've got from the ".html" file above via some Firefox-based browser btW:

<html>
    <head></head>
    <body>
        <h1>

        Some title

        </h1>
        <h2>

            Some subtitle

            <p>

            Some text.

            </p>
        </h2>
        <h1>

        Another title

        </h1>
    </body>
</html>
GoToLoop commented 9 years ago

On 2nd thought, even though the heading elements' reference says only "phrasing" content is allowed: https://developer.Mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements The <p>Some text. above ended up inside <h2>Some subtitle as its content! @_@ It didn't force the <h2> tag to abruptly close itself before the <p> tag starts. Seems like HTML is even more complicated than I thought... =(

jjwon0 commented 9 years ago

@GoToLoop I think its because <h2> only is forcibly closed by <p> if the <p> immediately follows the opening <h2>, according to that w3 link earlier.

GoToLoop commented 9 years ago

I've changed <h2>Some subtitle<p>Some text. to <h2><p>Some text.. And the result was the same: the <p> element stayed inside <h2> as its "valid" content. Even though <p> is of content type "flow". Supposedly not allowed for heading elements!

kevinbarabash commented 9 years ago

Although browsers automatically close tags, that behavior isn't communicated to users. So although the error message is correct, it's not particular helpful for users. I would expect a message along the lines of <p> tags cannot contain <h1> tags. That being said, I think fixing this issue will probably require a lot of effort which may be better spent elsewhere.

pollei commented 9 years ago

P tags can't contain H1 tags or other tags that are merely flow but not phrasing. for H1, H2 the closing tag is not optional to omit. http://www.w3.org/TR/html5/syntax.html#optional-tags http://www.w3.org/html/wg/drafts/html/CR/index.html#elements-1

In this case it's a LTA error message bug. http://design.perl6.org/S99.html#LTA Less than awesome

https://bugzilla.mozilla.org/show_bug.cgi?id=946393

pamelafox commented 9 years ago

My consultant just triaged our HTML/CSS challenge reports and identified h1 inside of p as the most common source of Oh Noes confusion, thus upping the priority of this issue.