Bugzilla – Bug 1022
Picture in a paragraph
Last modified: 2015-02-23 00:54:20 CET
If I try to validate this at HTML5, I get an error: <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <p><figure class="fig-imgbox fig-0 figcpt-left" style="float: left; width: 110px;"><picture> <source media="(min-width: 980px)" srcset="images/stories/hunde-beratung/hunde-erziehung-allgemein/hundefuehrung/ohne-leine-800.jpg" type="image/jpeg"/> <source media="(min-width: 641px)" srcset="images/stories/hunde-beratung/hunde-erziehung-allgemein/hundefuehrung/ohne-leine-640.jpg" type="image/jpeg"/> <source media="(min-width: 321px)" srcset="images/stories/hunde-beratung/hunde-erziehung-allgemein/hundefuehrung/ohne-leine-320.jpg, images/stories/hunde-beratung/hunde-erziehung-allgemein/hundefuehrung/ohne-leine-640.jpg 2x" type="image/jpeg"/> <source media="(max-width: 320px)" srcset="images/stories/hunde-beratung/hunde-erziehung-allgemein/hundefuehrung/ohne-leine-320.jpg, images/stories/hunde-beratung/hunde-erziehung-allgemein/hundefuehrung/ohne-leine-640.jpg 2x" type="image/jpeg"/> <img srcset="images/stories/hunde-beratung/hunde-erziehung-allgemein/hundefuehrung/ohne-leine-800.jpg 800w, images/stories/hunde-beratung/hunde-erziehung-allgemein/hundefuehrung/ohne-leine-640.jpg 640w, images/stories/hunde-beratung/hunde-erziehung-allgemein/hundefuehrung/ohne-leine-320.jpg 320w" sizes=" (min-width: 980px) 600px, (min-width: 641px) 400px, 320px" src="/images/stories/hunde-beratung/hunde-erziehung-allgemein/hundefuehrung/ohne-leine.jpg" width="110" height="83" alt="Hundespaziergang ohne Leine" title="Hundtraining ohne Leine" /></picture><figcaption class="fig-caption captfont-klein capt-0">Rudelführung</figcaption></figure>Fang mich, oh ja, das macht sooo Spaß; das "denkt" vielleicht der Hund, wenn sein Besitzer gerade mal wieder hinter ihm her hechtet, weil der Hund weg läuft. Seinen Hund ohne Leine frei laufen zu lassen, das ist für viele ein Traum, der manchmal auch einer bleibt. <a class="readon bc-button" href="/erziehung-allgemein/15-hund-ohne-leine-hundefuehrung.html">test</a></p> </body> </html> The closing Tag "</p>" produces an error: No p element in scope but a p end tag seen. But IMHO the W3C specifications allowes the use of this elements in a paragraph tag.
Hi, thanks for taking time to report this (In reply to s.berke from comment #0) > If I try to validate this at HTML5, I get an error: > > <!DOCTYPE html> > <html> > <head> > <title>Test</title> > </head> > <body> > <p><figure class="fig-imgbox fig-0 figcpt-left" style="float: left; width: ... > The closing Tag "</p>" produces an error: > > No p element in scope but a p end tag seen. > > But IMHO the W3C specifications allows the use of this elements in a > paragraph tag. Actually the HTML spec doesn't allow the figure element as a child of the p element. So the validator is behaving as expected here, in conformance with the spec. The http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-p-element section says that the content model of the p element is "Phrasing content" and the http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element section says that figure element is flow content and the contexts in which it can be used are "Where flow content is expected". And flow content is not expected to be child content of a p element; only phrasing context is excepted within the p element. Also in http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inbody you'll notice a part that says: ``` A start tag whose tag name is one of: "address", "article", "aside", "blockquote", "center", "details", "dialog", "dir", "div", "dl", "fieldset", "figcaption", "figure", "footer", "header", "hgroup", "main", "menu", "nav", "ol", "p", "section", "summary", "ul" If the stack of open elements has a p element in button scope, then close a p element. ``` That part is saying that if a p element is open and the HTML parser finds a <figure> start tag, then the parser must generate a </p> end tag before the <figure> element. So that's what leads to the error message from the validator that you're seeing.