- From: Leif Halvard Silli <xn--mlform-iua@xn--mlform-iua.no>
- Date: Tue, 31 Jul 2012 19:56:56 +0300
- To: Ian Yang <ian@invigoreight.com>
- Cc: whatwg@lists.whatwg.org
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
Received on Tuesday, 31 July 2012 18:45:39 UTC