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

Tue Jul 31 09:56:56 PDT 2012

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>

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'.

> 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>

> 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