- From: Ian Yang <ian@invigoreight.com>
- Date: Thu, 19 Jul 2012 15:04:48 +0800
- To: whatwg@lists.whatwg.org
>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
Received on Thursday, 19 July 2012 07:05:23 UTC