[html5] the limit of lists?
ian at hixie.ch
Wed Sep 3 16:07:18 PDT 2014
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
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:
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. `._.-(,_..'--(,_..'`-.;.'
More information about the Help