Re: Nu-HTML checker - <details> as child of <figure>?

Joseph Polizzotto MA <[email protected]> Tue, 2 Jun 2020 08:59:10 -0700
Newsgroups gmane.org.w3c.validator
Message-ID <CAGQNLEUbnFyGw5-rmvf35H-3PuS8cUDrHDmyBPBP6LUAEAy6_w@mail.gmail.com>
--000000000000e903de05a71bfff1
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable

Our situation was indeed the first case:

<figure>
  <img src=3Dfoo alt=3Dbar>
  <figcaption>...</figcaption>
  <details><summary>...</summary></details>
</figure>

Though we would prefer that <details> came immediately after <figcaption>,
we can change our script to achieve this confirming case:

<figure>
  <figcaption>...</figcaption>
  <img src=3Dfoo alt=3Dbar>
  <details><summary>...</summary></details>
</figure>

Thanks again,

Joseph


On Mon, Jun 1, 2020 at 5:48 PM Michael[tm] Smith <[email protected]> wrote:

> For the figure element, the HTML defines the following content model:
>
>
> https://html.spec.whatwg.org/multipage/#the-figure-element:concept-elemen=
t-content-model
>
> > Either: one figcaption element followed by flow content.
> > Or: flow content followed by one figcaption element.
> > Or: flow content.
>
> So an example of a non-conforming case would be something like this:
>
> <figure>
>   <img src=3Dfoo alt=3Dbar>
>   <figcaption>...</figcaption>
>   <details><summary>...</summary></details>
> </figure>
>
> That example would cause the checker to report an "Element =E2=80=9Cdetai=
ls=E2=80=9D not
> allowed as child of element =E2=80=9Cfigure=E2=80=9D in this context" err=
or.
>
> Specifically, the spec requirements don=E2=80=99t allow content both befo=
re and
> after the figcaption element =E2=80=94 either the figcaption must be the =
first
> child of the figure, or it must be the last child.
>
> But both of the following would be conforming, and would not cause the
> checker to report any error.
>
> <figure>
>   <figcaption>...</figcaption>
>   <img src=3Dfoo alt=3Dbar>
>   <details><summary>...</summary></details>
> </figure>
>
> <figure>
>   <img src=3Dfoo alt=3Dbar>
>   <details><summary>...</summary></details>
>   <figcaption>...</figcaption>
> </figure>
>
> Joseph Polizzotto MA <[email protected]>, 2020-06-01 16:34 -0700:
> > Archived-At: <
> https://www.w3.org/mid/CAGQNLEUAvA_hYSGV9A8mCMhY9wb-9b_n_n3FVZinW5gHkGSmE=
[email protected]
> >
> >
> > I would like to use <details> as a child of <figure> but get an error
> > message when running the Nu-HTML checker.
> >
> > error: Element =E2=80=9Cdetails=E2=80=9D not allowed as child of elemen=
t =E2=80=9Cfigure=E2=80=9D in this
> > context. (Suppressing further errors from this subtree.)
> >
> > I believe my use of <details> as a child of <figure> is flagged because=
 I
> > am also using <figcaption> within the same <figure>. When <details> is =
a
> > child of <figcaption> within the <figure>, the error goes away.
> >
> > I also noticed that when I use <details> as a child of <figure> that do=
es
> > not have <figcaption>, there is no error.
> >
> > I am wondering why the Nu_HTML validator allows <details>1) as a child =
of
> > <figcaption> and 2) as a child of <figure> when there is no <figcaption=
>,
> > but not 3) as a child of <figure>, which also has <figcaption>.
> >
> > Note: I have tested <details> as a child of <figure> with a <figcaption=
>
> > with Firefox, Chrome, and Edge and noticed that these browsers do suppo=
rt
> > this combination.
> >
> > Thanks for your help,
> >
> > Joseph
> >
>
> --
> Michael[tm] Smith https://people.w3.org/mike
>


--=20
*Alternate Media Supervisor*
Disabled Students' Program
University of California, Berkeley
https://dsp.berkeley.edu/
<https://nam02.safelinks.protection.outlook.com/?url=3Dhttps%3A%2F%2Fdsp.be=
rkeley.edu%2F&data=3D02%7C01%7C%7C4e0abffcb5b34567a22308d5e13137b3%7C84df9e=
7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636662523854357148&sdata=3DyB5%2BUm2W6=
TBwpc%2BOF4DvN8wPoo1dozUwz8eCepYhTyY%3D&reserved=3D0>
(510) 642-0329

--000000000000e903de05a71bfff1
Content-Type: text/html; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable

<div dir=3D"ltr">Our situation was indeed the first case:<div><br></div><di=
v>&lt;figure&gt;<br>=C2=A0 &lt;img src=3Dfoo alt=3Dbar&gt;<br>=C2=A0 &lt;fi=
gcaption&gt;...&lt;/figcaption&gt;<br>=C2=A0 &lt;details&gt;&lt;summary&gt;=
...&lt;/summary&gt;&lt;/details&gt;<br>&lt;/figure&gt;=C2=A0</div><div><br>=
</div><div>Though we would prefer that &lt;details&gt; came immediately aft=
er &lt;figcaption&gt;, we can change our script to achieve this confirming =
case:</div><div><br></div><div>&lt;figure&gt;<br>=C2=A0 &lt;figcaption&gt;.=
..&lt;/figcaption&gt;<br>=C2=A0 &lt;img src=3Dfoo alt=3Dbar&gt;<br>=C2=A0 &=
lt;details&gt;&lt;summary&gt;...&lt;/summary&gt;&lt;/details&gt;<br>&lt;/fi=
gure&gt;=C2=A0</div><div><br></div><div>Thanks again,</div><div><br></div><=
div>Joseph=C2=A0<br></div><div>=C2=A0<br></div></div><br><div class=3D"gmai=
l_quote"><div dir=3D"ltr" class=3D"gmail_attr">On Mon, Jun 1, 2020 at 5:48 =
PM Michael[tm] Smith &lt;<a href=3D"mailto:[email protected]">[email protected]</a>&gt;=
 wrote:<br></div><blockquote class=3D"gmail_quote" style=3D"margin:0px 0px =
0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">For the =
figure element, the HTML defines the following content model:<br>
<br>
<a href=3D"https://html.spec.whatwg.org/multipage/#the-figure-element:conce=
pt-element-content-model" rel=3D"noreferrer" target=3D"_blank">https://html=
.spec.whatwg.org/multipage/#the-figure-element:concept-element-content-mode=
l</a><br>
<br>
&gt; Either: one figcaption element followed by flow content.<br>
&gt; Or: flow content followed by one figcaption element.<br>
&gt; Or: flow content.<br>
<br>
So an example of a non-conforming case would be something like this:<br>
<br>
&lt;figure&gt;<br>
=C2=A0 &lt;img src=3Dfoo alt=3Dbar&gt;<br>
=C2=A0 &lt;figcaption&gt;...&lt;/figcaption&gt;<br>
=C2=A0 &lt;details&gt;&lt;summary&gt;...&lt;/summary&gt;&lt;/details&gt;<br=
>
&lt;/figure&gt;<br>
<br>
That example would cause the checker to report an &quot;Element =E2=80=9Cde=
tails=E2=80=9D not<br>
allowed as child of element =E2=80=9Cfigure=E2=80=9D in this context&quot; =
error.<br>
<br>
Specifically, the spec requirements don=E2=80=99t allow content both before=
 and<br>
after the figcaption element =E2=80=94 either the figcaption must be the fi=
rst<br>
child of the figure, or it must be the last child.<br>
<br>
But both of the following would be conforming, and would not cause the<br>
checker to report any error.<br>
<br>
&lt;figure&gt;<br>
=C2=A0 &lt;figcaption&gt;...&lt;/figcaption&gt;<br>
=C2=A0 &lt;img src=3Dfoo alt=3Dbar&gt;<br>
=C2=A0 &lt;details&gt;&lt;summary&gt;...&lt;/summary&gt;&lt;/details&gt;<br=
>
&lt;/figure&gt;<br>
<br>
&lt;figure&gt;<br>
=C2=A0 &lt;img src=3Dfoo alt=3Dbar&gt;<br>
=C2=A0 &lt;details&gt;&lt;summary&gt;...&lt;/summary&gt;&lt;/details&gt;<br=
>
=C2=A0 &lt;figcaption&gt;...&lt;/figcaption&gt;<br>
&lt;/figure&gt;<br>
<br>
Joseph Polizzotto MA &lt;<a href=3D"mailto:[email protected]" target=
=3D"_blank">[email protected]</a>&gt;, 2020-06-01 16:34 -0700:<br>
&gt; Archived-At: &lt;<a href=3D"https://www.w3.org/mid/CAGQNLEUAvA_hYSGV9A=
[email protected]" rel=3D"noreferrer" target=
=3D"_blank">https://www.w3.org/mid/CAGQNLEUAvA_hYSGV9A8mCMhY9wb-9b_n_n3FVZi=
[email protected]</a>&gt;<br>
&gt; <br>
&gt; I would like to use &lt;details&gt; as a child of &lt;figure&gt; but g=
et an error<br>
&gt; message when running the Nu-HTML checker.<br>
&gt; <br>
&gt; error: Element =E2=80=9Cdetails=E2=80=9D not allowed as child of eleme=
nt =E2=80=9Cfigure=E2=80=9D in this<br>
&gt; context. (Suppressing further errors from this subtree.)<br>
&gt; <br>
&gt; I believe my use of &lt;details&gt; as a child of &lt;figure&gt; is fl=
agged because I<br>
&gt; am also using &lt;figcaption&gt; within the same &lt;figure&gt;. When =
&lt;details&gt; is a<br>
&gt; child of &lt;figcaption&gt; within the &lt;figure&gt;, the error goes =
away.<br>
&gt; <br>
&gt; I also noticed that when I use &lt;details&gt; as a child of &lt;figur=
e&gt; that does<br>
&gt; not have &lt;figcaption&gt;, there is no error.<br>
&gt; <br>
&gt; I am wondering why the Nu_HTML validator allows &lt;details&gt;1) as a=
 child of<br>
&gt; &lt;figcaption&gt; and 2) as a child of &lt;figure&gt; when there is n=
o &lt;figcaption&gt;,<br>
&gt; but not 3) as a child of &lt;figure&gt;, which also has &lt;figcaption=
&gt;.<br>
&gt; <br>
&gt; Note: I have tested &lt;details&gt; as a child of &lt;figure&gt; with =
a &lt;figcaption&gt;<br>
&gt; with Firefox, Chrome, and Edge and noticed that these browsers do supp=
ort<br>
&gt; this combination.<br>
&gt; <br>
&gt; Thanks for your help,<br>
&gt; <br>
&gt; Joseph<br>
&gt; <br>
<br>
-- <br>
Michael[tm] Smith <a href=3D"https://people.w3.org/mike" rel=3D"noreferrer"=
 target=3D"_blank">https://people.w3.org/mike</a><br>
</blockquote></div><br clear=3D"all"><div><br></div>-- <br><div dir=3D"ltr"=
 class=3D"gmail_signature"><div dir=3D"ltr"><div><div dir=3D"ltr"><div><div=
 dir=3D"ltr"><div><div dir=3D"ltr"><div><div><b style=3D"font-family:verdan=
a,sans-serif;font-size:small;letter-spacing:0.2px">Alternate Media Supervis=
or</b><br></div><div dir=3D"ltr"><div dir=3D"ltr" style=3D"color:rgb(0,0,0)=
;font-family:-webkit-standard;font-style:normal;font-weight:normal;letter-s=
pacing:normal;text-align:start;text-indent:0px;text-transform:none;white-sp=
ace:normal;word-spacing:0px;text-decoration:none"><div dir=3D"ltr"><div><di=
v dir=3D"ltr"><div><div dir=3D"ltr"><div dir=3D"ltr"><div dir=3D"ltr"><div =
dir=3D"ltr"><div dir=3D"ltr"><div dir=3D"ltr"><div dir=3D"ltr"><div dir=3D"=
ltr"><div dir=3D"ltr"><div dir=3D"ltr"><div><font size=3D"2" face=3D"verdan=
a,sans-serif">Disabled Students&#39; Program</font></div><div><font size=3D=
"2" face=3D"verdana,sans-serif">University of California, Berkeley</font></=
div><div><font size=3D"2" face=3D"verdana,sans-serif"><a href=3D"https://na=
m02.safelinks.protection.outlook.com/?url=3Dhttps%3A%2F%2Fdsp.berkeley.edu%=
2F&amp;data=3D02%7C01%7C%7C4e0abffcb5b34567a22308d5e13137b3%7C84df9e7fe9f64=
0afb435aaaaaaaaaaaa%7C1%7C0%7C636662523854357148&amp;sdata=3DyB5%2BUm2W6TBw=
pc%2BOF4DvN8wPoo1dozUwz8eCepYhTyY%3D&amp;reserved=3D0" target=3D"_blank">ht=
tps://dsp.berkeley.edu/</a></font><br></div><div><font size=3D"2" face=3D"v=
erdana,sans-serif">(510) 642-0329<br></font></div></div></div></div></div><=
/div></div></div></div></div></div></div></div></div></div></div><div><br><=
/div></div></div></div></div></div></div></div></div></div></div>

--000000000000e903de05a71bfff1--