[whatwg] Suggest making <dt> and <dd> valid in <ol>

Tue Jul 31 18:26:27 PDT 2012

On Wed, Aug 1, 2012 at 12:56 AM, Leif Halvard Silli <
xn--mlform-iua at xn--mlform-iua.no> wrote:

> Ian Yang on Thu, 19 Jul 2012 15:04:48 +0800, wrote:
>
> >> From previous discussions, some people had suggested possible markup for
> >> "life cycle" type contents. And personally I will stick to using <dl>
> until
> >> there is a better solution.
> >
> > There is still one thing left unanswered. And that's whether we will be
> > able to put <li> inside <dl>.
> >
> > Let's consider <form> we used often. When coding a form, none of us make
> it
> > like the following one because that's obviously very ugly and, most
> > importantly, it hurts our eyes!
> >
> > <form method="post" action="/">
> >     <label for="name">Name</label>
> >     <input id="name" type="text">
>   [...]
> > Instead, we use <div> (some people use <p>) to group sub elements
>   [...]
> > <form method="post" action="/">
> >     <div>
> >         <label for="name">Name</label>
> >         <input id="name" type="text">
> >     </div>
>
> Would it not be better if, rather than <div>, you used <fieldset>? Then
> it would not only benefit your eyes but also the semantics:
>
>       <fieldset>
>          <label for="name">Name</label>
>          <input id="name" type="text">
>       </fieldset>
>

If I remember correctly, <fieldset> is for grouping in complex and large
forms whose fields needs to be grouped into different categories. So it
might be improper to use it as dividers in simple and small forms.

There is even the option that you wrap the <label> around the input -
> then you can drop the @id too - and be semantic as well:
>
>       <label>Name
>          <input type="text">
>       </label>
>
> This way you can 'increase' both the semantics and the 'eye wellness'.
>

I once was thinking about that idea, too, and I gave it up. I have to admit
that it was mainly because of styling reasons. Putting <input> inside
<label> can cause styling inconveniences in many situations.

But look at that structure, <label> is literally used for wrapping label
texts, so putting a <input> which is not label texts inside a <label> is
far-fetched and non-semantic, isn't it?

> > Like above examples, the following <dl> is not well organized, and it's
> > also a pain to read it:
> >
> > <dl>
> >     <dt>Lorem Ipsum</dt>
> >     <dd>Sit amet, consectetur adipiscing elit.</dd>
> >     <dt>Aliquam Viverra</dt>
> >     <dd>Fringilla
>        [... etc ...]
> > </dl>
> >
> > If developers could, *optionally*, use <li> to wrap each group, the code
> > would be more organized:
> >
> > <dl>
> >     <li>
> >         <dt>Lorem Ipsum</dt>
> >         <dd>Sit amet, consectetur adipiscing elit.</dd>
> >     </li>
> >     <li>
> >         <dt>Aliquam Viverra</dt>
> >         <dd>Fringilla nulla nunc enim nibh, commodo sed cursus in.</dd>
> >     </li>
>    [...]
> > </dl>
> >
> > And usually "life cycle" type contents are presented as circles. Without
> > <li>(s), it will be hard to style them.
>
> How about the following method - essentially a variant of
> <ol><li><dfn>Egg</dfn>: A white egg. [etc]</ol>, as proposed by by Ian:

> <ol><li><figure><figcaption>Lorem Ipsum</figcaption>
>           Sit amet, consectetur adipiscing elit.
>         </figure></li>
>     <li><figure><figcaption>Aliquam Viverra</figcaption>
>           Fringilla nulla nunc enim nibh, commodo
>           sed cursus in.</figure></li></ol>
>
> Or, if one wishes, one could drop the <ol><li>…</li></ol> completely
> and  instead e.g. do the following:
>
> <style>figure figure{display:list-item}</style></head><body>
> <figure>
>         <figure>
>           <figcaption>Lorem Ipsum</figcaption>
>           Sit amet, consectetur adipiscing elit.
>         </figure>
>         <figure>
>           <figcaption>Aliquam Viverra</figcaption>
>           Fringilla nulla nunc enim nibh, commodo
>           sed cursus in.
>         </figure>
> </figure>
>

They looks fancy. However, I have a feeling that a "life cycle" should be a
"definition list", and the above examples don't possess the meaning
"definition list". I'm not sure if I'm correct or not. Let me know if I'm
not.

And <figure> is used in contents which have context, typically articles or
blog posts, to illustrate its context. So it might not be an idea element
inside <li>.

> > Since the *optional *use of <li> in <dl> could solve many problems, may
> we
> > have <li> being valid in <dl>?
>
> The most serious problem with that proposal seems to me to be that the
> <li> only have styling functionality. I think one would have to define
> it as a new list type, where <li> has semantic meaning, and then it
> could perhaps work.
> --
> Leif Halvard Silli

Excuse me, but I'm not sure if I understand you. <li> means "list item".
That's very self-explanatory and semantic.

Sincerely,
Ian Yang