[html5] the limit of lists?

[Ian Hickson]

On Tue, 26 Aug 2014, cat wrote:
>
> Lists are used for menus and for lists, and I’ve also seen them used for 
> forms, but where’s the limit to things lists can be used for, within the 
> bounds of HTML5?
> 
> Semantics…lists..are things which could be lists if they were written 
> out with pen and paper. A nav menu is one such. I can see how forms 
> could be, too.
> 
> but if one would not write a thing down on paper in list form, is that 
> the boundary of what an <li> ought to be used for?

At the end of the day, it's a judgement call for the author to make.

For <ol>, the judgement is easier, I think. Generally, if you would read 
the items out loud prefixed by a number, then <ol> is probably 
appropriate. For example, "Here's what I want you to do. One, go to the 
store, two, buy some tomatoes, and three, put them in the pantry" could 
be imagined as a <p> followed by an <ol>.

For <ul> it's harder, but again, a general rule of thumb is "would it be 
obviously wrong for each item to be prefixed by a bullet point?". Your 
suggestion of "would one write it on paper in list form" is a good rule of 
thumb also.


FWIW, personally I'd use <p> rather than <li> for parts of a form. Note 
that the definition of "paragraph" in the HTML spec isn't quite the same 
as the literary definition. In fact, per the spec, the following three 
cases are actually semantically identical:

   <p>foo</p>

   <div>foo</div>

   <div></div>foo<div></div>

The <div> element is semantically neutral except for providing paragraph 
boundaries, essentially (because it interrupts runs of phrasing content). 
The <p> element is defined to contain a paragraph. So in all three cases 
here, there's one paragraph. In fact, a list item containing just phrasing 
elements (like form controls) is also just a paragraph container. So other 
than the list semantic, there's no semantic difference between putting 
form controls in <li> vs putting them in <p> vs putting them in <div>.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'