source tag (inside picture) is a unary tag but gets rendered with closing tag

[veritazx]

The html 5 picture tag uses unary source tags to define different source locations for the image using a source tag. These tags get rendered with a closing tag by diazo. W3C-Validators rank this as markup error.
Tested in Plone 5.0.5 (5015) with Barceloneta based theme and Plone 4.3.10 (4311) with special diazo theme.
Markup example:

<picture>
    <source srcset="...">
    <img src="..." />
</picture>

renders to:

<picture>
    <source srcset="...">
        <img src="..." />
    </source>
</picture>

If there is any way to avoid this using diazo rules, I'd appreciate a hint. Thanks!

[veritazx]

It is actually an lxml bug. But it prevents a clean HTML-validation for every Plone-Site that uses diazo with html5 - picture / source tags.

[rafaelbco]

2021 and we still have this bug 😄 ! I guess tracked it down to libxml2, one layer deeper than lxml. It seems they have to update their HTML grammar to treat source as a self closing tag.

To make it less bad, self-close the source tag in the template, i.e <source .... />. Then it will be rendered as <source ...></source>. Which is still wrong, but better.

[rafaelbco]

For the record: this is still a bug with lxml==4.9.4, the one that works with Plone 6.1 (see versions.cfg).

lxml>=5 seems not to be compatible