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

Ian Yang ian at invigoreight.com
Thu Jul 19 00:04:48 PDT 2012


>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">
    <label for="email">Email</label>
    <input id="email" type="email">
    <label for="site">Website</label>
    <input id="site" type="url">
    <label for="phone">Phone</label>
    <input id="phone" type="tel">
    <input id="male" type="radio">
    <label for="male">Male</label>
    <input id="female" type="radio">
    <label for="female">Female</label>
    <label for="msg">Message</label>
    <textarea id="msg"></textarea>
</form>

Instead, we use <div> (some people use <p>) to group sub elements to make
them more organized, and we also get the side benefit of having more
elements for styling:

<form method="post" action="/">
    <div>
        <label for="name">Name</label>
        <input id="name" type="text">
    </div>
    <div>
        <label for="email">Email</label>
        <input id="email" type="email">
    </div>
    <div>
        <label for="site">Website</label>
        <input id="site" type="url">
    </div>
    <div>
        <label for="phone">Phone</label>
        <input id="phone" type="tel">
    </div>
    <div>
        <input id="male" type="radio">
        <label for="male">Male</label>
    </div>
    <div>
        <input id="female" type="radio">
        <label for="female">Female</label>
    </div>
    <div>
        <label for="msg">Message</label>
        <textarea id="msg"></textarea>
    </div>
</form>


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 nulla nunc enim nibh, commodo sed cursus in.</dd>
    <dt>Pretium Et Nibh</dt>
    <dd>Quisque porttitor mauris ut velit tincidunt ut hendrerit erat
mollis.</dd>
    <dd>A dui condimentum suscipit. Quisque tortor nulla.</dd>
    <dt>Tempus Et Augue</dt>
    <dd>Vivamus ipsum massa, tristique tempus lobortis a.</dd>
    <dt>Vivamus Semper Convallis</dt>
    <dt>Cras Eget Eros</dt>
    <dd>Pellentesque. Vestibulum volutpat mollis placerat.</dd>
    <dd>Maecenas eu tempus ut, imperdiet eu tortor.</dd>
    <dt>Pellentesque</dt>
    <dd>Lobortis consequat ipsum id pulvinar.</dd>
    <dt>Nibh Purus</dt>
    <dd>Adipiscing sit amet ultrices quis, consequat eu dolor.</dd>
</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>
    <li>
        <dt>Pretium Et Nibh</dt>
        <dd>Quisque porttitor mauris ut velit tincidunt ut hendrerit erat
mollis.</dd>
        <dd>A dui condimentum suscipit. Quisque tortor nulla.</dd>
    </li>
    <li>
        <dt>Tempus Et Augue</dt>
        <dd>Vivamus ipsum massa, tristique tempus lobortis a.</dd>
    </li>
    <li>
        <dt>Vivamus Semper Convallis</dt>
        <dt>Cras Eget Eros</dt>
        <dd>Pellentesque. Vestibulum volutpat mollis placerat.</dd>
        <dd>Maecenas eu tempus ut, imperdiet eu tortor.</dd>
    </li>
    <li>
        <dt>Pellentesque</dt>
        <dd>Lobortis consequat ipsum id pulvinar.</dd>
    </li>
    <li>
        <dt>Nibh Purus</dt>
        <dd>Adipiscing sit amet ultrices quis, consequat eu dolor.</dd>
    </li>
</dl>

And usually "life cycle" type contents are presented as circles. Without
<li>(s), it will be hard to style them.

Since the *optional *use of <li> in <dl> could solve many problems, may we
have <li> being valid in <dl>?


Sincerely,
Ian Yang



More information about the whatwg mailing list