I want to display a leaderboard like so:
1 - John 232342
2 - Mary 45234
3 - Luke 234
59 - You 45
It's an ordered list but I can't make an ordered list that jumps from 3 to an arbitrary number.
So how should I mark this up?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
If I'm reading the HTML5 spec correctly you can do as suggested in Roger's answer and use an ordered list and then use a value attribute on one of the li elements to skip a few numbers:
The first item in the list has the ordinal value given by the ol element's start attribute, unless that li element has a value attribute with a value that can be successfully parsed, in which case it has the ordinal value given by that value attribute.
Each subsequent item in the list has the ordinal value given by its value attribute, if it has one, or, if it doesn't, the ordinal value of the previous item, plus one if the reversed is absent, or minus one if it is present.
<ol> <li value="1">John 232342</li> <li value="2">Mary 45234</li> <li value="3">Luke 234</li> <li value="59">You 45</li> </ol>
The usual way that I've seen this done is with an ellipsis. Something like:
Edit: For markup I would use an unordered list and insert the numbers into the name and use the ellipsis as an item.
Otherwise you end up with some difficult situations when the user is #4, as you would have an ellipsis where it doesn't make sense, or when the user is #2.
Here's a couple of options - but I think li's value is deprecated in HTML4 - and I don't know if it can be done in CSS.
<ol start="1"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li value=59>Item 4</li> <li>Item 5</li> </ol> <DL> <DT>1 <DD>Item 1 <DT>2 <DD>Item 2 <DT>3 <DD>Item 3 <DT>59 <DD>Item 4 <DT>60 <DD>Item 5 </DL>
This gives the following: